Google Maps - Kurzanleitung

Was sind Google Maps?

Google Maps ist ein kostenloser Webkartendienst von Google, der verschiedene Arten von geografischen Informationen bereitstellt. Mit Google Maps kann man.

  • Suchen Sie nach Orten oder erhalten Sie Wegbeschreibungen von einem Ort zum anderen.

  • Anzeigen und Navigieren durch horizontale und vertikale Panoramabilder auf Straßenebene verschiedener Städte auf der ganzen Welt.

  • Erhalten Sie spezifische Informationen wie Verkehr an einem bestimmten Punkt.

Google Maps bietet eine API, mit der Sie die Karten und die darauf angezeigten Informationen anpassen können. In diesem Kapitel wird erläutert, wie Sie mit HTML und JavaScript eine einfache Google Map auf Ihre Webseite laden.

Schritte zum Laden der Karte auf einer Webseite

Führen Sie die folgenden Schritte aus, um eine Karte auf Ihre Webseite zu laden.

Schritt 1: Erstellen Sie eine HTML-Seite

Erstellen Sie eine einfache HTML-Seite mit Kopf- und Körper-Tags wie unten gezeigt -

<!DOCTYPE html>
<html>
   
   <head>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Schritt 2: Laden Sie die API

Laden oder fügen Sie die Google Maps-API mithilfe des unten gezeigten Skript-Tags ein.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
   </head>
   
   <body>
   ..............
   </body>
   
</html>

Schritt 3: Erstellen Sie den Container

Um die Karte zu halten, müssen wir ein Containerelement erstellen. In der Regel wird zu diesem Zweck das <div> -Tag (ein generischer Container) verwendet. Erstellen Sie ein Containerelement und definieren Sie seine Abmessungen wie unten gezeigt -

<div id = "sample" style = "width:900px; height:580px;"></div>

Schritt 4: Kartenoptionen

Vor dem Initialisieren der Karte müssen wir eine erstellen mapOptionsObjekt (es wird wie ein Literal erstellt) und Werte für Karteninitialisierungsvariablen festlegen. Eine Karte hat drei Hauptoptionen, nämlichcentre, zoom, und maptypeid.

  • centre- Unter dieser Eigenschaft müssen wir den Ort angeben, an dem wir die Karte zentrieren möchten. Um den Ort zu übergeben, müssen wir eine erstellenLatLng Objekt durch Übergabe der Breiten- und Längengrade des gewünschten Standorts an den Konstruktor.

  • zoom - Unter dieser Eigenschaft müssen wir die Zoomstufe der Karte angeben.

  • maptypeid- Unter dieser Eigenschaft müssen wir den Typ der gewünschten Karte angeben. Im Folgenden sind die von Google bereitgestellten Kartentypen aufgeführt:

    • ROADMAP (normale, standardmäßige 2D-Karte)
    • SATELLIT (Fotokarte)
    • HYBRID (Kombination von zwei oder mehr anderen Typen)
    • TERRAIN (Karte mit Bergen, Flüssen usw.)

Innerhalb einer Funktion sagen wir, loadMap()Erstellen Sie das mapOptions-Objekt und legen Sie die erforderlichen Werte für center, zoom und mapTypeId wie unten gezeigt fest.

