Services Google Maps

Les services offerts par le API Javascript de Google Maps sont aussi variés que fonctionnels, ils ont une qualité qui se différencie Google Maps De la part de leurs concurrents, ces services fonctionnent généralement de manière asynchrone, ce qui permet de faire la requête vers un serveur externe et une méthode de type callback se charge de traiter les réponses.
L'un des points forts de ces services est qu'ils sont entièrement compatibles avec les classes et objets API. Nous pouvons aller de la consultation de l'adresse d'un point spécifique sur notre carte à même la mise en œuvre de la vue de la rue.
Avant de passer aux exemples, voyons quelques-uns des services les plus importants que nous utiliserons dans ce didacticiel.
Codage géographiqueCe service nous permet de transformer des adresses communes en coordonnées géographiques basées sur la latitude et la longitude d'un point, cela nous permet de placer des marqueurs ou de positionner notre carte, pour effectuer ces opérations l'API fournit une classe appelée géocodeur ().
Matrice des distancesCe service nous aide à calculer la distance et la durée de l'itinéraire entre plusieurs points, ce qui est largement utilisé aujourd'hui, pour cela nous avons pour objectif de google.maps.DistanceMatrixService et ses méthodes associées.
Vue sur la rueService Vue sur la rue ou Street View nous offre des vues panoramiques à 360 degrés dans les zones où il est couvert, ce qui fera sans aucun doute ressortir nos cartes.
N'oubliez pas qu'ici j'ai détaillé le fonctionnement de l'API et la gestion des événements dans Google Maps et l'introduction pour comprendre l'API Javascript dans Google Maps.
Pour réaliser cet exemple, nous utiliserons le service géocodeur () Mais comme nous l'avons mentionné, cela nous permet de transformer une adresse en une coordonnée, c'est bien, mais pour l'utilisateur conventionnel c'est quelque chose qui n'y voit pas beaucoup d'utilité c'est pourquoi nous utiliserons le géocodeur inversé pour obtenir l'adresse dont nous avons besoin en un clic. Voyons les étapes que nous devons suivre :
1- Tout d'abord, comme nous le savons déjà, nous incluons l'API, sans oublier d'utiliser nos identifiants, en plus de cela, nous inclurons la bibliothèque de dessin qui nous permettra d'implémenter la fonctionnalité de marqueurs de dessin, nous concaténons cette bibliothèque à notre identifiant avec le symbole & comme nous le verrons ci-dessous :

2- On ne peut pas oublier les styles pour la carte, qui lui donneront le type de visualisation sur la page, ainsi que la définition des variables globales qui auront une portée globale dans toutes les méthodes de notre code :

 carte var; var géocodeur var popup; 

