Google Maps - Types

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 -