Google Map API

Le géocoding permet à un utilisateur de rentrer une adresse du type : 12 rue du haut 75000 Paris, et de voir cette adresse affichée sur une carte et marquée d'une épingle pour la situer précisément.

L'API s'utilise facilement

Il suffit d'ajouter votre code d'API dans le code ci-dessous. Cela est situé au niveau des dernières lignes, tout en en bas.

<!DOCTYPE html>
<html>
  <head>
    <title>Geocoding service</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map {
            height: 100%;
        }
        #floating-panel {
            position: absolute;
            top: 10px;
            left: 25%;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
            text-align: center;
            font-family: 'Roboto','sans-serif';
            line-height: 30px;
            padding-left: 10px;
        }
    </style>
  </head>
    
    
    
  <body>
    <div id="floating-panel">
      <input id="address" type="textbox" value="Sydney, NSW">
      <input id="submit" type="button" value="Geocode">
    </div>
    <div id="map"></div>
    <script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: {lat: -34.397, lng: 150.644}
  });
  var geocoder = new google.maps.Geocoder();

  document.getElementById('submit').addEventListener('click', function() {
    geocodeAddress(geocoder, map);
  });
}

function geocodeAddress(geocoder, resultsMap) {
  var address = document.getElementById('address').value;
  geocoder.geocode({'address': address}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      resultsMap.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: resultsMap,
        position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

    </script>
    <!-- remplacez les XXXXXXXXXXXX ci-dessous avec votre clé d'API -->                              
    <script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXX&signed_in=true&callback=initMap"async defer></script>
  </body>
</html>



Mais il faut une clé et une autorisation pour l'API

Nous allons utiliser l'API : Google Maps Geocoding API que vous trouverez dans la bibliothèque.

Mais avant cela il vous faut une clé d'API

Depuis cette adresse, https://console.developers.google.com cliquez sur identifiants

Cliquez sur le bouton créer des identifiants pour afficher la liste déroulante :
Choisissez : Clé API
Vous obtiendrez quelquechose qui ressemble à ça : AIzaSyB37lEnw_gig-h_XwW1i5kCa_XkBiK4vcuk (ceci est une clé fictive)
Recopiez cette clé dans le code (voir ci-dessus)


Vous pensez qu'a ce stade, il est possible de faire fonctionner votre API et localiser une adresse sur la carte, eh bien NON CELA NE MARCHE PAS !

Il faut activer les API, c'est à dire :
- Google Maps Geocoding
- Google Maps Javascript

L'image ci-dessous montre comment activer : Google Maps JavaScript



1 : cliquez sur bibliothèque
2 : dans le champs de recherche tapez "maps"
3 : choisr google maps JavaScript pour l'activer. (voir l'image ci-dessous pour l'activation)
4 : recommencer l'opération pour géocoding








Portfolio

Mes dernières créations, webdesign, graphisme, illustrations et logos

Consulter le portfolio
La doc Vue.js
A propos

J'exerce depuis plusieurs années le métier de développeur Front-End. Dernièrement j'ai créé ...

Qui suis-je
Qui maîtrise Internet, maîtrise le monde
Jules Cesar