Hilfreiche Ratschläge

Google map

Pin
Send
Share
Send
Send


Hallo allerseits! Heute lernen wir nicht nur, wie Sie Google Maps auf Ihrer Website installieren (jede HTML-Seite), sondern auch, wie Sie Google Maps formatieren - ändern Sie die Farben einer Karte, fügen Sie einer Markierung in Google Maps eine Beschreibung hinzu, ändern Sie den Typ (Bild) einer Markierung und fügen Sie eine eigene hinzu beschreibung. Lass uns gehen!)

Wichtiger Hinweis. Wir werden alle unsere Experimente vor Ort durchführen. Um Google Maps auf Ihrer Website verwenden zu können, benötigen Sie einen speziellen Authentifizierungsschlüssel. Mach es dir einfach. Wir werden den Eingang weglassen und ihn nicht berücksichtigen.

1. Einfügen von Google Maps

Zuerst erstellen wir eine HTML-Seite und fügen Google Maps ein. Wir werden dies mit der Google Maps API tun. Das heißt, lasst uns den fortgeschrittenen Weg gehen. Es ist zu beachten, dass Google eine gute Dokumentation und Anweisungen in Russisch und Englisch zur Verwendung von Google Maps hat. So können Programmierer sofort dorthin gehen. Wenn Sie eine klare Schritt-für-Schritt-Anleitung erhalten möchten, bleiben Sie dabei.

Jetzt beschreibe ich nacheinander die auszuführenden Aktionen und gebe anschließend den Code der Seite mit Kommentaren an. Erstellen Sie zunächst eine HTML-Seite. Dann:

    Erstellen Sie ein Element auf der Seite

Hier ist der Seitencode, den wir bekommen haben. Achten Sie auf die Kommentare im Inneren, ich habe beschrieben, was passiert und wo.

Jetzt haben wir eine solche Karte, aber es gibt nicht genug Marker, um den Ort anzuzeigen.
Sie werden auch gefragt, wie die von uns benötigte Adresse auf der Karte angegeben werden soll.

2.1 bestimmen Sie den Mittelpunkt der Karte

Lassen Sie uns auf der Karte den Standort des Bolschoi-Theaters anzeigen. Im Parameter center haben wir die Koordinaten der Kartenzentrierung ermittelt:

Wir brauchen solche Koordinaten für unseren Platz. Gehen Sie dazu zur regulären Version von Google Maps und klicken Sie mit der rechten Maustaste auf den Ort, der für uns von Interesse ist. Klicken Sie auf "Was ist hier" und erhalten Sie die Koordinaten des Ortes. (55,760186, 37,618711). Gleichzeitig ändere ich den Maßstab, indem ich ihn auf 18 stelle: zoom: 18.

So fügen Sie ein Ereignis hinzu, indem Sie in Google Maps auf eine Karte oder Markierung klicken

Sie können Ihre Veranstaltung auch hinzufügen, indem Sie auf die Markierung klicken. Im letzten Code der Seite werden wir dies nicht tun. Das geht aber so:

Der erste Parameter der Methode addListener ist das Objekt, für das das Ereignis hinzugefügt wird, in unserem Fall marker. Das Objekt kann nicht nur ein Marker sein, sondern auch die Karte selbst. Der zweite Klickparameter bestimmt die Art des Ereignisses, in diesem Fall ein Klick. Die dritte Funktion ist eine Handlerfunktion, die funktioniert.

Um mehr über den Marker und die Möglichkeiten zu erfahren, empfehle ich, die Dokumentation zu lesen.

3. Definieren Sie Ihre eigenen Stile für die Karte Google Maps

Es ist Zeit, unsere Karte einzufärben. Verleihen Sie ihm einen besonderen und einzigartigen Look. Wir werden dies mit dem Dienst Snazzy Maps tun, der eine große Anzahl von Skins für Google Maps enthält. Und es erlaubt dir solche coolen Karten zu machen:

Ich habe einen Kartenstil namens Blue water gewählt. Auf der Seite dieses Stils finden Sie den Code für das Design und können eine Datei mit einem Beispiel herunterladen, um diesen Stil auf Google Maps anzuwenden.

Wir fügen der Stileigenschaft, die wir für die Kartenvariable angeben, Stile für das Kartendesign hinzu - wenn wir ein Objekt mit einer Karte darin erstellen.

Hier ist das ganze Code-Snippet:

Jetzt sieht unsere Karte so aus:

4. Informationsfenster

Die Karte kann durch Hinzufügen eines Informationsfensters durch Klicken auf unseren Marker weiter verbessert werden. Die Dokumentation für sie liegt hier. Kurz gesagt, um ein Infofenster hinzuzufügen, müssen Sie:

  1. Erstellen Sie das Fenster selbst und den Inhalt darin
  2. Klicken Sie auf die Markierung, um sie anzuzeigen.

All dies geschieht innerhalb der Funktion initMap ()

4.3 Wir machen es so, dass durch Anklicken des Markers - ein Infofenster erscheint

Nun sieht die Karte mit dem Infofenster so aus:

Sie können auch Standardsteuerelemente von der Karte entfernen, die erforderlichen und unnötigen Steuerelemente ein- und ausschalten und sogar eigene Steuerelemente erstellen. Eine Beschreibung all dessen finden Sie in der Dokumentation.

Sehen Sie sich das Video an: DAS ist bei Google Maps !? (September 2021).

Pin
Send
Share
Send
Send