|
La carte la plus simple possible :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Première carte</title> <script src="http://maps.google.com/maps?file=api&v=2&key=VOTRE_CLEF_GOOGLE_MAPS" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(48.9, 2.3), 7); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <div id="map" style="width: 600px; height: 200px"></div> </body></html>
La même carte, avec zoom et recherche d'adresse :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Deuxième carte</title> <script src="http://maps.google.com/maps?file=api&v=2&key=VOTRE_CLEF_GOOGLE_MAPS" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map = null; var geocoder = null; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(48.9, 2.3), 7); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); geocoder = new GClientGeocoder(); } } function afficherAdresse(address) { if (geocoder) { geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " introuvable"); } else { map.setCenter(point, 13); var marker = new GMarker(point); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); } } //]]> </script> </head> <body onload="load()" onunload="GUnload()"> <form action="#" onsubmit="afficherAdresse(this.address.value); return false"> <p> <input type="text" size="88" name="address" value="70 avenue Pierre Grenier, Boulogne-Billancourt, France" /> <input type="submit" value="Go!" /> </p> <div id="map" style="width: 600px; height: 200px"></div> </form> </body></html>
|
