Google Maps - Contrôles de l'interface utilisateur

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 -