Tutoriel de l’API JavaScript de Google Maps: ajoutez une carte personnalisée à votre site Web

Google Maps nous aide chaque jour à nous frayer un chemin à travers les routes et à trouver des endroits d’une manière qui n’était pas imaginative il y a seulement quelques décennies. Il est non seulement utile pour l’orientation, mais nous voyons également de nombreux exemples de cartes utilisées pour la visualisation des données, comme la façon dont récemment de nombreux sites Web utilisent des cartes pour visualiser la propagation de COVID-19 à travers le monde. Aujourd’hui, voyons comment utiliser l’API JavaScript de Google Maps pour créer des cartes personnalisées pour nos sites Web et applications.


Vous vous demandez peut-être pourquoi nous devrions creuser dans l’API JavaScript de Google Maps pour créer des cartes lorsque nous pouvons utiliser un Carte statique à la place, ou utilisez l’un des plugins WordPress disponibles pour le faire sans les tracas du codage.

Bien sûr, les deux sont d’excellentes options lorsque vous souhaitez afficher un emplacement commercial sur votre site Web. Mais l’API JavaScript de Google Maps vous offre plus de contrôle pour les moments où vous souhaitez créer une carte personnalisée avec plus de complexité qu’un plugin pré-construit..

Tutoriel API Google Maps JavaScript

Si vous ne voulez pas consacrer de temps au codage et que vous souhaitez afficher de manière plus simple les cartes sur votre site Web, je recommande Bloc Google Maps d’Otter.

Obtention de la clé API JavaScript de Google Maps

Avant de commencer, nous devons d’abord obtenir une clé API pour Google Maps. Vous pouvez l’obtenir auprès de ici. L’API Google Maps n’est pas entièrement gratuite, mais elle est livrée avec un plan gratuit qui suffit dans la plupart des cas.

Vous avez les clés API? Prenez la troisième sortie du rond-point et poursuivez le didacticiel. ��

Création d’une carte simple

Une instance de base de Google Maps avec des paramètres par défaut.Une instance Google Maps de base avec des paramètres par défaut.

Commençons par créer une carte Google simple pour commencer. Bien que vous puissiez séparer votre JavaScript et CSS, nous utilisons un seul fichier HTML dans ce didacticiel. Voici la structure que nous allons utiliser:

html>
<html>
<tête>
<Titre>Maptitle simple>
<nom méta ="fenêtre" contenu ="échelle initiale = 1,0">
<méta charset ="utf-8">
<style>
#map {
hauteur: 100%;
}

html, corps {
hauteur: 100%;
marge: 0;
rembourrage: 0;
}
style>
tête>
<corps>
<div id ="carte">div>
<scénario>
laissez la carte;
fonction initMap () {
map = new google.maps.Map (document.getElementById (‘map’), {
centre: {
lat: 51.513329,
lng: -0.088950
},
zoom: 14
});
}
scénario>
<script src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback = initMap" report asynchrone>scénario>
corps>
html>

Une fois l’API Google Maps chargée, elle appelle la fonction initMap qui initialise la carte. Si nous décomposons notre code encore plus loin, nous utilisons un div vide avec un ID de carte pour déclarer où nous voulons rendre la carte.

laissez la carte;
fonction initMap () {
map = new google.maps.Map (document.getElementById (‘map’), {
centre: {
lat: 51.513329,
lng: -0.088950
},
zoom: 14
});
}

Dans notre JavaScript, tout d’abord, nous définissons une variable de carte en dehors de la fonction, elle fait donc partie de la portée globale afin que nous puissions modifier la carte plus tard. Dans notre fonction initMap, nous déclarons d’abord une nouvelle carte Google et la configurons pour la rendre en appelant l’élément avec l’ID de la carte. Après cela, nous spécifions nos options, qui sont le centre de la carte et le niveau de zoom.

