Gestion des événements dans Google Maps

Le API Javascript de Google Maps Il est extrêmement puissant car il permet non seulement de créer les cartes en tant que telles, mais nous pouvons aller plus loin en étendant ses fonctionnalités et en utilisant des vecteurs pour ajouter des points d'intérêt, des fenêtres déroulantes, des lignes et une simulation d'itinéraire.
Un autre des points forts des cartes que nous implémentons et si nous avons déjà travaillé avec Javascript sont les événements, qui sont le noyau du langage et sont chargés de gérer l'interaction de l'utilisateur avec le site Web, dans ce cas précis l'interaction avec notre carte.
Avant d'aller à la pratique, nous devons d'abord connaître une partie de la théorie derrière les événements gérés par l'API, cela utilise l'espace de noms google.maps.événement de travailler avec eux. Il a des méthodes statiques pour écouter les événements définis dans l'API et le contrôleur de addListener () pour les enregistrer.
Sachant cela, voyons quelques-uns des événements les plus importants disponibles dans l'API et que nous utiliserons dans nos exemples :
center_changedCet événement est déclenché lorsque la propriété du centre de la carte change.
Cliquez surCet événement est déclenché lorsque l'utilisateur clique sur la carte, il est important de mentionner qu'il exclut les clics sur les marqueurs ou les fenêtres d'informations.
glisserCet événement est déclenché à plusieurs reprises lorsque l'utilisateur fait glisser la carte.
mouvement de la sourisCet événement est déclenché lorsque l'utilisateur déplace sa souris n'importe où dans le conteneur de carte.
clic-droitCet événement est déclenché lorsque l'événement du menu contextuel DOM est déclenché.
zoom_changéCet événement est déclenché lorsque la propriété zoom de la carte change.
Il est important de mentionner que bien que ces événements puissent ressembler aux événements standard de la SOLEIL ils ne le sont pas, ils font partie du API Google Maps. Ceci pour éviter le problème où les navigateurs gèrent différents types d'événements pour le SOLEIL.
Ayant déjà vu les événements les plus utilisés par le API Passons à la pratique pour démontrer leur utilisation dans la création de nos cartes, le premier exemple de ce tutoriel sera axé sur les événements liés au changement des propriétés de la carte, ce qui nous permettra d'obtenir une fonctionnalité de carte synchronisée, c'est-à-dire , ont des cartes avec des bases différentes qui montrent les mêmes informations indépendamment des changements de leur centre ou de leur zoom.
Voyons les étapes que nous devons suivre pour atteindre cet objectif :
1- Nous créons d'abord un nouveau fichier que nous appellerons cartes_synchronisées.html et nous effectuons l'inclusion de l'API, ainsi que les styles que le conteneur de nos cartes aura, il est important de définir les variables globales des cartes car nous devrons les utiliser dans toute la portée du programme :

 var map1, map2; 

