Utilisation de l'API Google Map
L'utilisation de l'API Google-Map est très utile quand nous voulons utiliser une carte "plan" pour situer des élements.
Que ça soit un lieu à mettre en evidence, un trajet a emprunter ou même localiser des personnes. Nous allons voir dans cet article, l'utilisation basique de l'API pour comment la mettre en place sur une page HTML, grâce a JavaScript.
La première chose a faire est de récupérer une clé privée sur le site de
Cette partie n'est pas compliqué, il faut juste pas à pas suivre ce que M.Google nous dit. Il vous faudra un pré-requis :
Posséder un compte Google.
Ensuite, il y aura plusieurs étapes à effectuer, commençons par nous servir de notre clé-privée obtenue.
On va devoir placer dans notre Code HTML, de préférence à la fin de notre <body> le script suivant :
"https://maps.googleapis.com/maps/api/js?key=VotreCléPrivée&callback=initMap">
</script>
On peut remarquer que cette balise script va initialisé votre future "carte" avec votre clé privée que vous devez placer à l'interieur et ainsi effectuer un CallBack sur la fonction initMap();
Ensuite il faut placer la carte google, pour ça il faudra juste une balise avec un ID pour ensuite l'initialisé avec javascript
donc plaçons notre balise :
● On voit que l'on doit créer une <div> vide, elle servira avec un id="map"
● Ensuite, il faut se rendre dans notre partie "script" soit directement dans le code de votre page HTML, le mieux reste de prendre l'habitude de créer un fichier exemple: script.js puis faire un appel dans notre HTML.
● Voyons ensemble ce qu'on met a l'intérieur :
var maVille = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: maVille
});
● Donc on écrit bien la fonction initMap();
● On place dans une variable "map", une nouvelle carte Google à l'emplacement ou l'on retrouve id="map"
● On remarque que l'on déclare une variable "maVille" qui contient une latitude et longitude.
● On va se servir de cette variable pour que la carte soit centrée sur ce point géographique
● On place aussi une propriété "Zoom" pour bien entendu le zoom.
Voilà les éléments de bases necessaires pour créer une carte sur votre site. On peut rajouter evidemment une multitude d'options pour personnaliser sa carte.
Important : si vous faites tout ça, la "carte" risque de ne pas s'afficher, la raison est simple il faut lui donner une taille sur votre site:
● Rendez-vous dans votre fichier CSS
Exemple :
width : 500px;
height : 500px;
}
Ce qui nous donne au final une carte comme celle-ci à placer ou l'on désire sur notre site !
