Google Maps - Guide rapide

Que sont Google Maps?

Google Maps est un service de cartographie Web gratuit de Google qui fournit différents types d'informations géographiques. En utilisant Google Maps, on peut.

Recherchez des lieux ou obtenez des itinéraires d'un lieu à un autre.
Visualisez et parcourez des images panoramiques horizontales et verticales au niveau de la rue de diverses villes du monde.
Obtenez des informations spécifiques comme le trafic à un moment donné.

Google Maps fournit une API à l'aide de laquelle vous pouvez personnaliser les cartes et les informations qui y sont affichées. Ce chapitre explique comment charger une simple carte Google Map sur votre page Web en utilisant HTML et JavaScript.

Procédure de chargement de la carte sur une page Web

Suivez les étapes ci-dessous pour charger une carte sur votre page Web -

Étape 1: créer une page HTML

Créez une page HTML de base avec des balises head et body comme indiqué ci-dessous -

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Étape 2: chargez l'API

Chargez ou incluez l'API Google Maps à l'aide de la balise de script comme indiqué ci-dessous -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Étape 3: créer le conteneur

Pour contenir la carte, nous devons créer un élément conteneur, généralement la balise <div> (un conteneur générique) est utilisée à cet effet. Créez un élément conteneur et définissez ses dimensions comme indiqué ci-dessous -

<div id = "sample" style = "width:900px; height:580px;"></div>

Étape 4: Options de la carte

Avant d'initialiser la carte, nous devons créer un mapOptionsobjet (il est créé comme un littéral) et définit les valeurs des variables d'initialisation de la carte. Une carte a trois options principales, à savoir,centre, zoom, et maptypeid.

centre- Sous cette propriété, nous devons spécifier l'emplacement où nous voulons centrer la carte. Pour passer l'emplacement, nous devons créer unLatLng objet en passant la latitude et les longitudes de l'emplacement requis au constructeur.
zoom - Sous cette propriété, nous devons spécifier le niveau de zoom de la carte.
maptypeid- Sous cette propriété, nous devons spécifier le type de carte que nous voulons. Voici les types de cartes fournies par Google -
- ROADMAP (carte 2D normale par défaut)
- SATELLITE (carte photographique)
- HYBRIDE (combinaison de deux ou plusieurs autres types)
- TERRAIN (carte avec montagnes, rivières, etc.)

Dans une fonction, disons, loadMap(), créez l'objet mapOptions et définissez les valeurs requises pour center, zoom et mapTypeId comme indiqué ci-dessous.

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598), 
      zoom:9, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

Étape 5: créer un objet cartographique

Vous pouvez créer une carte en instanciant la classe JavaScript appelée Map. Lors de l'instanciation de cette classe, vous devez passer un conteneur HTML pour contenir la carte et les options de carte pour la carte requise. Créez un objet cartographique comme indiqué ci-dessous.

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

Étape 6: charger la carte

Enfin, chargez la carte en appelant la méthode loadMap () ou en ajoutant un écouteur DOM.

google.maps.event.addDomListener(window, 'load', loadMap);
                    or
<body onload = "loadMap()">

Exemple

L'exemple suivant montre comment charger la feuille de route de la ville nommée Vishakhapatnam avec une valeur de zoom de 12.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436), 
               zoom:12, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produit la sortie suivante -

Dans le chapitre précédent, nous avons expliqué comment charger une carte de base. Ici, nous verrons comment sélectionner un type de carte requis.

Types de cartes

Google Maps propose quatre types de cartes. Ils sont -

ROADMAP- C'est le type par défaut. Si vous n'avez choisi aucun des types, ce sera affiché. Il montre la vue de la rue de la région sélectionnée.
SATELLITE - C'est le type de carte qui montre les images satellite de la région sélectionnée.
HYBRID - Ce type de carte montre les rues principales sur des images satellite.
TERRAIN - C'est le type de carte qui montre le terrain et la végétation

Syntaxe

Pour sélectionner l'un de ces types de carte, vous devez mentionner l'ID de type de carte respectif dans les options de carte comme indiqué ci-dessous -

