Insérer l’API d’une Google map sur une page de mon site ?
c’est assez simple… et génialement pratique !
Google met gratuitement à la disposition des développeur ses API Ajax permettant d’insérer une carte dynamique sur un site.
Un exemple, centré sur le village de Palaminy
(Développé par Web Tolosa)
Pour insérer cette carte il y a 5 étapes :
- Etape 1 : commencez par créer une « clé API Google Maps » que vous obtiendrez iciAcceptez ici les conditions de Google, et notez (c’est important) le dossier exact dans lequel sera la page en question :
Sur la page suivante, notez soigneusement la clef ainsi générée (vous pouvez en créer autant que de dossiers nécessaires) :
- Etape 2 : trouvez les coordonnées exactes de l’endroit ou vous souhaitez centrer votre carte.
Si vous n’avez pas de GPS, il y a plusieurs pages sur lInternet qui vous les donneront…
Par exemple GPS France, ou http://earth.google.com ou encore :http://maps.google.fr (cliquez en haut à droite sur le lien « obtenir l’URL de cette page ») - Etape 3 : vous insérez dans le head de la page où sera la carte le bout de code suivante :
================================<meta http-equiv= »content-type » content= »text/html; charset=utf-8″/>
<title>Ma carte Google Maps </title>
<script src= »http://maps.google.com/maps?file=api&v=2&key=votre_clé_Google_maps » type= »text/javascript »> </script>
<script type= »text/javascript »>
<!– Google map –>
var map;function onLoad() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById(« Gmap »));
<!– controle du zoom –>
map.addControl(new GLargeMapControl());
<!– controle satellite –>
map.addControl(new GMapTypeControl());
<!– longitude, latitude et niveau de zoom initial –>
map.setCenter(new GLatLng(45.202485, 1.067090), 13);
<!– bulle de marquage centrale + légende –>
map.openInfoWindowHtml( new GLatLng(45.202485, 1.067090), « Mon adresse (pouvant comporter du code HTML) « );
}
}</script>
<noscript><p>Désolé, JavaScript doit être activé pour utiliser Google Maps.
Il semble que ce ne soit pas le cas avec votre navigateur.
Pour voir cette carte, activez javascript et rechargez la page.</p>
</noscript>================================
en remplaçant bien sûr la clé Google, la longitude et la latitude par les votres…
(NB : il est important que le jeu de charactère soit en UTF8 et non en iso-8859-1, sinon votre carte risque de bugguer !)
- Etape 4 :
Remplacez la balise BODY par le code suivant :================================
<body onload= »onLoad() »>
================================ - Etape 5 :
A l’endroit où va être affichée la carte, insérez le code suivant :================================<div id= »Gmap » style= »width: 500px; height: 300px »></div>================================
Libre à vous de personnaliser cette carte grâce aux indications données par Google ici : il y a sur le Net des sites entiers de « Google Map Maniaks » (comme celui-ci signalé par Jean-Luc thx ) tant cette API est personnalisable !
Voilà, c’est tout :bye:
il faut créer une clé Google pour ton localhost.
Une clé = 1 domaine
Bonjour,
Possible de faire les test en local avec easyphp?
J’ai essayé mais ça marche pas…
Merci beaucoup !
Question : est-il possible d’afficher la vue "satellite" par défaut plutôt que le plan ??
Merci
:bravo: thx :gne: love lol
lool :[ :(( :C 
:O :""( ~:(
:gne: pas sur, Jean Luc …
J’ai testé avec un site multilingue, les cartes disparaissaient si je ne créait pas 1 clef par dossier de langue… Il y a peut etre une autre cause, mais je n’ai pas trouvé
Hello,
pas besoin de créer plusieurs clés si on doit publier plusieurs cartes dans différents dossiers du même site web, il suffit de spécifier l’url racine du site, genre "http://www.monsite.com/".