L'API JavaScript de Google Maps est un outil JavaScript simple d'utilisation et assez puissant qui nous permet de créer et d'afficher des cartes sur un site Web. Cet article vous guidera dans la configuration de l'API JS de Google Maps, puis dans la création d'une carte simple comportant un marqueur et une forme de polyligne, ainsi que quelques autres fonctionnalités.

Configuration de la carte

  1. 1 Ouvrez ou créez votre page Web. Si vous ne possédez pas encore de page Web dans laquelle vous souhaitez insérer la carte, vous pouvez utiliser le modèle HTML5 suivant. Enregistrez-le sous le nom 'map_page.html': 
      <html lang="fr"> <tête> <meta charset="utf-8"> <Titre>Ma carte de brochure</Titre> </tête> <corps>  </corps> </html>
  2. 2 Inclure le fichier JS Google Maps. Pour ce faire, collez la ligne de code suivante dans votre fichier HTML, à l'intérieur du zone, sur une nouvelle ligne, juste avant la fermeture marque: 
     <scénario async reporter  src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&callback=initMap"> </scénario>
  3. 3 Obtenez une clé API et insérez-la dans l'URL JS. Pour utiliser l'API Google Maps JS - comme toute autre API Google - vous aurez besoin d'une clé API, qui ressemble à un mot de passe. Vous devez ensuite insérer votre nouvelle clé dans l'URL à partir de l'étape ci-dessus où il est indiqué [YOUR_API_KEY] (supprimer les crochets). Pour obtenir votre propre clé, voir Obtenir une page de clé / authentification.
  4. 4 Ajouter un conteneur de carte HTML. Google Maps affichera la carte dans un élément HTML, vous devez donc en fournir un pour cela. Collez la ligne de balisage suivante à l'intérieur du : 
     <div id="carte"></div>
  5. 5 Style du conteneur de carte. Vous devez définir la taille de la carte lorsqu'elle sera affichée et vous devez utiliser CSS pour ce faire. Vous pouvez ajouter les éléments suivants au document : 
     <>> #carte  la taille: 500px; largeur: 700px;  >
  6. 6 Créez l'objet carte. Pour commencer à écrire le code JavaScript qui configure la carte, vous devez ajouter un zone à la après le conteneur de carte div. Vous pouvez également créer l’objet cartographique en appelant le Carte() fonction de l'objet google.maps. Vous devrez également passer la fonction de l'élément HTML du conteneur de carte, comme ceci: 
     <type de script='text / javascript'> var carte; fonction initMap()  // Crée l'objet map. carte = Nouveau Google.Plans.Carte(document.getElementById('carte'));  scénario>
  7. 7 Définissez le zoom et le centre de la carte. Les propriétés zoom et centre de la carte déterminent la zone que la carte couvre par défaut lorsque la carte est chargée. Ce ne sont que les cartes défaut valeurs; les cartes actuel le zoom et le centre peuvent être modifiés ultérieurement si vous activez ces contrôles - nous y reviendrons plus tard.
    Remarque: Vous devez simplement copier les lignes de code suivantes dans votre élément (à partir de l'étape précédente), et assurez-vous qu'il est à l'intérieur la fonction initMap (), avant la fermeture '': 
     carte.setZoom(2); carte.setCenter(lat: 0, lng: 0);
  8. 8 Ajouter un marqueur Les marqueurs indiquent l'emplacement d'un point sur une carte. Dans Leaflet, les marqueurs sont un type de «superposition», ils peuvent donc être directement ajoutés aux cartes. Par défaut, un marqueur apparaît sous la forme d'une épingle rouge, qui est une image standard que vous pouvez modifier. 
     var marqueur = Nouveau Google.Plans.Marqueur(); var les coordonnées = lat: 20, lng: 20; marqueur.setPosition(les coordonnées); marqueur.setMap(carte); marqueur.setTitle("Tchad");
  9. 9 Ajouter une polyligne. Tout comme le marqueur, une polyligne est un type de superposition, mais elle est utilisée dans un but différent. Une polyligne est simplement une ligne avec plusieurs segments. Vous le définissez en fournissant les coordonnées des points qui sépareront les segments de ligne. Les coordonnées doivent être un tableau d'objets de points de coordonnées. L'une des grandes caractéristiques des polylignes de Google Maps est qu'elles peuvent être «géodésiques», ce qui signifie qu'elles peuvent se courber pour correspondre à la forme de la Terre! Vous pouvez définir cette option ultérieurement. 
     var les coordonnées = [ lat: 20, lng: 10, lat: 10, lng: 20, lat: 20, lng: 30 ]; var polyligne = Nouveau Google.Plans.Polyligne(); polyligne.setPath(les coordonnées); // Utilisation du tableau que nous avons défini ci-dessus polyligne.setMap(carte);
  10. 10 Définir les options Chaque superposition de Google Maps comporte des options que vous pouvez définir pour déterminer la superposition. Vous pouvez définir les options du marqueur (à partir des étapes ci-dessus) pour le rendre unique, mais voici les options à définir pour la polyligne que vous venez de créer: 
     polyligne.setOptions( strokeColor: '# FF0000', // rouge vif accident vasculaire cérébral: 1.0, // entièrement opaque (non translucide) accident vasculaire cérébral: 2 // épaisseur de 2 pixels );
  11. 11 La carte finie