var mapOptions = {
   mapTypeId:google.maps.MapTypeId.Id of the required map type
};

Feuille de route

L'exemple suivant montre comment sélectionner une carte de type ROADMAP -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:9,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produira la sortie suivante -

Satellite

L'exemple suivant montre comment sélectionner une carte de type SATELLITE -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
                  center:new google.maps.LatLng(17.609993, 83.221436),
                  zoom:9,
                  mapTypeId:google.maps.MapTypeId.SATELLITE
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
		
   </head>
      
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produira la sortie suivante -

Hybride

L'exemple suivant montre comment sélectionner une carte de type HYBRID -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:9,
               mapTypeId:google.maps.MapTypeId.Hybrid
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Il produira la sortie suivante -

Terrain

L'exemple suivant montre comment sélectionner une carte de type TERRAIN -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:9,
               mapTypeId:google.maps.MapTypeId.TERRAIN
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
			
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produira la sortie suivante -

Augmenter / Diminuer la valeur du zoom

Vous pouvez augmenter ou diminuer la valeur de zoom d'une carte en modifiant la valeur de zoom attribut dans les options de la carte.

Syntaxe

Nous pouvons augmenter ou diminuer la valeur de zoom de la carte en utilisant l'option zoom. Vous trouverez ci-dessous la syntaxe pour modifier la valeur de zoom de la carte actuelle.

var mapOptions = {
   zoom:required zoom value
};

Exemple: Zoom 6

Le code suivant affichera la feuille de route de la ville de Vishakhapatnam avec une valeur de zoom de 6.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

Il produira la sortie suivante -

Exemple: Zoom 10

Le code suivant affichera la feuille de route de la ville de Vishakhapatnam avec une valeur de zoom de 10.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:10,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

Il produira la sortie suivante -

Par défaut, les noms de villes et les noms d'options indiqués sur la carte seront en anglais. Si nécessaire, nous pouvons également afficher ces informations dans d'autres langues. Ce processus est connu sous le nom delocalization. Dans ce chapitre, nous allons apprendre à localiser une carte.

Localisation d'une carte

Vous pouvez personnaliser (localiser) la langue de la carte en spécifiant l'option de langue dans l'URL comme indiqué ci-dessous.

<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>

Exemple

Voici un exemple qui montre comment localiser GoogleMaps. Ici vous pouvez voir une feuille de route de la Chine localisée en langue chinoise.

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(32.870360, 101.645508),
               zoom:9, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Production

Il produira la sortie suivante -

Google Maps fournit une interface utilisateur avec divers contrôles pour permettre à l'utilisateur d'interagir avec la carte. Nous pouvons ajouter, personnaliser et désactiver ces contrôles.

Contrôles par défaut

Voici une liste des contrôles par défaut fournis par Google Maps -

Zoom- Pour augmenter et diminuer le niveau de zoom de la carte, nous aurons un curseur avec les boutons + et -, par défaut. Ce curseur sera situé dans le coin du côté gauche de la carte.
Pan - Juste au-dessus du curseur de zoom, il y aura une commande de panoramique pour le panoramique de la carte.
Map Type- Vous pouvez localiser ce contrôle dans le coin supérieur droit de la carte. Il fournit des options de type de carte telles que Satellite, Roadmap et Terrain. Les utilisateurs peuvent choisir l'une de ces cartes.
Street view- Entre l'icône de panoramique et le curseur de zoom, nous avons une icône de pegman. Les utilisateurs peuvent faire glisser cette icône et la placer à un emplacement particulier pour obtenir sa vue de la rue.

Exemple

Voici un exemple où vous pouvez observer les contrôles d'interface utilisateur par défaut fournis par Google Maps -

Désactivation des contrôles par défaut de l'interface utilisateur

Nous pouvons désactiver les contrôles d'interface utilisateur par défaut fournis par Google Maps en faisant simplement le disableDefaultUI valeur true dans les options de la carte.

Exemple

L'exemple suivant montre comment désactiver les contrôles d'interface utilisateur par défaut fournis par Google Maps.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP,
               disableDefaultUI: true
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Il produira la sortie suivante -

