Google Maps - Erste Schritte

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 -