Vous êtes prêt !

Pour passer à l'étape de développement, accédez à notre documentation pour les développeurs.

Activer Google Maps JavaScript API

Pour commencer, nous allons vous guider à travers la console Google Developers et effectuer deux ou trois petites choses :

  1. Créer ou sélectionner un projet
  2. Activer Google Maps JavaScript API et les services connexes
  3. Créer les clés appropriées
Continuer

Cartes avec connexion

Lorsque vous activez la connexion avec Google Maps JavaScript API, les cartes sur votre site sont adaptées à vos utilisateurs. Les utilisateurs qui sont connectés à leur compte Google peuvent enregistrer des lieux pour un affichage ultérieur sur le Web ou via leur appareil mobile. Les lieux enregistrés à partir de la carte peuvent être attribués à votre site ou à votre application.

Présentation

Chaque visiteur de votre site voit une carte Google Map personnalisée. S'il est connecté avec son compte Google, ses lieux enregistrés, son domicile, son lieu de travail et plus encore sont intégrés dans la carte affichée. Cela signifie également que les interactions avec la carte, comme le marquage d'un lieu avec une étoile, sont conservées et pourront être consultées aisément dans Google Maps pour ordinateurs de bureau ou appareils mobiles, ainsi que dans toute autre carte Google Maps que l'utilisateur pourrait consulter sur le Web.

Ces détails spécifiques à l'utilisateur ne sont visibles que par l'utilisateur connecté. Aucun autre utilisateur de votre application ne peut les voir. Ils ne sont pas non plus accessibles avec l'API. Veuillez trouver ci-dessous un exemple de carte avec connexion. Une fenêtre de connexion à votre compte Google ou votre avatar Google devrait s'afficher en haut à droit de la carte.

Voir l'échantillon de code complet.

Activer la connexion

Pour activer la connexion sur une carte créée avec Google Maps JavaScript API, chargez la version v3.18 ou une version ultérieure de l'API avec le paramètre additionnel signed_in=true.

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

Une fenêtre de connexion à votre compte Google ou votre avatar Google devrait être affiché en haut à droit de la carte.

Les utilisateurs peuvent cliquer sur la commande de connexion en haut à droite de la carte pour se connecter à leur compte Google. S'ils étaient déjà connectés à Google via une autre propriété, ils seront automatiquement connectés à la carte.

Enregistrement attribué

Aidez vos utilisateurs à se rappeler des endroits qui comptent le plus pour eux en leur permettant d'enregistrer des lieux dans Google Maps. Les lieux enregistrés apparaissent sur les autres cartes Google Maps lorsque l'utilisateur les consulte sur le Web ou des appareils mobiles. Lorsqu'un utilisateur enregistre un lieu depuis un objet SaveWidget ou InfoWindow, vous pouvez inclure une mention personnalisée et des liens vers votre application.

Vous pouvez activer la fonctionnalité d'enregistrement attribué de deux façons :

  • En ajoutant les informations de l'objet place à un marqueur afin de permettre l'enregistrement depuis une fenêtre InfoWindow ancrée à cet objet Marker.
  • En créant un objet SaveWidget personnalisé.

Les lieux enregistrés sont ensuite accessibles en les sélectionnant sur la carte.

Enregistrer dans Google Maps à l'aide d'une fenêtre d'info

Ajoutez des informations sur un lieu à un marqueur afin d'activer la commande Enregistrer dans Google Maps sur la fenêtre d'info par défaut. Cette commande est automatiquement ajoutée à toute fenêtre d'info associée à ce marqueur. Vous pouvez également attribuer l'enregistrement à votre application pour aider les utilisateurs à se rappeler de la source d'origine.

Pour activer la fonction Enregistrer dans Google Maps à partir d'une fenêtre d'info :

  1. Créez un nouvel objet Marker.
  2. Dans MarkerOptions, spécifiez les propriétés map, place et attribution. Notez que la propriété position n'est pas nécessaire lorsque la propriété place est fournie.
  3. Dans l'objet place, spécifiez une propriété location et l'un des éléments suivants :
    • Un identifiant placeId pour identifier le lieu de manière unique. En savoir plus sur comment référencer un lieu avec un identifiant de lieu.
    • Une chaîne query pour rechercher des lieux à proximité de l'objet location. Les chaînes de recherche doivent être les plus précises possible. Par exemple : 'stanley park vancouver bc canada'.
  4. Dans l'objet attribution, spécifiez ce qui suit :
    • La source de l'enregistrement. Il s'agit en général du nom de votre site ou application.
    • Une adresse webUrl (facultative) à inclure comme lien vers votre site.
    • Un code iosDeepLinkId (facultatif), spécifié comme modèle d'URL et qui s'affiche à la place de l'adresse webUrl sur iOS.
  5. Créez un nouvel objet InfoWindow.
  6. Ajoutez un écouteur d'événement pour ouvrir l'objet InfoWindow lorsque l'utilisateur clique sur l'objet Marker.