Nous utilisons les coordonnées de la City de Londres, un monument historique au cœur de Londres, comme centre de la carte. Plus tard, nous discuterons de la façon dont vous pouvez utiliser l’API Maps pour trouver les coordonnées de n’importe quel emplacement sur la carte. Mais pour l’instant, si vous êtes curieux, vous pouvez utiliser latlong.net pour trouver rapidement les coordonnées de n’importe quelle adresse.

Types de carte

Maintenant que nous avons une carte de base, nous pouvons regarder les options de personnalisation que l’API JavaScript de Google Maps nous offre. La première option que nous allons utiliser est type de carte. Google Maps prend en charge quatre types de cartes, à savoir:

  • feuille de route: la carte par défaut que vous voyez habituellement.
  • satellite: vue satellite de Google Maps et de Google Earth, si disponible.
  • hybride: un mélange de feuille de route et de vue satellite.
  • terrain: une carte basée sur des informations sur le terrain, telles que les montagnes et les vallées.

Dans nos options de cartes, nous pouvons ajouter une propriété mapType pour sélectionner la vue que nous voulons, comme ceci:

map = new google.maps.Map (document.getElementById (‘map’), {
centre: {
lat: 51.513329,
lng: -0.08895
},
zoom: 14,
mapTypeId: «hybride»
});

Pour notre exemple, nous utilisons une carte hybride. Vous pouvez expérimenter avec différents types pour voir celui qui convient à votre cas d’utilisation.

Options de carte

Après le type de carte, nous arrivons à contrôles de carte. Google Maps vous permet d’utiliser n’importe lequel de ses six contrôles dans vos cartes. Vous pouvez trouver une liste des contrôles sur leur site internet.

Vous pouvez spécifier le contrôle que vous souhaitez utiliser et son emplacement si nécessaire, comme ceci:

map = new google.maps.Map (document.getElementById (‘map’), {
centre: {
lat: 51.513329,
lng: -0.08895
},
zoom: 14,
mapTypeId: «hybride»,
scaleControl: true,
fullscreenControlOptions: {
position: google.maps.ControlPosition.RIGHT_BOTTOM
},

});

Nous activons scaleControl, qui montre l’échelle de la carte tout en bas à côté des droits d’auteur de Google, en la déclarant VRAIE. Et dans la ligne suivante, nous changeons l’apparence de fullscreenControl de sa position en haut à droite par défaut en bas à droite en utilisant la propriété fullscreenControlOptions. De même, vous pouvez ajuster la position des autres commandes.

Vous voulez un contrôle qui fait autre chose que les commandes intégrées? Ne vous inquiétez pas, Google Maps vous permet également de créer des contrôles personnalisés pour votre carte.

Parlons des marqueurs!

Ajout d’un marqueur

Les marqueurs sont incroyables et permettent de créer de nombreuses applications interactives avec une carte. Par exemple, certains sites Web de réservation d’hôtels utilisent des marqueurs pour vous montrer l’emplacement des hôtels sur une carte. Et ils sont également très faciles à ajouter.

Voyons ajouter un marqueur au London Bridge avec le code suivant:

let marker = new google.maps.Marker ({
position: {
lat: 51.506821,
lng: -0.0879
},
carte: carte,
titre: «Le pont de Londres»
});

Comme vous pouvez le voir ci-dessus, le code de notre marqueur a trois propriétés. Le premier est les coordonnées. Après cela, nous passons la variable de carte où nous avons stocké notre carte au début, et enfin, nous passons le titre du marqueur.

Vous pouvez également transmettre l’URL à une icône de marqueur personnalisé avec une propriété d’icône dans le bloc de code ci-dessus.

Ajout d’une fenêtre d’informations

Vous pourriez trouver quelque chose qui manque à nos marqueurs. Habituellement, lorsque vous cliquez sur un marqueur sur la carte, il affiche une fenêtre contextuelle avec plus de détails. Ce popup est un composant différent en soi qui est appelé un InfoWindow.

Google Maps avec un marqueur personnalisé.Google Maps avec un marqueur personnalisé.

