Mapy Google - sterowanie interfejsem użytkownika

Mapy Google zapewniają interfejs użytkownika z różnymi elementami sterującymi, aby umożliwić użytkownikowi interakcję z mapą. Możemy dodawać, dostosowywać i wyłączać te kontrolki.

Sterowanie domyślne

Oto lista domyślnych elementów sterujących udostępnianych przez Mapy Google -

Zoom- Aby zwiększyć i zmniejszyć poziom powiększenia mapy, domyślnie będziemy mieli suwak z przyciskami + i -. Ten suwak będzie znajdował się w rogu lewej strony mapy.
Pan - Tuż nad suwakiem powiększenia znajduje się element sterujący przesuwaniem mapy.
Map Type- Możesz zlokalizować tę kontrolkę w prawym górnym rogu mapy. Zapewnia opcje typu mapy, takie jak satelita, mapa drogowa i teren. Użytkownicy mogą wybrać dowolną z tych map.
Street view- Pomiędzy ikoną panoramy a suwakiem powiększenia znajduje się ikona Pegmana. Użytkownicy mogą przeciągnąć tę ikonę i umieścić ją w określonej lokalizacji, aby uzyskać widok ulicy.

Przykład

Oto przykład, w którym możesz obserwować domyślne elementy sterujące interfejsu użytkownika udostępniane przez Mapy Google -

Wyłączanie domyślnych formantów interfejsu użytkownika

Możemy wyłączyć domyślne elementy sterujące interfejsu użytkownika zapewniane przez Mapy Google, po prostu tworząc rozszerzenie disableDefaultUI wartość true w opcjach mapy.

Przykład

Poniższy przykład pokazuje, jak wyłączyć domyślne elementy sterujące interfejsu użytkownika udostępniane przez Mapy Google.

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

Wytworzy następujący wynik -

Włączanie / wyłączanie wszystkich elementów sterujących

Oprócz tych domyślnych elementów sterujących, Mapy Google zapewniają również trzy dodatkowe elementy sterujące wymienione poniżej.

Scale- Kontrolka Skala wyświetla element skali mapy. Ta kontrolka nie jest domyślnie włączona.
Rotate- Element sterujący Obróć zawiera małą okrągłą ikonę, która umożliwia obracanie map zawierających ukośne obrazy. Ta kontrolka pojawia się domyślnie w lewym górnym rogu mapy. (Aby uzyskać więcej informacji, patrz Obrazy 45 °).
Overview- Aby zwiększyć i zmniejszyć poziom powiększenia mapy, mamy domyślnie suwak z przyciskami + i -. Ten suwak znajduje się w lewym rogu mapy.

W opcjach mapy możemy włączać i wyłączać dowolne elementy sterujące zapewniane przez Mapy Google, jak pokazano poniżej -

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

Przykład

Poniższy kod pokazuje, jak włączyć wszystkie kontrolki -

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

Wytworzy następujący wynik -

Opcje sterowania

Możemy zmienić wygląd elementów sterujących Google Maps za pomocą opcji sterowania. Na przykład, element sterujący zoomem można zmniejszyć lub powiększyć. Wygląd kontrolki MapType można zmienić na poziomy pasek lub menu rozwijane. Poniżej znajduje się lista opcji sterowania dla kontrolek Zoom i MapType.

Sr.No.	Nazwa kontrolna	Opcje sterowania
1	Kontrola powiększenia	google.maps.ZoomControlStyle.SMALL google.maps.ZoomControlStyle.LARGE google.maps.ZoomControlStyle.DEFAULT
2	Kontrolka MapType	google.maps.MapTypeControlStyle.HORIZONTAL_BAR google.maps.MapTypeControlStyle.DROPDOWN_MENU google.maps.MapTypeControlStyle.DEFAULT

Przykład

Poniższy przykład demonstruje, jak używać opcji sterowania -

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

Generuje następujący wynik -

Pozycjonowanie sterowania

Możesz zmienić położenie formantów, dodając następujący wiersz w opcjach sterowania.

position:google.maps.ControlPosition.Desired_Position,

Oto lista dostępnych pozycji, na których można umieścić kontrolkę na mapie -

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

Przykład

Poniższy przykład pokazuje, jak umieścić kontrolkę MapTypeid w górnej środkowej części mapy i jak umieścić kontrolkę powiększenia w dolnej środkowej części mapy.

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

Generuje następujący wynik -