Activation / désactivation de tous les contrôles

En plus de ces commandes par défaut, Google Maps fournit également trois autres commandes, comme indiqué ci-dessous.

Scale- La commande Echelle affiche un élément d'échelle de la carte. Ce contrôle n'est pas activé par défaut.
Rotate- Le contrôle Rotation contient une petite icône circulaire qui vous permet de faire pivoter des cartes contenant des images obliques. Ce contrôle apparaît par défaut dans le coin supérieur gauche de la carte. (Voir Imagerie à 45 ° pour plus d'informations.)
Overview- Pour augmenter et diminuer le niveau de zoom de la carte, nous avons un curseur avec les boutons + et -, par défaut. Ce curseur est situé dans le coin gauche de la carte.

Dans les options de la carte, nous pouvons activer et désactiver l'un des contrôles fournis par Google Maps comme indiqué ci-dessous -

{
   panControl: boolean,
   zoomControl: boolean,
   mapTypeControl: boolean,
   scaleControl: boolean,
   streetViewControl: boolean,
   overviewMapControl: boolean
}

Exemple

Le code suivant montre comment activer tous les contrôles -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               panControl: true,
               zoomControl: true,
               scaleControl: true,
               mapTypeControl:true,
               streetViewControl:true,
               overviewMapControl:true,
               rotateControl:true
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

Il produira la sortie suivante -

Options de contrôle

Nous pouvons modifier l'apparence des contrôles Google Maps à l'aide de ses options de contrôle. Par exemple, la commande de zoom peut être réduite ou agrandie. L'apparence du contrôle MapType peut être modifiée en une barre horizontale ou un menu déroulant. Vous trouverez ci-dessous une liste d'options de contrôle pour les contrôles Zoom et MapType.

N ° Sr.	Nom du contrôle	Options de contrôle
1	Contrôle du zoom	google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT
2	Contrôle MapType	google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT

Exemple

L'exemple suivant montre comment utiliser les options de contrôle -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produit la sortie suivante -

Positionnement des commandes

Vous pouvez modifier la position des contrôles en ajoutant la ligne suivante dans les options de contrôle.

position:google.maps.ControlPosition.Desired_Position,

Voici la liste des positions disponibles où un contrôle peut être placé sur une carte -

TOP_CENTER
TOP_LEFT
TOP_RIGHT
LEFT_TOP
RIGHT_TOP
LEFT_CENTER
RIGHT_CENTER
LEFT_BOTTOM
RIGHT_BOTTOM
BOTTOM_CENTER
BOTTOM_LEFT
BOTTOM_RIGHT

Exemple

L'exemple suivant montre comment placer le contrôle MapTypeid en haut au centre de la carte et comment placer le contrôle de zoom en bas au centre de la carte.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:5,
               mapTypeControl: true,
               
               mapTypeControlOptions: {
                  style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                  position:google.maps.ControlPosition.TOP_CENTER,
                  
                  mapTypeIds: [
                     google.maps.MapTypeId.ROADMAP,
                     google.maps.MapTypeId.TERRAIN
                  ]
               },
					
               zoomControl: true,
               
               zoomControlOptions: {
                  style: google.maps.ZoomControlStyle.SMALL,
                  position:google.maps.ControlPosition.BOTTOM_CENTER
               }
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produit la sortie suivante -

Nous pouvons dessiner des objets sur la carte et les lier à une latitude et une longitude souhaitées. Ceux-ci sont appelés superpositions. Google Maps propose différentes superpositions comme indiqué ci-dessous.

Markers
Polylines
Polygons
Cercle et rectangle
Fenêtre d'informations
Symbols

Pour marquer un seul emplacement sur la carte, Google Maps fournit markers. Ces marqueurs utilisent un symbole standard et ces symboles peuvent être personnalisés. Ce chapitre explique comment ajouter des marqueurs et comment les personnaliser, les animer et les supprimer.

Ajout d'un marqueur simple

Vous pouvez ajouter un marqueur simple à la carte à un emplacement souhaité en instanciant la classe de marqueurs et en spécifiant la position à marquer à l'aide de latlng, comme indiqué ci-dessous.

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(19.373341, 78.662109),
   map: map,
});