2- Comme nous l'avons mentionné précédemment, nous allons synchroniser deux cartes avec des bases différentes, pour cela, nous devons créer deux fonctions qui les initialisent. Ces fonctions seront assez similaires à celles que nous avons maîtrisées dans les tutoriels précédents, cependant elles auront la gestion des événements pour réaliser la fonctionnalité de synchronisation, voyons le code de la première fonction :

 function initializeMap1 () {var mapOptions = {center : nouveau google.maps.LatLng (40.41678, -3.70379), zoom : 10, mapTypeId : google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap'); map1 = nouveau google.maps.Map (mapElement, mapOptions); google.maps.event.addListener (map1, 'center_changed', function () {map2.setCenter (map1.getCenter ());}); google.maps.event.addListener (map1, 'zoom_changed', function () {map2.setZoom (map1.getZoom ());}); } 

Comme on peut le voir, nous avons les options de notre carte comme d'habitude pour définir le centre, le zoom et la base, qui dans ce cas est FEUILLE DE ROUTE, puis nous définissons les options de notre carte et enfin nos événements qui sont chargés d'obtenir les valeurs des propriétés de la carte numéro 1 et de les définir sur la carte numéro 2, pour cela nous utiliserons les événements de center_changed Oui zoom_changé c'est ce qui nous permet de nous synchroniser.
3- Ensuite, nous devons créer notre fonction pour initialiser la deuxième carte, le code est similaire au précédent, cependant les événements se déclencheront de la carte numéro 2 au numéro 1 et la base sera HYBRIDE pour montrer la différence entre les deux :

 function initializeMap2 () {var mapOptions2 = {centre : nouveau google.maps.LatLng (40.41678, -3.70379), zoom : 10, mapTypeId : google.maps.MapTypeId.HYBRID}; var mapElement2 = document.getElementById ('mapDiv2'); map2 = nouveau google.maps.Map (mapElement2, mapOptions2); google.maps.event.addListener (map2, 'center_changed', function () {setTimeout (function () {map1.setCenter (map2.getCenter ());}, 10);}); google.maps.event.addListener (map2, 'zoom_changed', function () {setTimeout (function () {map1.setZoom (map2.getZoom ());}, 10);}); } 

4- Enfin on crée une fonction pour instancier les maps qui va nous permettre de faire l'instance des deux, on construit notre HTML et nous mettons la même classe aux divs qui contiendront nos maps :

 function initializeMaps () {initializeMap1 (); initializeMap2 (); } google.maps.event.addDomListener (fenêtre, 'charger', initializeMaps); Cartes synchronisées 

Voyons à quoi ressemblent nos cartes synchronisées lorsque nous exécutons notre exercice dans le navigateur :

AGRANDIR

Il est important de mentionner que les modifications que nous apportons dans une carte seront reflétées dans l'autre et vice versa, voyons à quoi cela ressemble après avoir modifié la propriété du centre et du zoom, car ils restent exactement les mêmes à l'exception de la base :

AGRANDIR

L'un des événements les plus populaires et les plus polyvalents que nous puissions trouver est l'utilisation de la souris comme dispositif pour saisir des informations et interagir avec différents éléments de notre interface, dans les cartes ce n'est pas différent, nous pouvons l'utiliser pour déclencher différents événements selon à son utilisation, dans cet exemple, nous utiliserons l'événement click pour obtenir les coordonnées de ce point spécifique, voyons les étapes à suivre :
1- Nous créons un nouveau fichier appelé obtenir_coordonnées.html et nous incluons notre API avec les styles :

2- Puis on crée la fonction initializeMap () comme d'habitude mais cela aura quelque chose de différent et c'est la définition de l'événement Cliquez sur dans le ajouterListener avec la mise en place d'une boîte de dialogue qui nous fournira des informations sur la latitude et la longitude de l'endroit où nous cliquons, voyons :

 google.maps.event.addListener (map, 'click', function (e) {if (infowindow! = null) infowindow.close (); infowindow = new google.maps.InfoWindow ({content: 'Coordonnées de la souris : 
Latitude: '+ e.latLng.lat () +'
Longueur: '+ e.latLng.lng (), position : e.latLng}); infowindow.open (carte); }); 

3- Enfin nous construisons notre HTML et nous définissons notre conteneur pour la carte :

 Obtenir des coordonnées avec un clic de souris

Une fois notre code terminé, voyons à quoi ressemble notre carte dans notre navigateur lorsque nous cliquons dessus et les informations de latitude et de longitude de ce point s'affichent :

AGRANDIR

Nous avons déjà vu que nous pouvons obtenir la latitude et la longitude d'un point d'un simple clic de souris, mais ce n'est peut-être pas le plus précis pour obtenir cette information, nous pouvons donc mettre en œuvre une solution qui nous permet de visualiser la latitude et longitude de tout point par lequel nous passons le pointeur de notre souris, voyons :
1- Nous incluons notre API et créons nos styles pour notre carte et pour le contrôle qui se chargera d'afficher les informations de latitude et longitude :

2- Nous créons notre fonction initializeMap () comme dans les exercices précédents et nous définissons les paramètres de notre contrôle où nous l'initialisons avec les coordonnées 0.00 / 0.00:

 var controlDiv = document.createElement ('div'); controlDiv.className = 'mapControl'; controlDiv.id = 'mapCoordinates'; controlDiv.innerHTML = 'Lat / Lng: 0.00 / 0.00'; 

3- Ensuite, nous devons créer le contrôle et l'ajouter à notre carte, nous le faisons avec google.controls, où nous pouvons spécifier la position dans laquelle il sera, dans ce cas nous utiliserons RIGHT_BOTTOM qui correspond en bas à droite et le conteneur où il sera affiché :

map.controls [google.maps.ControlPosition.RIGHT_BOTTOM] .push (controlDiv);

4- Enfin nous définissons notre événement qui sera de type mouvement de la souris et il injectera le texte au contrôle des informations que nous obtenons :

 google.maps.event.addListener (map, 'mousemove', function (e) {var coordinateText = 'Lat / Lng:' + e.latLng.lat (). toFixed (6) + '/' + e.latLng. lng ().toFixed (6); controlDiv.innerHTML = coordinateText ;}); 

Voyons à quoi ressemble notre carte avec le contrôle pour obtenir les informations de latitude et de longitude :

AGRANDIR

Pour finir, voyons un exemple un peu plus complexe, où nous utiliserons non seulement des événements mais aussi des vecteurs et un menu contextuel pour donner à l'utilisateur un moyen de communiquer avec notre carte de manière plus organisée et directe, voyons les étapes à suivre pour atteindre notre objectif :
1- Nous créons un fichier appelé menu_contextual.html et nous incluons le API Javascript de Google Maps, nous créons également les styles de notre carte et de notre menu contextuel :

2- Avant de créer notre fonction initializeMap () Nous devons effectuer quelques étapes supplémentaires, l'une d'entre elles consiste à créer la fonction pour définir la classe pour le menu contextuel, voyons :

 fonction menuContextual (carte) {this.setMap (carte); this.map = carte; this.mapDiv = map.getDiv (); this.menuDiv = null; }; 

3- Une fois cela fait, nous devons créer les options de notre menu contextuel et ajouter l'événement qui déclenchera chacun d'entre eux lorsqu'il sera sélectionné, ce qui, comme nous l'imaginons, sera Cliquez sur:

 menuContextual.prototype = nouveau google.maps.OverlayView (); menuContextual.prototype.draw = function () {}; menuContextual.prototype.onAdd = function () {var that = this; this.menuDiv = document.createElement ('div'); this.menuDiv.className = 'contextmenu'; this.menuDiv.innerHTML = 'Créer un signet
Zoom
Annuler le zoom
'; this.getPanes ().floatPane.appendChild (this.menuDiv); google.maps.event.addListener (this.map, 'click', function (mouseEvent) {that.hide ();}); }; 

4- Pour finir avec notre menu contextuel il suffit d'ajouter les actions show et hide, voyons à quoi ressemble notre portion de code pour ça :

 menuContextual.prototype.show = function (coord) {var proj = this.getProjection (); var mouseCoords = proj.fromLatLngToDivPixel (coord); var left = Math.floor (mouseCoords.x); var top = Math.floor (mouseCoords.y); this.menuDiv.style.display = 'bloc'; this.menuDiv.style.left = gauche + 'px'; this.menuDiv.style.top = top + 'px'; this.menuDiv.style.visibility = 'visible'; }; menuContextual.prototype.hide = function (x, y) {this.menuDiv.style.visibility = 'caché'; } 

5- Ayant terminé notre menu contextuel, il ne nous reste plus qu'à programmer les fonctions des options de notre menu, qui sont de zoomer, annuler le zoom et placer un marqueur :

 fonction doZoom () {map.setZoom (map.getZoom () + 1); } fonction undoZoom () {map.setZoom (map.getZoom () - 1); } function createMarker () {var marker = new google.maps.Marker ({position: lastCoordinate, map: map, title: 'Random Marker'}); } 

6- Enfin nous initialisons notre carte, où l'important ici est de créer le menu contextuel pour notre carte et définir l'événement principal clic-droit qui sera déclenché par le clic droit de la souris lorsqu'il est pressé :

 contextMenu = new menuContextual (carte); google.maps.event.addListener (carte, 'clic droit', fonction (e) {lastCoordinate = e.latLng; contextMenu.show (e.latLng);}); 

7- Nous créons notre HTML de manière conventionnelle et exécutons notre exemple, voyons à quoi ressemble notre menu contextuel lorsque nous faisons un clic droit sur notre carte :

AGRANDIR

Essayons maintenant les options de notre menu contextuel, en plaçant quelques marqueurs et en jouant avec le zoom de notre carte, voyons :

AGRANDIR

Avec ce dernier exemple, nous terminons ce tutoriel, ayant appris à gérer les événements du API Javascript de Google Maps pour obtenir des fonctionnalités qui augmentent l'expérience utilisateur dans les cartes que nous créons, en combinant des techniques avancées pour obtenir des fonctionnalités étendues et complexes qui permettront à notre carte de se démarquer sur tout site Web mis en œuvre.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif