Google Maps - Typen

Im vorherigen Kapitel haben wir das Laden einer Basiskarte erläutert. Hier sehen wir, wie Sie einen gewünschten Kartentyp auswählen.

Arten von Karten

Google Maps bietet vier Arten von Karten. Sie sind -

ROADMAP- Dies ist der Standardtyp. Wenn Sie keinen der Typen ausgewählt haben, wird dieser angezeigt. Es zeigt die Straßenansicht der ausgewählten Region.
SATELLITE - Dies ist der Kartentyp, der die Satellitenbilder der ausgewählten Region anzeigt.
HYBRID - Dieser Kartentyp zeigt die Hauptstraßen auf Satellitenbildern.
TERRAIN - Dies ist der Kartentyp, der das Gelände und die Vegetation anzeigt

Syntax

Um einen dieser Kartentypen auszuwählen, müssen Sie die entsprechende Kartentyp-ID in den Kartenoptionen wie unten gezeigt angeben.

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

Roadmap

Das folgende Beispiel zeigt, wie Sie eine Karte vom Typ ROADMAP auswählen -

<!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>

Es wird die folgende Ausgabe erzeugt -

Satellit

Das folgende Beispiel zeigt, wie Sie eine Karte vom Typ SATELLITE auswählen -

<!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>

Es wird die folgende Ausgabe erzeugt -

Hybrid

Das folgende Beispiel zeigt, wie Sie eine Karte vom Typ HYBRID auswählen -

<!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>

Es wird die folgende Ausgabe erzeugt -

Terrain

Das folgende Beispiel zeigt, wie Sie eine Karte vom Typ TERRAIN auswählen -

<!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>

Es wird die folgende Ausgabe erzeugt -