Insérer une carte GoogleMap (19/10/2019)

Etape 1 - Création d'un compte Google
(si vous n'avez pas encore de compte Google)

Dans un premier temps créez un compte chez google (si vous n'en n'avez pas). Ce compte vous permettra également d'utiliser d'autres outils tel que Google Analytics ou Outils Webmaster. Donc pourquoi s'en priver.

Création Compte Google

Etape 2 - Demande d'une clé Google Map

Pour utiliser Google Map sur un site, vous devez obtenir une clé spécifique pour le site en vous rendant sur la page d'inscription. Vous pouvez demander une clé pour tester en local en donnant l'adresse http://localhost et ensuite faire une demande de clé pour le domaine (adresse) du site en production.

Inscription Google Map

Lorsque vous cliquez sur Generate API Key, il vous est demandé vos identifiant/passe du compte Google (si vous ne vous êtes pas déjà connecté).

Etape 3 - La clé API Google Map

Récupérez la clé API. Il faudra la coller dans le script que vous trouverez un peu plus bas.

La clé

Etape 4 - Les scripts

1 - L'appel au script GoogleMap

<!-- remplacez key=XXXXXXXXXXXXXXXXXXXXXXXXX par la clé obtenu à l'inscription --> <script type="text/javascript" src="http://www.google.com/jsapi?key=XXXXXXXXXXXXXXXXXXXXXXXXX"></script> 

Placez ce code dans la partie head de votre page et n'oubliez pas de remplacer key=XXXXXXXXXXXXXXXXXXXXXXXXX" par votre propre clé.

2 - Exemples de script

Voici deux exemple de scripts, le premier est minimaliste et n'affichera qu'un marqueur et une bulle d'information (personnalisable), le second affichera également les contrôles de zoom ainsi que le chois d'affichage (Plan, satellite, mixte). Vous pouvez également modifier les options (notamment titre, adresse et téléphone pour les deux et les options de controles/cartes pour le second). Le code est, je pense, suffisamment documenté pour comprendre.

Marqueur et bulle

<!-- script d'affichage de la carte --> <script type="text/javascript"> // variables var map; var geocoder; var zoom = 5; // à personnaliser var titre = '<strong>Nos coordonnées</strong><br />'; var addresse = '31000 Toulouse, France'; // adresse exacte utlisé par Gmap var tel = '<br />Tél. : 05 01 01 01 01'; // initialisation du script var init = function () { google.load("maps", "2"); google.setOnLoadCallback(initMap); }; // init // génération de la carte var initMap = function (){ // création de l'instance d'objet google.maps.Map2, // en indiquant au sein de quel élément de la page la carte sera affichée : map = new google.maps.Map2(document.getElementById('map')); // recherche des coordonnées d'un point dont on connait l'adresse : geocoder = new google.maps.ClientGeocoder(); geocoder.getLatLng(address, function (coord) { // centrage de la carte sur les coordonnées renvoyées par Google : map.setCenter(coord, zoom); }); // créé une bulle à l'adresse geocoder.getLocations(addresse, addAddressToMap); }; // initMap // addAddressToMap() est appelé quand le "geocoder" googlemap retourne // une réponse. Il place un marker sur la carte et ouvre une bulle // d'information aux coordonnées correspondant à l'adresse function addAddressToMap(response) { map.clearOverlays(); if (!response || response.Status.code != 200) { // pas de réponse ou erreur alert("Excusez nous, mais il n'a pas été possible de localiser cette adresse."); } else { // une réponse, on recupere les infos place = response.Placemark[0]; // les coordonnées point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]); // on cree un marqueur marker = new GMarker(point); // un clic affichera les infos GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml(titre + addresse + tel); }); // on place le marqueur map.addOverlay(marker); // affiche de la bulle d'infos marker.openInfoWindowHtml(titre + addresse + tel); } }

Placez ce script dans le head ou dans la page. N'oubliez pas de modifier l'adresse et le téléphone...

Contrôles de zoom et type de la carte

<!-- script d'affichage de la carte --> <script type="text/javascript"> // variables var map; var geocoder; var zoom = 5; // à personnaliser var titre = '<strong>Nos coordonnées</strong><br />'; var addresse = '31000 Toulouse, France'; // adresse exacte utilisé par Gmap var tel = '<br />Tél. : 05 01 01 01 01'; // initialisation du script var init = function () { google.load("maps", "2"); google.setOnLoadCallback(initMap); }; // init // génération de la carte var initMap = function (){ // création de l'instance d'objet google.maps.Map2, // en indiquant au sein de quel élément de la page la carte sera affichée : map = new google.maps.Map2(document.getElementById('map')); // ajout de contrôle échelle/zoom // GLargeMapControl : de base // GSmallMapControl : sans l'échelle indiquant le niveau de zoom // GSmallZoomControl : uniquement les boutons + et - // GScaleControl : indique l'échalle de la carte en bas map.addControl(new GLargeMapControl()); // contrôle type de carte // GMapTypeControl : de base // GHierarchicalMapTypeControl : un survol sur le bouton Satellite donne la posssibilité // de choisir d'afficher/masquer les textes // GOverviewMapControl : affiche une mini carte en bas à droite map.addControl(new GMapTypeControl()); // recherche des coordonnées d'un point dont on connait l'adresse : geocoder = new google.maps.ClientGeocoder(); geocoder.getLatLng(address, function (coord) { // centrage de la carte sur les coordonnées renvoyées par Google : map.setCenter(coord, zoom); // choix du type de carte // G_NORMAL_MAP : Carte normale (plan) // G_SATELLITE_MAP : Vue satellite (photo aérienne) // G_HYBRID_MAP : Vue satellite, agrémentée des noms de villes, rues, ... // G_PHYSICAL_MAP : Vue "physique", présentant les informations de terrain. map.setMapType(G_NORMAL_MAP); }); // créé une bulle à l'adresse geocoder.getLocations(addresse, addAddressToMap); }; // initMap // addAddressToMap() est appelé quand le "geocoder" googlemap retourne // une réponse. Il place un marker sur la carte et ouvre une bulle // d'information aux coordonnées correspondant à l'adresse function addAddressToMap(response) { map.clearOverlays(); if (!response || response.Status.code != 200) { // pas de réponse ou erreur alert("Excusez nous, mais il n'a pas été possible de localiser cette adresse."); } else { // une réponse, on recupere les infos place = response.Placemark[0]; // les coordonnées point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]); // on cree un marqueur marker = new GMarker(point); // un clic affichera les infos GEvent.addListener(marker, "click", function(){ marker.openInfoWindowHtml(titre + addresse + tel); }); // on place le marqueur map.addOverlay(marker); // affiche de la bulle d'infos marker.openInfoWindowHtml(titre + addresse + tel); } }

Placez ce script dans le head ou dans la page et modifiez les différentes options d'affichage. N'oubliez pas de modifier l'adresse et le téléphone...

3 - Affichage de la carte et appel

<!-- div qui récupérera la carte --> <div id="map" style="border: 1px solid #ccc; width: 400px; height: 400px; margin: 10px auto"></div> <!-- appel du script --> <script type="text/javascript"> init(); </script>

Placez cette partie à l'endoit où vous désirez voir apparaître la carte. Vous pouvez évidemment modifier le rendu du bloc div #map en modifiant les paramètres de styles.

Démonstration : GoogleMap