Exemple

Le code suivant fixe le marqueur sur la ville Hyderabad (Inde).

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(19.373341, 78.662109),
               zoom:7
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.088291, 78.442383),
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produit la sortie suivante -

Animation du marqueur

Après avoir ajouté un marqueur à la carte, vous pouvez aller plus loin et y ajouter des animations telles que bounce et drop. L'extrait de code suivant montre comment ajouter des animations de rebond et déposer des animations à un marqueur.

//To make the marker bounce`
animation:google.maps.Animation.BOUNCE 

//To make the marker drop
animation:google.maps.Animation.Drop

Exemple

Le code suivant définit le marqueur sur la ville d'Hyderabad avec un effet d'animation supplémentaire -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.377631, 78.478603),
               zoom:5
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
         }
      </script>

   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produit la sortie suivante -

Personnalisation du marqueur

Vous pouvez utiliser vos propres icônes au lieu de l'icône par défaut fournie par Google Maps. Définissez simplement l'icône commeicon:'ICON PATH'. Et vous pouvez rendre cette icône déplaçable en définissantdraggable:true.

Exemple

L'exemple suivant montre comment personnaliser le marqueur en une icône souhaitée -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
				
            marker.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produit la sortie suivante -

Suppression du marqueur

Vous pouvez supprimer un marqueur existant en définissant le marqueur sur null à l'aide de la marker.setMap() méthode.

Exemple

L'exemple suivant montre comment supprimer le marqueur d'une carte -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
				
            marker.setMap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produit la sortie suivante -

Dans le chapitre précédent, nous avons appris à utiliser les marqueurs dans Google Maps. En plus des marqueurs, nous pouvons également ajouter diverses formes telles que des cercles, des polygones, des rectangles, des polylignes, etc. Ce chapitre explique comment utiliser les formes fournies par Google Maps.

Polylignes

Les polylignes, fournies par Google Maps, sont utiles pour suivre différents chemins. Vous pouvez ajouter des polylignes à une carte en instanciant la classegoogle.maps.Polyline. Lors de l'instanciation de cette classe, nous devons spécifier les valeurs requises des propriétés d'une polyligne telles que StrokeColor, StokeOpacity et strokeWeight.

On peut ajouter une polyligne à une carte en passant son objet à la méthode setMap(MapObject). Nous pouvons supprimer la polyligne en passant une valeur nulle à la méthode SetMap ().

Exemple

L'exemple suivant montre une polyligne mettant en évidence le chemin entre les villes de Delhi, Londres, New York et Pékin.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(51.508742,-0.120850),
               zoom:3,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var tourplan = new google.maps.Polyline({
               path:[
                  new google.maps.LatLng(28.613939, 77.209021),
                  new google.maps.LatLng(51.507351, -0.127758),
                  new google.maps.LatLng(40.712784, -74.005941),
                  new google.maps.LatLng(28.213545, 94.868713) 
               ],
               
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2
            });
            
            tourplan.setMap(map);
            //to remove plylines
            //tourplan.setmap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produira la sortie suivante -

Polygones

Les polygones sont utilisés pour mettre en évidence une zone géographique particulière d'un état ou d'un pays. Vous pouvez créer un polygone souhaité en instanciant la classegoogle.maps.Polygon. Lors de l'instanciation, nous devons spécifier les valeurs souhaitées pour les propriétés de Polygon telles que path, strokeColor, strokeOapacity, fillColor, fillOapacity, etc.

Exemple

L'exemple suivant montre comment dessiner un polygone pour mettre en évidence les villes Hyderabad, Nagpur et Aurangabad.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:4,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myTrip = [
               new google.maps.LatLng(17.385044, 78.486671),
               new google.maps.LatLng(19.696888, 75.322451), 
               new google.maps.LatLng(21.056296, 79.057803), 
               new google.maps.LatLng(17.385044, 78.486671)
            ];
            
            var flightPath = new google.maps.Polygon({
               path:myTrip,
               strokeColor:"#0000FF",
               strokeOpacity:0.8,
               strokeWeight:2,
               fillColor:"#0000FF",
               fillOpacity:0.4
            });
            
            flightPath.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produira la sortie suivante -

