Comment installer Google Map ?

créé le .

Aujourd'hui de nombreux sites utilisent Google Map pour situer leur enseigne. Google Map permet ensuite d'un seul clic de demander l'itinéraire entre votre domicile et l'enseigne renseignée. Cela permet directement au visiteur d'estimer le temps de route pour se rendre sur place. Très utile, Google Map augmente alors le taux de visiteur sur site réel. Formaweb vous explique en quelques étapes très détaillées comment insérer Google Map sur votre site. Suivez le guide !

La clé API Google Map

Etape 1 : Dirigez vous sur https://developers.google.com/maps/web/?hl=fr Etape 2 :Cliquez sur "Obtenir une clé" en haut à droite puis sur "continuer". Etape 3 : Cliquez sur "créer un projet" afin de déterminer la création de votre map sur votre site. Etape 4 : Vous pouvez alors choisir de restreindre votre clé. Vous pouvez choisir à cette étape de restreindre votre clé à selon 5 critères :

  • Aucun
  • Référents HTTP (sites Web)
  • Adresses IP (serveurs Web, tâches Cron, etc.)
  • Applications Android
  • Applications iOS
Etape 5 : Une clé API vous est fournie. Utilisez cette clé dans votre application sous la forme du paramètre key=API_KEY Il sera nécessaire d'attendre quelques minutes pour que cette clé et ses restrictions soient actives. Le temps de suivre les étapes suivantes d'installation de Google map devrait suffire.

Etape 6 : Script Google map

Sur votre site web, insérez le script suivant en modifiant la référence de la clé par la votre. <script src="https://maps.google.com/maps/api/js?key=AIzaS...nzXa6w"></script> Puis placez le script pour récupérer l'ensemble des données et faire fonctionner Google Map. Ce script pourra être placé en bas de page puisqu'il est capable de charger les informations après que la page soit chargée. <script> function init_Map() { var var_location = new google.maps.LatLng( $("#lat").val(), $("#lng").val() ); var var_mapoptions = { center: var_location, zoom: 14 }; var var_marker = new google.maps.Marker({ position: var_location, map: var_map, title:'Adresse IP Localisée ici'}); var var_map = new google.maps.Map(document.getElementById("map-container"), var_mapoptions); var_marker.setMap(var_map); } google.maps.event.addDomListener(window, 'load', init_Map); </script>

Etape 7 : Insérer la zone pour la map

Votre site devra posséder une div pour présenter la map. <div id="map-container"></div>

Etape 8 : Connaitre la latitude et la longitude en PHP.

Voici le code en php permettant d'obtenir la longitude et la latitude de votre visiteur. <?php echo $_SERVER['GEOIP_LATITUDE']; ?> <?php echo $_SERVER['GEOIP_LONGITUDE']; ?> Attention, la variable server geoip n'est disponible que sur certains type d'hébergements. Formaweb est conçu sur un hébergement payant mutualisé chez OVH. Si vous êtes dans un cas similaire, vous pouvez utiliser ces variables. Renseignez-vous auprès de votre hébergeur. Plusieurs choix s'offrent à vous selon vos besoins en terme de présentation. Vous pouvez présenter ces informations sous formes de champs de type input. Par exemple : <input id="lat" name="lat" value="<?php echo $_SERVER['GEOIP_LATITUDE']; ?>"> <input id="lng" name="lng" value="<?php echo $_SERVER['GEOIP_LONGITUDE']; ?>"> ce qui donnera : Vous pouvez également rendre ces informations invisibles en notant directement dans le script les latitudes et longitudes. Dans le script, vous pourrez alors modifier la variable var_location comme vous le souhaitez. Cette variable se situe à la seconde ligne du script. Voici quelques exemples : Si vous souhaitez y mettre des coordonnées fixes : var var_location = new google.maps.LatLng( "50.537498", "4.256" ); Si vous souhaitez récupérer les coordonnées d'un champs de type input. var var_location = new google.maps.LatLng( $("#lat").val(), $("#lng").val() ); Si vous souhaitez cacher les coordonnées récupérées. var var_location = new google.maps.LatLng( "", "" );


Vous avez besoin davantage d'information, Google vous fournit de l'assistance et de nombreux exemples d'installation sur tous les supports. Rendez-vous sur : https://developers.google.com/maps/documentation/javascript/?hl=fr



Vous notre contenu ?

Lisez toute l'info de Formaweb avec votre café


Laissez nous un commentaire...