Heureusement pour nous, il est très facile d’attacher une InfoWindow à notre marqueur.

laissez infoWindow = new google.maps.InfoWindow ({
contenu: ‘

le pont de Londres


});

marker.addListener (‘click’, function () {
infoWindow.open (carte, marqueur);
});

Tout d’abord, nous créons une nouvelle variable infoWindow qui stocke notre composant InfoWindow. Nous lui transmettons uniquement une propriété de contenu qui contient le code HTML qu’il affiche une fois cliqué. Après cela, nous ajoutons un écouteur d’événements au clic à notre marqueur, qui lui dit d’ouvrir la fenêtre d’informations lorsque vous cliquez dessus.

Juste comme ça, vous pouvez utiliser un marqueur et une infoWindow pour créer des expériences interactives avec votre carte.

C’est maintenant le bon moment pour faire une pause d’une seconde et revenir sur les progrès que nous avons accomplis. En seulement 30 lignes de code, nous avons utilisé l’API JavaScript de Google Maps pour créer une carte personnalisée avec des marqueurs et des infoboxes. Il convient de noter à quel point il est facile d’utiliser l’API de Google Maps pour faire des choses qui auraient semblé difficiles pour un débutant.

Modification dynamique & auditeurs d’événements

Les marqueurs et les options de carte ne sont pas nécessairement les raisons pour lesquelles quiconque abandonnerait un plug-in Google Map préfabriqué et passerait à l’API. Ils sont prometteurs, mais de nombreux plugins offrent déjà ces fonctionnalités. Essayons quelque chose qui n’est pas possible avec un plugin.

Modification dynamique

Google Maps a de nombreuses méthodes pour interagir avec la carte et modifier son comportement. Si vous avez l’habitude de travailler avec DOM, vous ne devriez pas avoir beaucoup de mal avec ces méthodes.

Certaines de ces méthodes vous permettent d’obtenir des informations de la carte, comme getCenter, qui renvoie les coordonnées centrales de la carte. Et de même, certains vous permettent de changer le comportement, comme setCenter, qui change le centre de la carte.

Il existe de nombreuses méthodes, et vous devriez les examiner toutes afin de savoir ce qui est possible avec l’API. Utilisons l’une de ces méthodes avec notre carte.

Nous pouvons ajouter un bouton à notre exemple qui ramène le centre de notre carte à la City de Londres.

Tout d’abord, nous devons ajouter un bouton à notre code:

<id du bouton ="bringToCenter">Apportez à Centerbutton>

Maintenant, nous attachons un écouteur d’événements à notre bouton qui déclenche la méthode setCenter:

const centerButton = document.querySelector (‘#bringToCenter’);

centerButton.addEventListener (‘clic’, fonction (e) {
e.preventDefault ();
map.setCenter ({
lat: 51.513329,
lng: -0.08895
});
});

Et c’est tout. C’est simple, non? Nous avons utilisé map.setCenter dans lequel map est la variable que nous avons déclarée au début pour contenir notre carte.

Vous devriez essayer d’expérimenter différentes méthodes et explorer les limites de l’API.

Auditeurs d’événements

Les écouteurs d’événements sont un autre concept que les développeurs JavaScript connaissent peut-être. Vous pouvez associer des actions à des événements spécifiques, ce qui signifie que lorsqu’un événement se produit, tel qu’un changement de centre, ces actions sont déclenchées.

Prenons l’un des exemples des documents Google Maps pour obtenir les coordonnées de la carte lorsque vous cliquez n’importe où dessus.

let infoWindowLatLang;

map.addListener (‘click’, fonction (mapsMouseEvent) {
if (infoWindowLatLang) infoWindowLatLang.close ();

infoWindowLatLang = nouveau google.maps.InfoWindow ({
position: mapsMouseEvent.latLng
});

infoWindowLatLang.setContent (mapsMouseEvent.latLng.toString ());
infoWindowLatLang.open (carte);
});

Comme vous pouvez le voir, le concept est à peu près le même que le fonctionnement des écouteurs d’événements en JavaScript. Tout d’abord, nous attachons un écouteur d’événements onClick à notre carte. À l’intérieur de notre écouteur d’événement, nous obtenons les coordonnées de l’endroit où l’utilisateur clique et le mettons dans une InfoWindow.

Si vous cochez la Bloc Google Map par Otter, vous pouvez voir comment nous utilisons ces écouteurs d’événements et ces méthodes pour faire des choses telles que l’ajout de glisser & déposer des marqueurs et supprimer un marqueur en cliquant dessus.

Création d’un contrôle personnalisé

Et enfin, nous terminons cet article avec un exemple de construction contrôles personnalisés pour votre Google Maps.

Comme indiqué précédemment, nous créons un bouton personnalisé qui ajoute un marqueur au centre de la carte. Bien que le code pour cela semble un peu compliqué, il est simple.

Tout d’abord, nous construisons un bouton comme sa fonction, qui a un écouteur d’événements pour ajouter un marqueur au centre de la carte.

Vous devez remplacer YOUR_API_KEY dans le bloc de code ci-dessus par votre clé API. Il rend une simple carte Google avec la latitude et la longitude données comme centre.

fonction MarkerControl (controlDiv, map) {
const controlUI = document.createElement (‘div’);
controlUI.style.backgroundColor = ‘#fff’;
controlUI.style.border = ‘2px solid #fff’;
controlUI.style.borderRadius = ‘3px’;
controlUI.style.boxShadow = ‘0 2px 6px rgba (0,0,0, .3)’;
controlUI.style.cursor = ‘pointeur’;
controlUI.style.margin = ’10px’;
controlDiv.appendChild (controlUI);

const controlText = document.createElement (‘img’);
controlText.style.padding = ‘5px’;
controlText.title = ‘Cliquez pour ajouter un marqueur’;
controlText.src = ‘https://maps.google.com/mapfiles/ms/icons/red-pushpin.png’;
controlUI.appendChild (controlText);

controlUI.addEventListener (‘click’, function () {
nouveau google.maps.Marker ({
position: map.getCenter (),
carte: carte
});
});
}

La plupart du code ci-dessus crée simplement un élément pour notre bouton. À la fin, nous attachons un écouteur d’événements à notre bouton qui ajoute un marqueur au centre de la carte.

Maintenant, nous devons attacher notre bouton à notre carte, ce que nous faisons avec le code suivant:

const markerControlDiv = document.createElement (‘div’);
const markerControl = nouveau MarkerControl (markerControlDiv, map);
markerControlDiv.index = 1;
map.controls [google.maps.ControlPosition.LEFT_BOTTOM] .push (markerControlDiv);

Le code ci-dessus attache notre bouton à la carte à sa position en bas à gauche. Et c’est tout. C’est tout ce qu’il faut pour ajouter des contrôles personnalisés à Google Maps à l’aide de son API JavaScript.

Google Maps avec un bouton personnalisé.Google Maps avec un bouton personnalisé dans le coin inférieur gauche.

Conclusion

Un exemple pratique de tout ce que nous avons fait dans cet article est disponible en ligne sur CodeSandbox.

C’est tout pour cet article, et j’espère que cela vous a donné une certaine confiance en travaillant avec l’API JavaScript de Google Maps. Il est incroyablement simple à utiliser et vous permet de construire à peu près tout ce que vous désirez avec une carte!

Vous devez maintenant essayer d’utiliser ce que vous avez appris aujourd’hui et de le mettre en pratique en créant vous-même un projet de démonstration à l’aide de Google Maps. Faites-nous savoir dans les commentaires si vous avez des questions; nous sommes heureux d’y répondre!

N’oubliez pas de rejoindre notre cours accéléré sur l’accélération de votre site WordPress. Avec quelques correctifs simples, vous pouvez réduire votre temps de chargement de 50 à 80%:

Mise en page et présentation par Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map