Google Maps - Steuerelemente der Benutzeroberfläche

Google Maps bietet eine Benutzeroberfläche mit verschiedenen Steuerelementen, mit denen der Benutzer mit der Karte interagieren kann. Wir können diese Steuerelemente hinzufügen, anpassen und deaktivieren.

Standardsteuerelemente

Hier ist eine Liste der von Google Maps bereitgestellten Standardsteuerelemente:

Zoom- Um die Zoomstufe der Karte zu erhöhen und zu verringern, haben wir standardmäßig einen Schieberegler mit den Schaltflächen + und -. Dieser Schieberegler befindet sich in der Ecke auf der linken Seite der Karte.
Pan - Direkt über dem Zoomregler befindet sich eine Schwenksteuerung zum Schwenken der Karte.
Map Type- Sie finden dieses Steuerelement in der oberen rechten Ecke der Karte. Es bietet Kartentypoptionen wie Satellit, Roadmap und Gelände. Benutzer können jede dieser Karten auswählen.
Street view- Zwischen dem Schwenksymbol und dem Zoomregler befindet sich ein Pegman-Symbol. Benutzer können dieses Symbol ziehen und an einer bestimmten Stelle platzieren, um die Straßenansicht zu erhalten.

Beispiel

Hier ist ein Beispiel, in dem Sie die von Google Maps bereitgestellten Standard-UI-Steuerelemente beobachten können:

Deaktivieren der UI-Standardsteuerelemente

Wir können die von Google Maps bereitgestellten Standard-UI-Steuerelemente einfach deaktivieren, indem Sie die Option ausführen disableDefaultUI Wert true in den Kartenoptionen.

Beispiel

Das folgende Beispiel zeigt, wie Sie die von Google Maps bereitgestellten Standard-UI-Steuerelemente deaktivieren.

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

Es wird die folgende Ausgabe erzeugt -

Aktivieren / Deaktivieren aller Steuerelemente

Zusätzlich zu diesen Standardsteuerelementen bietet Google Maps drei weitere Steuerelemente, wie unten aufgeführt.

Scale- Das Skalierungssteuerelement zeigt ein Kartenskalierungselement an. Dieses Steuerelement ist standardmäßig nicht aktiviert.
Rotate- Das Steuerelement "Drehen" enthält ein kleines kreisförmiges Symbol, mit dem Sie Karten mit schrägen Bildern drehen können. Dieses Steuerelement wird standardmäßig in der oberen linken Ecke der Karte angezeigt. (Weitere Informationen finden Sie unter 45 ° -Bilder.)
Overview- Um die Zoomstufe der Karte zu erhöhen und zu verringern, haben wir standardmäßig einen Schieberegler mit den Schaltflächen + und -. Dieser Schieberegler befindet sich in der linken Ecke der Karte.

In den Kartenoptionen können wir alle von Google Maps bereitgestellten Steuerelemente wie unten gezeigt aktivieren und deaktivieren.

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

Beispiel

Der folgende Code zeigt, wie Sie alle Steuerelemente aktivieren -

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

Es wird die folgende Ausgabe erzeugt -

Steuerungsoptionen

Wir können das Erscheinungsbild von Google Maps-Steuerelementen mithilfe der Steuerelementoptionen ändern. Beispielsweise kann die Zoomsteuerung entweder verkleinert oder vergrößert werden. Das Erscheinungsbild des MapType-Steuerelements kann in eine horizontale Leiste oder ein Dropdown-Menü geändert werden. Im Folgenden finden Sie eine Liste der Steuerungsoptionen für Zoom- und MapType-Steuerelemente.

Sr.Nr.	Kontrollname	Steuerungsoptionen
1	Zoomsteuerung	google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT
2	MapType-Steuerelement	google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT

Beispiel

Das folgende Beispiel zeigt, wie die Steuerungsoptionen verwendet werden -

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

Es erzeugt die folgende Ausgabe -

Positionierung steuern

Sie können die Position der Steuerelemente ändern, indem Sie den Steuerelementoptionen die folgende Zeile hinzufügen.

position:google.maps.ControlPosition.Desired_Position,

Hier ist die Liste der verfügbaren Positionen, an denen ein Steuerelement auf einer Karte platziert werden kann -

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

Beispiel

Das folgende Beispiel zeigt, wie Sie das MapTypeid-Steuerelement in der oberen Mitte der Karte und das Zoom-Steuerelement in der unteren Mitte der Karte platzieren.

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

Es erzeugt die folgende Ausgabe -