function loadMap() {
   var mapOptions = {
      center:new google.maps.LatLng(17.240498, 82.287598), 
      zoom:9, 
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
}

Schritt 5: Erstellen Sie ein Kartenobjekt

Sie können eine Karte erstellen, indem Sie die aufgerufene JavaScript-Klasse instanziieren Map. Während Sie diese Klasse instanziieren, müssen Sie einen HTML-Container übergeben, der die Karte und die Kartenoptionen für die erforderliche Karte enthält. Erstellen Sie ein Kartenobjekt wie unten gezeigt.

var map = new google.maps.Map(document.getElementById("sample"),mapOptions);

Schritt 6: Laden Sie die Karte

Laden Sie abschließend die Map, indem Sie die loadMap () -Methode aufrufen oder den DOM-Listener hinzufügen.

google.maps.event.addDomListener(window, 'load', loadMap);
                    or
<body onload = "loadMap()">

Beispiel

Das folgende Beispiel zeigt, wie die Roadmap der Stadt Vishakhapatnam mit einem Zoomwert von 12 geladen wird.

<!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:12, 
               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 erzeugt die folgende Ausgabe -

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 -

Erhöhen / Verringern Sie den Zoomwert

Sie können den Zoomwert einer Karte erhöhen oder verringern, indem Sie den Wert von ändern zoom Attribut in den Kartenoptionen.

Syntax

Mit der Zoomoption können wir den Zoomwert der Karte erhöhen oder verringern. Im Folgenden finden Sie die Syntax zum Ändern des Zoomwerts der aktuellen Karte.

var mapOptions = {
   zoom:required zoom value
};

Beispiel: Zoom 6

Der folgende Code zeigt die Roadmap der Stadt Vishakhapatnam mit einem Zoomwert von 6 an.

<!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:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

Es wird die folgende Ausgabe erzeugt -

Beispiel: Zoom 10

Der folgende Code zeigt die Roadmap der Stadt Vishakhapatnam mit einem Zoomwert von 10 an.

<!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:10,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:587px; height:400px;"></div>
   </body>
   
</html>

Es wird die folgende Ausgabe erzeugt -

Standardmäßig sind die auf der Karte angegebenen Städtenamen und Optionsnamen in englischer Sprache. Bei Bedarf können wir solche Informationen auch in anderen Sprachen anzeigen. Dieser Vorgang ist bekannt alslocalization. In diesem Kapitel erfahren Sie, wie Sie eine Karte lokalisieren.

Lokalisieren einer Karte

Sie können die Sprache der Karte anpassen (lokalisieren), indem Sie die Sprachoption in der URL wie unten gezeigt angeben.

<script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>

Beispiel

Hier ist ein Beispiel, das zeigt, wie GoogleMaps lokalisiert wird. Hier sehen Sie eine Roadmap von China, die in der chinesischen Sprache lokalisiert ist.

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js?language=zh-Hans"></script>
      
      <script>
         function loadMap() {
			
            var mapOptions = {
               center:new google.maps.LatLng(32.870360, 101.645508),
               zoom:9, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
				
            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>

Ausgabe

Es wird die folgende Ausgabe erzeugt -

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

In diesem Beispiel können Sie die von Google Maps bereitgestellten Standard-Steuerelemente für die Benutzeroberfläche beachten.

Deaktivieren der UI-Standardsteuerelemente

Wir können die von Google Maps bereitgestellten Standard-UI-Steuerelemente einfach deaktivieren, indem wir die Option festlegen 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 -

Wir können Objekte auf die Karte zeichnen und sie an einen gewünschten Breiten- und Längengrad binden. Diese werden als Overlays bezeichnet. Google Maps bietet verschiedene Überlagerungen, wie unten gezeigt.

  • Markers
  • Polylines
  • Polygons
  • Kreis und Rechteck
  • Infofenster
  • Symbols

Um einen einzelnen Ort auf der Karte zu markieren, bietet Google Maps markers. Diese Markierungen verwenden ein Standardsymbol und diese Symbole können angepasst werden. In diesem Kapitel wird erläutert, wie Sie Markierungen hinzufügen und anpassen, animieren und entfernen.

Hinzufügen eines einfachen Markers

Sie können der Karte an einer gewünschten Stelle eine einfache Markierung hinzufügen, indem Sie die Markierungsklasse instanziieren und die zu markierende Position mit latlng angeben, wie unten gezeigt.

var marker = new google.maps.Marker({
   position: new google.maps.LatLng(19.373341, 78.662109),
   map: map,
});

Beispiel

Der folgende Code setzt die Markierung auf der Stadt Hyderabad (Indien).

<!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:7
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.088291, 78.442383),
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Es erzeugt die folgende Ausgabe -

Den Marker animieren

Nachdem Sie der Karte einen Marker hinzugefügt haben, können Sie weiter gehen und Animationen hinzufügen, z bounce und drop. Das folgende Codefragment zeigt, wie Sie einem Marker Bounce- und Drop-Animationen hinzufügen.

//To make the marker bounce`
animation:google.maps.Animation.BOUNCE 

//To make the marker drop
animation:google.maps.Animation.Drop

Beispiel

Der folgende Code setzt die Markierung auf der Stadt Hyderabad mit einem zusätzlichen Animationseffekt -

<!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.377631, 78.478603),
               zoom:5
            }
				
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
         }
      </script>

   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Es erzeugt die folgende Ausgabe -