Rectangles

Nous pouvons utiliser des rectangles pour mettre en évidence la zone géographique d'une région ou d'un état particulier à l'aide d'une boîte rectangulaire. On peut avoir un rectangle sur une carte en instanciant la classegoogle.maps.Rectangle. Lors de l'instanciation, nous devons spécifier les valeurs souhaitées pour les propriétés du rectangle telles que path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, bounds, etc.

Exemple

L'exemple suivant montre comment mettre en évidence une zone particulière sur une carte à l'aide d'un rectangle -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myrectangle = new google.maps.Rectangle({
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2,
               
               fillColor:"#0000FF",
               fillOpacity:0.4,
               map:map,
               
               bounds:new google.maps.LatLngBounds(
                  new google.maps.LatLng(17.342761, 78.552432),
                  new google.maps.LatLng(16.396553, 80.727725)
               )
					
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
</html>

Cela vous donne la sortie suivante -

Cercles

Tout comme les rectangles, nous pouvons utiliser des cercles pour mettre en évidence la zone géographique d'une région particulière ou d'un état à l'aide d'un cercle en instanciant la classe google.maps.Circle. Lors de l'instanciation, nous devons spécifier les valeurs souhaitées pour les propriétés du cercle telles que path, strokeColor, strokeOapacity, fillColor, fillOapacity, strokeWeight, radius, etc.

Exemple

L'exemple suivant montre comment mettre en évidence la zone autour de New Delhi à l'aide d'un cercle -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(28.613939,77.209021),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
         
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
         
            var myCity = new google.maps.Circle({
               center:new google.maps.LatLng(28.613939,77.209021),
               radius:150600,
            
               strokeColor:"#B40404",
               strokeOpacity:0.6,
               strokeWeight:2,
            
               fillColor:"#B40404",
               fillOpacity:0.6
            });
				
            myCity.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produira la sortie suivante -

En plus des marqueurs, des polygones, des polylignes et d'autres formes géométriques, nous pouvons également dessiner une fenêtre d'informations sur la carte. Ce chapitre explique comment utiliser la fenêtre d'informations.

Ajouter une fenêtre

La fenêtre d'informations est utilisée pour ajouter tout type d'informations à la carte. Par exemple, si vous souhaitez fournir des informations sur un emplacement sur la carte, vous pouvez utiliser une fenêtre d'informations. Habituellement, la fenêtre d'informations est attachée à un marqueur. Vous pouvez joindre une fenêtre d'informations en instanciant legoogle.maps.InfoWindowclasse. Il a les propriétés suivantes -

Content - Vous pouvez transmettre votre contenu au format String en utilisant cette option.
position - Vous pouvez choisir la position de la fenêtre d'informations en utilisant cette option.
maxWidth- Par défaut, la largeur de la fenêtre d'information sera étirée jusqu'à ce que le texte soit enveloppé. En spécifiant maxWidth, nous pouvons restreindre la taille de la fenêtre d'informations horizontalement.

Exemple

L'exemple suivant montre comment définir le marqueur et spécifier une fenêtre d'informations au-dessus -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.433053, 78.412172),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033"
            });
				
            infowindow.open(map,marker);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produira la sortie suivante -

En plus des marqueurs, des polygones, des polylignes et d'autres formes géométriques, nous pouvons également ajouter des images vectorielles prédéfinies (symboles) sur une carte. Ce chapitre explique comment utiliser les symboles fournis par Google Maps.

Ajout d'un symbole

Google fournit diverses images vectorielles (symboles) qui peuvent être utilisées sur un marqueur ou une polyligne. Tout comme les autres superpositions, pour dessiner ces symboles prédéfinis sur une carte, nous devons instancier leurs classes respectives. Vous trouverez ci-dessous une liste de symboles prédéfinis fournis par Google et leurs noms de classe -