3- Après cela, nous définissons notre méthode initializeMap () où la première chose que nous allons faire est de déclarer notre objet de type géocodeur nous aider de la classe Géocodeur () et avec Fenêtre d'informations l'objet de la popup qui affichera l'adresse à l'écran :

 function initializeMap () {geocoder = new google.maps.Geocoder (); popup = nouveau google.maps.InfoWindow (); 

4- On inclut les options classiques de la carte telles que le centre, le zoom et le type de base, on obtient l'élément SOLEIL et on instancie la méthode Carte:

 google.maps.visualRefresh = vrai; var mapOptions = {centre : nouveau google.maps.LatLng (40.41678, -3.70379), zoom : 10, mapTypeId : google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 

5- Maintenant nous créons le gestionnaire de dessin qui va nous permettre de dessiner des marqueurs, pour cela nous allons faire une instance de Gestionnaire de dessins, nous le rendons visible dans l'interface utilisateur et sélectionnons quels modes seront affichés dans le champ et dans quelle position ils seront :

 var drawingManager = new google.maps.drawing.DrawingManager ({drawingMode : null, drawingControl : true, drawingControlOptions : {position : google.maps.ControlPosition.TOP_CENTER, drawingModes : [google.maps.drawing.OverlayType.MARKER]}}); 

6- Maintenant, nous activons la fonctionnalité nouvellement créée, nous ajoutons l'écouteur pour notre événement et pour effectuer géocodeur inversé on obtient la position en latitude et longitude de notre marqueur avec la méthode obtenirPosition ():

 drawingManager.setMap (carte); google.maps.event.addListener (drawingManager, 'markercomplete', fonction (marqueur) {var markerPosition = marker.getPosition (); 

7- Afin de compléter le géocodeur inversé nous utiliserons le service de géocoder () et nous ferons un conditionnel pour vérifier que le service renvoie une réponse valide sinon nous le gérons pour que l'utilisateur sache qu'il a échoué et si le résultat est correct nous appelons notre méthode Afficher l'adresse ():

 geocoder.geocode ({'latLng': markerPosition}, fonction (résultats, statut) {if (status == google.maps.GeocoderStatus.OK) {if (résultats) {ShowAddress (résultats [0], marqueur);}} else {alerte ("Le service a échoué : " + état );}}); 

8- Enfin, il suffit de construire la méthode de Afficher l'adresse () qui recevra le résultat de notre géocodeur inversé et la position du marqueur, avec cela nous pourrons établir le centre et afficher les informations de l'adresse formatée sans aucun problème :

 function ShowAddress (résultat, marqueur) {map.setCenter (marker.getPosition ()); map.setZoom (13); var popupContent = 'Adresse:  '+ result.formatted_address; popup.setContent (popupContent); popup.open (carte, marqueur); } 

9- On ferme les balises correspondantes et on ajoute la portion du code HTML pour compléter notre exemple :

 Trouvez l'adresse sur la carte en un clic

10- Nous exécutons dans notre navigateur et cliquons sur n'importe quel point de notre carte et nous obtiendrons l'adresse affichée dans la fenêtre contextuelle que nous déclarons, elle devrait ressembler à ceci :

AGRANDIR

Cette fonctionnalité peut être appliquée à n'importe quel point de notre carte, il suffit de le parcourir et de sélectionner un autre point.
Le API Javascript de Google Maps nous fournit des services très utiles, l'un d'eux est le matrice de distance qui nous permet de calculer la distance et le temps entre plusieurs points, une fonctionnalité que nous pouvons utiliser pour mettre en œuvre différentes solutions dans n'importe quelle entreprise, du calcul des délais de livraison à l'établissement de l'itinéraire le plus optimal entre différents points. Voyons les étapes que nous devons suivre pour implémenter cette fonctionnalité entre nos cartes.
1- Nous incluons notre API avec la bibliothèque dessin, ainsi que les styles pour l'affichage de notre carte et le conteneur de notre matrice :

2- Nous définissons des variables globales à utiliser dans toute la portée de notre code et dans la fonction initializeMap () Nous initialisons les tableaux pour gérer la latitude et la longitude de l'origine et de la destination :

 carte var; var originLatLon; var destinationLatLon; var distanceMatrixService; var marqueurCount; var arrayRésultat; function initializeMap () {originLatLon = []; destinationLatLon = []; 

3- Ensuite, dans la même fonction, nous obtenons le bouton et le gestionnaire d'événements pour celui-ci, en plus nous initialisons l'objet pour le service de DistanceMatrixService ainsi que le compteur pour les marqueurs et affecter le résultat du tableau à un conteneur div :

 var generateBtnMatrix = document.getElementById ('generateMatrix'); generateBtnMatrix.addEventListener ('click', function () {MatrixRequest ();}); distanceMatrixService = nouveau google.maps.DistanceMatrixService (); marqueurCount = 0; tableau de résultats = document.getElementById ('tableau de résultats'); 

4- On inclut les options classiques de la carte comme le centre, le zoom et le type de base, on obtient l'élément SOLEIL et on instancie la méthode Carte:

 google.maps.visualRefresh = vrai; var mapOptions = {centre : nouveau google.maps.LatLng (40.41678, -3.70379), zoom : 10, mapTypeId : google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 

5- Comme dans l'exercice précédent nous avons créé le gestionnaire de dessin qui va nous permettre de dessiner des marqueurs, pour cela nous allons faire une instance de Gestionnaire de dessins et nous fournissons les options nécessaires, l'activons et ajoutons l'écouteur pour l'événement :

 var drawingManager = new google.maps.drawing.DrawingManager ({drawingMode : null, drawingControl : true, drawingControlOptions : {position : google.maps.ControlPosition.TOP_CENTER, drawingModes : [google.maps.drawing.OverlayType.MARKER]}}); drawingManager.setMap (carte); google.maps.event.addListener (drawingManager, 'markercomplete', fonction (marqueur) { 

6- Après cela, nous effectuons les validations pour limiter le nombre de destinations autorisées et définir les icônes que nous allons utiliser pour nos signets :

 marqueurCount ++; if (markerCount> 10) {alerte ("Plus de destinations autorisées"); drawingManager.setMap (null); marker.setMap (null); revenir; } if (markerCount% 2 === 0) {destinationLatLon.push (marker.getPosition ()); marker.setIcon ('img / comics.png.webp'); } else {originLatLon.push (marker.getPosition ()); marker.setIcon ('img / videogames.png.webp'); }}); 

7- Il ne nous reste plus qu'à créer nos fonctions pour traiter les requêtes faites au service de distanceMatrixService, nous créons d'abord celui qui préparera la propriété request :

 functionMatrixRequest () {distanceMatrixService.getDistanceMatrix ({origines : LatinSource, destinations : LatinDestiny, travelMode : google.maps.TravelMode.DRIVING,}, getMatrixResult); } 

8- Nous créons la fonction pour le rappel et qui nous permettra d'obtenir la réponse du service et dans laquelle nous inclurons les validations nécessaires au cas où le service ne parviendrait pas à gérer au mieux l'erreur :

 function getResultMatrix (résultat, état) {resultMatrix.innerHTML = ''; if (status == google.maps.DistanceMatrixStatus.OK) {var originAddresses = result.originAddresses; var destinationAddresses = result.destinationAddresses; for (var i = 0, l = originAddresses.length; i <l; i ++) {var elements = result.rows [i] .elements; for (var j = 0, m = elements.length; j <m; j ++) {var originAddress = originAddresses [i]; var destinationAddress = destinationAddresses [j]; var élément = éléments [j]; var distance = élément.distance.texte; var durée = élément.duration.texte; resultsDivMatrix (originAddress, destinationAddress, distance, durée, i, j); }}} else {alert ('Impossible d'obtenir le tableau :' + status); } 

9- De plus, nous créons la fonction qui écrira les résultats obtenus dans le div correspondant :

 functionDivMatrixResults (originAddress, destinationAddress, distance, durée, originAddressCount, destinationAddressCount) {var existantContent = resultResult.innerHTML; var nouveauContenu; nouveauContenu = 'Origine '+ countLetters (originAddressCount) +' :
'; newContent + = originAddress + '
'; nouveauContenu + = 'Destination '+ countLetters (destinationAddressCount) +' :
'; nouveauContenu + = adresse de destination + '
'; nouveauContenu + = 'Destin:  '+distance +'
'; nouveauContenu + = 'Destin:  '+ durée +'
'; nouveauContenu + = '
'; resultArray.innerHTML = existantContent + nouveauContenu; } 

9- Enfin dans notre Javascript On manipule les compteurs dans une fonction pour retourner le nom correspondant au compteur du marqueur que l'on place :

 function countLetters (count) {switch (count) {case 0: return 'Comics Store'; cas 1 : retour « Magasin de jeux vidéo »; cas 2 : retour « Comics Store »; cas 3 : retour « Comics Store »; cas 4 : retour « Magasin de jeux vidéo »; par défaut : renvoie null; }} 

10- Nous fermons les balises correspondantes et ajoutons la portion du code HTML pour compléter notre exemple :

Utiliser la matrice de distance

11- Nous exécutons notre exemple dans le navigateur et pour visualiser le fonctionnement de notre carte, nous allons placer 4 points d'intérêt et appuyer sur le bouton Générer une matrice de distance:

AGRANDIR

Comme nous pouvons le voir sur notre image, nous avons quatre points sur notre carte où le matrice de distance permet de calculer la distance et le temps entre chacun d'eux.
Pour terminer ce tutoriel, nous allons implémenter le service Vue sur la rue, C'est un exemple assez simple mais qui ajouté aux autres services disponibles, fera ressortir nos cartes des autres, voyons ce que nous devons faire pour implémenter ce service :
1- Nous incluons l'API et définissons les styles correspondants, dans cet exemple nous n'utiliserons pas la bibliothèque de dessin donc elle ne sera pas incluse :

2- Nous définissons nos variables globales et créons notre fonction initializeMap () Avec les options classiques, centre de notre carte, zoom et type de base, on obtient l'élément SOLEIL et on instancie la méthode Carte:

 carte var; géocodeur var; var streetView; function initializeMap () {popup = new google.maps.InfoWindow (); géocodeur = nouveau google.maps.Geocoder (); google.maps.visualRefresh = vrai; var mapOptions = {centre : nouveau google.maps.LatLng (40.41678, -3.70379), zoom : 10, mapTypeId : google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ("divmap"); map = new google.maps.Map (mapElement, mapOptions); 

3- Au sein de notre fonction, nous appelons le service de Vue sur la rue et après cela, nous créons une fonction pour définir ses options telles que l'emplacement et le point de vue :

 streetView = map.getStreetView (); } fonction setOptionsStreetView (emplacement) {streetView.setPosition (emplacement); streetView.setPov ({titre : 0, démangeaison : 10}); } 

4- Enfin nous créons les fonctions pour pouvoir basculer entre la vue conventionnelle de la carte et la Vue sur la rue, voyons à quoi ressemblent ces éléments :

 fonction showMap () {streetView.setVisible (false); } fonction showStreetView () {setStreetViewOptions (map.getCenter ()); streetView.setVisible (vrai); } 

5- Nous fermons les balises correspondantes et ajoutons la portion du code HTML pour compléter notre exemple :

Carte avec Street View

6- On lance notre exemple dans le navigateur et on appuie sur le bouton Afficher Street View pour visualiser la fonctionnalité comme nous pouvons le voir dans l'image suivante :

AGRANDIR

Si nous voulons revenir à la vue par défaut de notre carte, il suffit d'appuyer sur le bouton Afficher la carte.
Avec cela, nous terminons ce tutoriel, car nous avons pu apprécier les services présents dans le API Javascript de Google Maps Ils nous permettent d'étendre beaucoup plus les fonctionnalités de nos cartes, en les positionnant comme une option à prendre en compte dans les systèmes que nous mettons en œuvre et qui doivent utiliser des calculs de localisation et de temps et/ou de distance.
Je vous rappelle ce tuto, qui vous sera aussi utile : Apprendre l'utilisation des vecteurs dans Google MapsAvez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif