Premiers pas avec google-maps-api-3

Placer l’épingle de l’utilisateur sur la carte.


Note, si vous n’êtes pas familier avec l’api google maps, vous pouvez lire l’exemple précédent (basics) afin de comprendre ce petit exemple.


  • Tout d’abord, initialisez la carte.

Vous pouvez ajouter un élément de carte dans votre code HTML et un peu de CSS comme ceci :

<!DOCTYPE html>
<html>
<head>
<style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 100%;
  }
  /* Optional: Makes the sample page fill the window. */
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>

Maintenant, vous devez ajouter la bibliothèque google maps dans votre code avec un script balise comme celui-ci :

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>

Vous pouvez remplacer YOUR_API_KEY dans le code par une clé google api. Il s’agit d’un [lien][1] pour obtenir une clé.

Ensuite, vous devez écrire dans votre code une fonction qui servira de callback (ou de fonction d’initialisation) pour votre carte. Ici, on ajoute juste une petite fonction que vous pouvez trouver sur google [ici][2] :

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }

Vous avez maintenant normalement une carte de base sur votre écran. Vous pouvez trouver le code complet sur [google][2].


  • Deuxièmement, trouvez la position de l’utilisateur.

Pour demander la position de l’utilisateur, il existe une fonction très simple qui est fournie par le navigateur :

navigator.geolocation.getCurrentPosition(showPosition);

Notez que cette fonction accepte un paramètre. C’est une fonction à appeler si la géolocalisation est réussie.

Nous devons créer cette fonction. :)

function showPosition(position) {
    alert (position);    
}

Cette fonction est très simple et nous devrons la mettre à jour par la suite afin de tracer un marqueur sur la position de l’utilisateur.

La fonction de géolocalisation que nous utilisons ici est très simple. Vous pouvez avoir la documentation complète sur [w3schools][3].

À son point le code ressemble à ceci:

<!DOCTYPE html>
<html>

<head>
  <title>Simple Map</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <style>
    /* Always set the map height explicitly to define the size of the div
      * element that contains the map. */
    
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    var map;
    navigator.geolocation.getCurrentPosition(showPosition);
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8
      });
    }
    function showPosition(position) {
      console.log(position);
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>

</html>

  • Et troisièmement, affichez la position de l’utilisateur sur la carte avec un marqueur.

Pour afficher un marqueur sur la carte, vous pouvez utiliser la fonction dans l’exemple ‘basics’ :

// Create a marker and place it on the map
var marker = new google.maps.Marker({
    position: position,
    map: map
});

Je ne détaillerai pas ces lignes de codes très précisément. Vous pouvez juste maintenant que lorsque vous créez un marqueur avec ce code : new google.maps.Marker({});, vous passez les ‘options du marqueur’ entrez les embrasses. Vous pouvez consulter la documentation google [ici][4].

Notez également que vous pouvez spécifier la position du marqueur très facilement avec le paramètre de position.

Nous devons maintenant modifier la fonction showPosition.

Vous pouvez accéder simplement à la lat et lng de la position variable comme ceci :

  var markerPosition={};
  markerPosition.lat=position.coords.latitude;
  markerPosition.lng=position.coords.longitude;

Ainsi, Google comprend comment accéder simplement à la valeur lat et lng.

Maintenant, nous ajoutons pour modifier la fonction showPosition pour ajouter un marqueur à la position de l’utilisateur.

function showPosition(position) {
    var markerPosition={};
    markerPosition.lat=position.coords.latitude;
    markerPosition.lng=position.coords.longitude;
    // Create a marker and place it on the map
    var marker = new google.maps.Marker({
        position: markerPosition,
        map: map
    });
}

  • Enfin, votre code devrait ressembler à ceci :

    Simple Map