Anpassen des Markers

Sie können anstelle des von Google Maps bereitgestellten Standardsymbols Ihre eigenen Symbole verwenden. Stellen Sie einfach das Symbol als einicon:'ICON PATH'. Und Sie können dieses Symbol durch Einstellen ziehbar machendraggable:true.

Beispiel

Das folgende Beispiel zeigt, wie Sie die Markierung an ein gewünschtes Symbol anpassen -

<!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.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
				
            marker.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Es erzeugt die folgende Ausgabe -

Markierung entfernen

Sie können einen vorhandenen Marker entfernen, indem Sie den Marker mithilfe von auf Null setzen marker.setMap() Methode.

Beispiel

Das folgende Beispiel zeigt, wie Sie den Marker von einer Karte entfernen -

<!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.377631, 78.478603),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.377631, 78.478603),
               map: map,
               animation:google.maps.Animation.Drop
            });
				
            marker.setMap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Es erzeugt die folgende Ausgabe -

Im vorherigen Kapitel haben wir gelernt, wie Markierungen in Google Maps verwendet werden. Neben Markierungen können wir auch verschiedene Formen wie Kreise, Polygone, Rechtecke, Polylinien usw. hinzufügen. In diesem Kapitel wird die Verwendung der von Google Maps bereitgestellten Formen erläutert.

Polylinien

Von Google Maps bereitgestellte Polylinien sind nützlich, um verschiedene Pfade zu verfolgen. Sie können einer Karte Polylinien hinzufügen, indem Sie die Klasse instanziierengoogle.maps.Polyline. Beim Instanziieren dieser Klasse müssen die erforderlichen Werte der Eigenschaften einer Polylinie wie StrokeColor, StokeOpacity und StrokeWeight angegeben werden.

Wir können einer Karte eine Polylinie hinzufügen, indem wir ihr Objekt an die Methode übergeben setMap(MapObject). Wir können die Polylinie löschen, indem wir einen Nullwert an die SetMap () -Methode übergeben.

Beispiel

Das folgende Beispiel zeigt eine Polylinie, die den Pfad zwischen den Städten Delhi, London, New York und Peking hervorhebt.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(51.508742,-0.120850),
               zoom:3,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var tourplan = new google.maps.Polyline({
               path:[
                  new google.maps.LatLng(28.613939, 77.209021),
                  new google.maps.LatLng(51.507351, -0.127758),
                  new google.maps.LatLng(40.712784, -74.005941),
                  new google.maps.LatLng(28.213545, 94.868713) 
               ],
               
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2
            });
            
            tourplan.setMap(map);
            //to remove plylines
            //tourplan.setmap(null);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Es wird die folgende Ausgabe erzeugt -

Polygone

Polygone werden verwendet, um ein bestimmtes geografisches Gebiet eines Staates oder Landes hervorzuheben. Sie können ein gewünschtes Polygon erstellen, indem Sie die Klasse instanziierengoogle.maps.Polygon. Während der Instanziierung müssen wir die gewünschten Werte für die Eigenschaften von Polygon angeben, z. B. Pfad, Strichfarbe, Strichkapazität, Füllfarbe, Füllkapazität usw.

Beispiel

Das folgende Beispiel zeigt, wie Sie ein Polygon zeichnen, um die Städte Hyderabad, Nagpur und Aurangabad hervorzuheben.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:4,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myTrip = [
               new google.maps.LatLng(17.385044, 78.486671),
               new google.maps.LatLng(19.696888, 75.322451), 
               new google.maps.LatLng(21.056296, 79.057803), 
               new google.maps.LatLng(17.385044, 78.486671)
            ];
            
            var flightPath = new google.maps.Polygon({
               path:myTrip,
               strokeColor:"#0000FF",
               strokeOpacity:0.8,
               strokeWeight:2,
               fillColor:"#0000FF",
               fillOpacity:0.4
            });
            
            flightPath.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Es wird die folgende Ausgabe erzeugt -

Rechtecke