Cela permet d'activer l'option Enregistrer dans Google Maps dès que l'on clique sur le marqueur.

Veuillez trouver ci-dessous un exemple illustrant l'utilisation d'une chaîne query pour rechercher un lieu.

Voir l'échantillon de code complet.

// [START script-body]
      // When you add a marker using a Place instead of a location, the Maps
      // API will automatically add a 'Save to Google Maps' link to any info
      // window associated with that marker.
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: {lat: -33.8666, lng: 151.1958}
        });

        var marker = new google.maps.Marker({
          map: map,
          // Define the place with a location, and a query string.
          place: {
            location: {lat: -33.8666, lng: 151.1958},
            query: 'Google, Sydney, Australia'

          },
          // Attributions help users find your site again.
          attribution: {
            source: 'Google Maps JavaScript API',
            webUrl: 'https://developers.google.com/maps/'
          }
        });

        // Construct a new InfoWindow.
        var infoWindow = new google.maps.InfoWindow({
          content: 'Google Sydney'
        });

        // Opens the InfoWindow when marker is clicked.
        marker.addListener('click', function() {
          infoWindow.open(map, marker);
        });
      }
// [END script-body]

Enregistrer dans Google Maps via la commande SaveWidget

Vous pouvez utiliser la commande SaveWidget afin de créer une interface utilisateur personnalisée pour enregistrer des lieux. Lorsque vous utilisez la commande SaveWidget, vous pouvez spécifier des données de mention supplémentaires afin que vos utilisateurs se souviennent de la source d'enregistrement du lieu et puissent facilement revenir à votre application.

Pour ajouter une commande SaveWidget à votre application, procédez comme suit :

  1. Ajoutez une balise div à une page contenant une carte Google.
  2. Indiquez le lieu à enregistrer avec un marqueur, afin que vos utilisateurs sachent quel lieu ils enregistrent.
  3. Créez un objet SaveWidgetOptions incluant un littéral objet place et attribution.
  4. Créez un nouvel objet SaveWidget, en transmettant la balise div et les options que vous avez ajoutées.

Voici un exemple de widget d'enregistrement pour le bureau de Google à Sydney. Dans cet exemple, nous créons une balise div en dehors de la surface de la carte, puis utilisons Google Maps JavaScript API pour ajouter cette balise div en tant que commande.

Voir l'échantillon de code complet.

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Save Widget</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <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;
      }
      #save-widget {
        width: 300px;
        box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px;
        background-color: white;
        padding: 10px;
        font-family: Roboto, Arial;
        font-size: 13px;
        margin: 15px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <div id="save-widget">
      <strong>Google Sydney</strong>
      <p>We’re located on the water in Pyrmont, with views of the Sydney Harbour Bridge, The
          Rocks and Darling Harbour. Our building is the greenest in Sydney. Inside, we have a
          "living wall" made of plants, a tire swing, a library with a nap pod and some amazing
          baristas.</p>
    </div>
    <script>
      /*
       * This sample uses a custom control to display the SaveWidget. Custom
       * controls can be used in place of the default Info Window to create a
       * custom UI.
       * This sample uses a Place ID to reference Google Sydney. Place IDs are
       * stable values that uniquely reference a place on a Google Map and are
       * documented in detail at:
       * https://developers.google.com/maps/documentation/javascript/places#placeid
       */

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: {lat: -33.8666, lng: 151.1958},
          mapTypeControlOptions: {
            mapTypeIds: [
              'roadmap',
              'satellite'
            ],
            position: google.maps.ControlPosition.BOTTOM_LEFT
          }
        });

        var widgetDiv = document.getElementById('save-widget');
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(widgetDiv);

        // Append a Save Control to the existing save-widget div.
        var saveWidget = new google.maps.SaveWidget(widgetDiv, {
          place: {
            // ChIJN1t_tDeuEmsRUsoyG83frY4 is the place Id for Google Sydney.
            placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
            location: {lat: -33.866647, lng: 151.195886}
          },
          attribution: {
            source: 'Google Maps JavaScript API',
            webUrl: 'https://developers.google.com/maps/'
          }
        });

        var marker = new google.maps.Marker({
          map: map,
          position: saveWidget.getPlace().location
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&signed_in=true&callback=initMap">
    </script>
  </body>
</html>

Envoyer des commentaires concernant…

Google Maps JavaScript API
Google Maps JavaScript API
Besoin d'aide ? Consultez notre page d'assistance.