Circle - google.maps.SymbolPath.CIRCLE
Backward Pointing arrow (closed) - google.maps.SymbolPath.BACKWARD_CLOSED_ARROW
Forward Pointing arrow (closed) - google.maps.SymbolPath.FORWARD_CLOSED_ARROW
Forward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE
Backward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE

Ces symboles ont les propriétés suivantes: path, fillColor, fillOpacity, scale, stokeColor, strokeOpacity et strokeWeight.

Exemple

L'exemple suivant montre comment dessiner des symboles prédéfinis sur Google Map.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
					
               draggable:true,
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produit la sortie suivante -

Animation du symbole

Tout comme les marqueurs, vous pouvez également ajouter des animations telles que rebondir et déposer aux symboles.

Exemple

L'exemple suivant montre comment utiliser un symbole comme marqueur sur une carte et y ajouter une animation -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
               
               animation:google.maps.Animation.DROP,
               draggable:true,
               map: map
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produit la sortie suivante -

Le programme JavaScript de Google Maps peut répondre à divers événements générés par l'utilisateur. Ce chapitre fournit des exemples illustrant comment effectuer la gestion des événements tout en travaillant avec Google Maps.

Ajout d'un écouteur d'événements

Vous pouvez ajouter un écouteur d'événements à l'aide de la méthode addListener(). Il accepte des paramètres tels que le nom de l'objet sur lequel nous voulons ajouter l'écouteur, le nom de l'événement et l'événement du gestionnaire.

Exemple

L'exemple suivant montre comment ajouter un écouteur d'événement à un objet marqueur. Le programme augmente la valeur de zoom de la carte de 5 à chaque fois que nous double-cliquons sur le marqueur.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center: myCenter,
               zoom:5,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position: myCenter,
               title:'Click to zoom'
            });
            
            marker.setMap(map);
            
            //Zoom to 7 when clicked on marker
            google.maps.event.addListener(marker,'click',function() {
               map.setZoom(9);
               map.setCenter(marker.getPosition());
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produit la sortie suivante -

Ouverture d'une fenêtre d'informations au clic

Le code suivant ouvre une fenêtre d'informations en cliquant sur le marqueur -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produit la sortie suivante -

Suppression de l'auditeur

Vous pouvez supprimer un écouteur existant à l'aide de la méthode removeListener(). Cette méthode accepte l'objet écouteur, nous devons donc affecter l'écouteur à une variable et la passer à cette méthode.

Exemple

Le code suivant montre comment supprimer un écouteur -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            var myListener = google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
				
            google.maps.event.removeListener(myListener);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Il produit la sortie suivante -

Next page ↱

Google Maps - Guide rapide

Que sont Google Maps?

Procédure de chargement de la carte sur une page Web

Étape 1: créer une page HTML

Étape 2: chargez l'API

Étape 3: créer le conteneur

Étape 4: Options de la carte

Étape 5: créer un objet cartographique

Étape 6: charger la carte

Exemple

Types de cartes

Syntaxe

Feuille de route

Satellite

Hybride

Terrain

Augmenter / Diminuer la valeur du zoom

Syntaxe

Exemple: Zoom 6

Exemple: Zoom 10

Localisation d'une carte

Exemple

Production

Contrôles par défaut

Exemple

Désactivation des contrôles par défaut de l'interface utilisateur

Exemple

Activation / désactivation de tous les contrôles

Exemple

Options de contrôle

Exemple

Positionnement des commandes

Exemple

Ajout d'un marqueur simple

Exemple

Animation du marqueur

Exemple

Personnalisation du marqueur

Exemple

Suppression du marqueur

Exemple

Polylignes

Exemple

Polygones

Exemple

Rectangles

Exemple

Cercles

Exemple

Ajouter une fenêtre

Exemple

Ajout d'un symbole

Exemple

Animation du symbole

Exemple

Ajout d'un écouteur d'événements

Exemple

Ouverture d'une fenêtre d'informations au clic

Suppression de l'auditeur

Exemple

Ressources Google Maps

Tutoriel Google Maps