Les premiers pas avec l’api Google Maps
L’api Google Maps est certainement un des outils les plus en vogue sur la toile. Dans cet article nous allons apprendre à afficher notre toute première carte via l’api Google Maps.
Inscription
Tout d’abord il va falloir inscrire son site auprès de google sur ce site.
On peut très bien mettre comme adresse 127.0.0.1 ou localhost
api googlemap
Google va vous renvoyer dans une page d’administration. Il vous donnera votre clef, pour faire appel à l’api Google Maps.
Si vous avez pris comme URL localhost vous aurez cette clé : ABQIAAAAzg_ZseRgldxWcy2tNYAEYRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSS7F5U7RNXncIf02uklkFtcG80gw
La carte
Dans la partie head de notre page web nous allons charger la librairie JS de Google Maps
<script src="http://maps.google.com/maps?file=api&amp;amp;amp;amp;amp;v=2&amp;amp;amp;amp;amp;key= VOTRE CLE =true" type="text/javascript"></script>
Là on va créer une fonction javascript qui va charger la carte.
Voici le code, les explications sont juste en-dessous : 
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(48.86175,2.331119), 15);
map.setUIToDefault();
}
}
</script>
La fonction GBrowserIsCompatible est une fonction de l’api google map qui vérifie que le navigateur est compatible avec l’api Google Maps.
Pour afficher la carte, il faut indiquer à Google Maps un point géographique et un indice de zoom.
Pour définir un point géographique nous allons utiliser l’objet GLatLng.
Voici ça syntaxe :
new GLatLng(latitude,longitude)
Enfin pour définir la carte nous allons utiliser la méthode setCenter de l’objet map
Voici ça syntaxe :
map.setCenter(objet GLatLng, indice de zoom);
La méthode setUIToDefault() sert juste à afficher les boutons de navigations sur la carte.
On à fait le plus dur, on va pouvoir afficher la carte
<body>
<div id="map" style="width: 500px; height: 300px"></div>
<script type="text/javascript">
window.onload = function(){initialize()};
</script>
</body>
Vous aurez reconnu le jardin des Tuileries :
Astuce pour avoir la géolocalisation
J’ai trouver une méthode vraiment facile pour récupérer les coordonnées d’un lieu voulut. (si vous avez trouvez plus simple n’hésitez pas à partager )
Pour cela il faut aller sur google maps, vous tapez sur le moteur le nom du lieu que vous vous voulez afficher. (on va dire bastille).
Une fois la carte bien centrée, vous cliquez sur le bouton Envoyer
api Google Maps
Une fenêtre apparait et là il suffit de récupérer les bonnes informations :
api Google Maps
note : si vous n’avez pas toutes les informations, il faut naviguer un tout petit peu dans la map et tout devrait s’afficher
Voilà c’est fini pour cet article. Dans les prochains articles nous allons voir plus en détail l’api Google Maps, notamment dans la personnalisation de la carte.
Note de l'article
(3 votes, moyenne: 2,33 max : 5)
Loading ...
novembre 13th, 2009 at 16 h 56 min
bonjour,
pour trouver les coordonnées d’un point àp, vous pouvez aussi
novembre 13th, 2009 at 16 h 59 min
excusez-moi,
je continue:
pour trouver les coordonnées d’un point à partir de Google maps, vous pouvez aussi faire un clic droit à l’emplacement que vous souhaitez puis un clic gauche sur “que trouve-t-on à cet endroit”.
les coordonnées apparaissent dans le champ de recherche de Google maps.
novembre 22nd, 2009 at 13 h 27 min
[...] On va reprendre l’affichage d’une simple carte (celle du tutoriel précédent) [...]