Wir können Rechtecke verwenden, um das geografische Gebiet einer bestimmten Region oder eines Bundesstaates mithilfe eines rechteckigen Felds hervorzuheben. Wir können ein Rechteck auf einer Karte haben, indem wir die Klasse instanziierengoogle.maps.Rectangle. Während der Instanziierung müssen wir die gewünschten Werte für die Eigenschaften des Rechtecks ​​angeben, z. B. Pfad, Strichfarbe, Strichstärke, Füllfarbe, Füllkapazität, Strichgewicht, Grenzen usw.

Beispiel

Das folgende Beispiel zeigt, wie Sie einen bestimmten Bereich auf einer Karte mithilfe eines Rechtecks ​​hervorheben.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(17.433053, 78.412172),
               zoom:6,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var myrectangle = new google.maps.Rectangle({
               strokeColor:"#0000FF",
               strokeOpacity:0.6,
               strokeWeight:2,
               
               fillColor:"#0000FF",
               fillOpacity:0.4,
               map:map,
               
               bounds:new google.maps.LatLngBounds(
                  new google.maps.LatLng(17.342761, 78.552432),
                  new google.maps.LatLng(16.396553, 80.727725)
               )
					
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
</html>

Dies gibt Ihnen die folgende Ausgabe -

Kreise

Genau wie Rechtecke können wir Kreise verwenden, um das geografische Gebiet einer bestimmten Region oder eines Bundesstaates mithilfe eines Kreises hervorzuheben, indem wir die Klasse instanziieren google.maps.Circle. Während der Instanziierung müssen wir die gewünschten Werte für die Eigenschaften des Kreises angeben, z. B. Pfad, Strichfarbe, Strichstärke, Füllfarbe, Füllkapazität, Strichgewicht, Radius usw.

Beispiel

Das folgende Beispiel zeigt, wie Sie das Gebiet um Neu-Delhi mit einem Kreis hervorheben.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap(){
			
            var mapProp = {
               center:new google.maps.LatLng(28.613939,77.209021),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
         
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
         
            var myCity = new google.maps.Circle({
               center:new google.maps.LatLng(28.613939,77.209021),
               radius:150600,
            
               strokeColor:"#B40404",
               strokeOpacity:0.6,
               strokeWeight:2,
            
               fillColor:"#B40404",
               fillOpacity:0.6
            });
				
            myCity.setMap(map);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Es wird die folgende Ausgabe erzeugt -

Neben Markierungen, Polygonen, Polylinien und anderen geometrischen Formen können wir auch ein Infofenster auf der Karte zeichnen. In diesem Kapitel wird die Verwendung des Infofensters erläutert.

Fenster hinzufügen

Das Infofenster wird verwendet, um der Karte Informationen jeglicher Art hinzuzufügen. Wenn Sie beispielsweise Informationen zu einem Ort auf der Karte bereitstellen möchten, können Sie ein Infofenster verwenden. Normalerweise ist das Infofenster an eine Markierung angehängt. Sie können ein Infofenster anhängen, indem Sie das instanziierengoogle.maps.InfoWindowKlasse. Es hat die folgenden Eigenschaften -

  • Content - Mit dieser Option können Sie Ihren Inhalt im String-Format übergeben.

  • position - Mit dieser Option können Sie die Position des Infofensters auswählen.

  • maxWidth- Standardmäßig wird die Breite des Infofensters gedehnt, bis der Text umbrochen wird. Durch Angabe von maxWidth können wir die Größe des Infofensters horizontal einschränken.

Beispiel

Das folgende Beispiel zeigt, wie Sie die Markierung setzen und ein Infofenster darüber angeben.

<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(17.433053, 78.412172),
               map: map,
               draggable:true,
               icon:'/scripts/img/logo-footer.png'
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"388-A , Road no 22, Jubilee Hills, Hyderabad Telangana, INDIA-500033"
            });
				
            infowindow.open(map,marker);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Es wird die folgende Ausgabe erzeugt -

Neben Markierungen, Polygonen, Polylinien und anderen geometrischen Formen können wir einer Karte auch vordefinierte Vektorbilder (Symbole) hinzufügen. In diesem Kapitel wird erläutert, wie Sie die von Google Maps bereitgestellten Symbole verwenden.

Hinzufügen eines Symbols

Google bietet verschiedene vektorbasierte Bilder (Symbole) an, die auf einem Marker oder einer Polylinie verwendet werden können. Genau wie bei anderen Überlagerungen müssen wir ihre jeweiligen Klassen instanziieren, um diese vordefinierten Symbole auf einer Karte zu zeichnen. Im Folgenden finden Sie eine Liste der von Google bereitgestellten vordefinierten Symbole und ihrer Klassennamen.

  • Circle - google.maps.SymbolPath.CIRCLE

  • Backward Pointing arrow (closed) - google.maps.SymbolPath.BACKWARD_CLOSED_ARROW

  • Forward Pointing arrow (closed) - google.maps.SymbolPath.FORWARD_CLOSED_ARROW

  • Forward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE

  • Backward Pointing arrow (open) - google.maps.SymbolPath.CIRCLE

Diese Symbole haben die folgenden Eigenschaften: Pfad, Füllfarbe, Füllkapazität, Skalierung, StokeColor, Strichstärke und Strichgewicht.

Beispiel

Das folgende Beispiel zeigt, wie vordefinierte Symbole in Google Map gezeichnet 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(17.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
					
               draggable:true,
               map: map,
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Es erzeugt die folgende Ausgabe -

Das Symbol animieren

Genau wie bei Markern können Sie den Symbolen auch Animationen wie Bounce und Drop hinzufügen.

Beispiel

Das folgende Beispiel zeigt, wie Sie ein Symbol als Markierung auf einer Karte verwenden und eine Animation hinzufügen.

<!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.433053, 78.412172),
               zoom:5
            }
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
            
            var marker = new google.maps.Marker({
               position: map.getCenter(),
               
               icon: {
                  path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
                  scale: 5,
                  strokeWeight:2,
                  strokeColor:"#B40404"
               },
               
               animation:google.maps.Animation.DROP,
               draggable:true,
               map: map
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Es erzeugt die folgende Ausgabe -

Das JavaScript-Programm von Google Maps kann auf verschiedene vom Benutzer generierte Ereignisse reagieren. Dieses Kapitel enthält Beispiele für die Durchführung der Ereignisbehandlung während der Arbeit mit Google Maps.

Hinzufügen eines Ereignis-Listeners

Mit der Methode können Sie einen Ereignis-Listener hinzufügen addListener(). Es akzeptiert Parameter wie den Objektnamen, zu dem der Listener, der Name des Ereignisses und das Handler-Ereignis hinzugefügt werden sollen.

Beispiel

Das folgende Beispiel zeigt, wie Sie einem Markierungsobjekt einen Ereignis-Listener hinzufügen. Das Programm erhöht den Zoomwert der Karte jedes Mal um 5, wenn wir auf die Markierung doppelklicken.

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center: myCenter,
               zoom:5,
               mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position: myCenter,
               title:'Click to zoom'
            });
            
            marker.setMap(map);
            
            //Zoom to 7 when clicked on marker
            google.maps.event.addListener(marker,'click',function() {
               map.setZoom(9);
               map.setCenter(marker.getPosition());
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Es erzeugt die folgende Ausgabe -

Öffnen eines Infofensters bei Klick

Der folgende Code öffnet ein Infofenster beim Klicken auf die Markierung -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Es erzeugt die folgende Ausgabe -

Listener entfernen

Sie können einen vorhandenen Listener mithilfe der Methode entfernen removeListener(). Diese Methode akzeptiert das Listener-Objekt, daher müssen wir den Listener einer Variablen zuweisen und an diese Methode übergeben.

Beispiel

Der folgende Code zeigt, wie Sie einen Listener entfernen -

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         var myCenter = new google.maps.LatLng(17.433053, 78.412172);
         function loadMap(){
			
            var mapProp = {
               center:myCenter,
               zoom:4,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
            
            var marker = new google.maps.Marker({
               position:myCenter,
            });
            
            marker.setMap(map);
            
            var infowindow = new google.maps.InfoWindow({
               content:"Hi"
            });
            
            var myListener = google.maps.event.addListener(marker, 'click', function() {
               infowindow.open(map,marker);
            });
				
            google.maps.event.removeListener(myListener);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "googleMap" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

Es erzeugt die folgende Ausgabe -

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved