Google Maps JavaScript API-Lernprogramm: Fügen Sie Ihrer Website eine benutzerdefinierte Karte hinzu

Google Maps JavaScript API-Lernprogramm: Fügen Sie Ihrer Website eine benutzerdefinierte Karte hinzu

Google Maps JavaScript API-Lernprogramm: Fügen Sie Ihrer Website eine benutzerdefinierte Karte hinzu
СОДЕРЖАНИЕ
02 июня 2020

Google Maps hilft uns jeden Tag dabei, durch Straßen zu navigieren und Orte auf eine Weise zu finden, die noch vor wenigen Jahrzehnten einfallslos war. Es ist nicht nur bei der Wegfindung nützlich, sondern wir sehen auch viele Beispiele für Karten, die für die Datenvisualisierung verwendet werden, z. B. wie viele Websites in letzter Zeit Karten verwenden, um die Verbreitung von COVID-19 auf der ganzen Welt zu visualisieren. Lassen Sie uns heute lernen, wie wir mithilfe der Google Maps JavaScript-API benutzerdefinierte Karten für unsere Websites und Anwendungen erstellen können.


Sie fragen sich vielleicht, warum wir uns mit der JavaScript-API von Google Maps befassen sollten, um Karten zu erstellen, wenn wir eine verwenden können Statische Karte Verwenden Sie stattdessen eines der verfügbaren WordPress-Plugins, um das Codieren zu vereinfachen.

Beide sind natürlich hervorragende Optionen, wenn Sie einen Unternehmensstandort auf Ihrer Website anzeigen möchten. Die JavaScript-API von Google Maps bietet Ihnen jedoch mehr Kontrolle für Zeiten, in denen Sie eine benutzerdefinierte Karte erstellen möchten, die komplexer ist als ein vorgefertigtes Plugin.

Tutorial zur JavaScript-API von Google Maps

Wenn Sie keine Zeit mit dem Codieren verbringen möchten und eine einfachere Möglichkeit zum Anzeigen von Karten auf Ihrer Website wünschen, empfehle ich die Google Maps-Block von Otter.

Abrufen des Google Maps JavaScript API-Schlüssels

Bevor wir beginnen, benötigen wir zunächst einen API-Schlüssel für Google Maps. Sie können es von bekommen Hier. Die Google Maps-API ist nicht ganz kostenlos, enthält jedoch einen kostenlosen Plan, der für die meisten Fälle ausreicht.

Hast du die API-Schlüssel? Nehmen Sie die dritte Ausfahrt aus dem Kreisverkehr und fahren Sie mit dem Tutorial fort. ��

Erstellen einer einfachen Karte

Eine grundlegende Google Maps-Instanz mit Standardeinstellungen.Eine grundlegende Google Maps-Instanz mit Standardeinstellungen.

Erstellen wir zunächst eine einfache Google Map, um loszulegen. Während Sie JavaScript und CSS trennen können, verwenden wir in diesem Lernprogramm eine einzige HTML-Datei. Hier ist die Struktur, die wir verwenden werden:

html>
<html>
<Kopf>
<Titel>Einfacher Maptitle>
<Metaname ="Ansichtsfenster" Inhalt ="Anfangsskala = 1,0">
<Meta-Zeichensatz ="utf-8">
<Stil>
#Karte {
Höhe: 100%;
}}

HTML, Körper {
Höhe: 100%;
Rand: 0;
Polsterung: 0;
}}
Stil>
Kopf>
<Körper>
<div id ="Karte">div>
<Skript>
lass map;
Funktion initMap () {
map = new google.maps.Map (document.getElementById (‘map’), {
Center: {
lat: 51,513329,
lng: -0,088950
}},
Zoom: 14
});
}}
Skript>
<Skript src ="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&Rückruf = initMap" asynchrone Verschiebung>Skript>
Körper>
html>

Sobald die Google Maps-API geladen ist, ruft sie die initMap-Funktion auf, die die Karte initialisiert. Wenn wir unseren Code noch weiter aufschlüsseln, verwenden wir ein leeres Div mit der ID der Karte, um zu deklarieren, wo wir die Karte rendern möchten.

lass map;
Funktion initMap () {
map = new google.maps.Map (document.getElementById (‘map’), {
Center: {
lat: 51,513329,
lng: -0,088950
}},
Zoom: 14
});
}}

In unserem JavaScript legen wir zunächst eine Kartenvariable außerhalb der Funktion fest, damit diese Teil des globalen Bereichs ist, damit wir die Karte später ändern können. In unserer initMap-Funktion deklarieren wir zuerst eine neue Google Map und setzen sie so, dass sie gerendert wird, indem wir das Element mit der ID der Karte aufrufen. Danach legen wir unsere Optionen fest, nämlich das Zentrum der Karte und die Zoomstufe.

Wir verwenden die Koordinaten der City of London, ein historisches Wahrzeichen mitten in London, als Kartenmitte. Später diskutieren wir, wie Sie die Karten-API verwenden können, um Koordinaten eines beliebigen Ortes auf der Karte zu finden. Aber jetzt, wenn Sie neugierig sind, können Sie verwenden latlong.net um schnell Koordinaten einer beliebigen Adresse zu finden.

Kartentypen

Nachdem wir nun eine grundlegende Karte haben, können wir uns die Anpassungsoptionen ansehen, die uns die JavaScript-API von Google Maps bietet. Die erste Option, die wir verwenden werden, ist Kartentyp. Google Maps unterstützt vier Arten von Karten:

  • Roadmap: Die Standardkarte, die Sie normalerweise sehen.
  • Satellit: Satellitenansicht von Google Maps und Google Earth, sofern verfügbar.
  • Hybrid: eine Mischung aus Roadmap und Satellitenansicht.
  • Terrain: Eine Karte, die auf Terrain-Informationen wie Bergen und Tälern basiert.

In unseren Kartenoptionen können wir eine mapType-Eigenschaft hinzufügen, um die gewünschte Ansicht wie folgt auszuwählen:

map = new google.maps.Map (document.getElementById (‘map’), {
Center: {
lat: 51,513329,
lng: -0,08895
}},
Zoom: 14,
mapTypeId: ‘hybrid’
});

In unserem Beispiel verwenden wir eine Hybridkarte. Sie können mit verschiedenen Typen experimentieren, um festzustellen, welcher für Ihren Anwendungsfall geeignet ist.

Kartenoptionen

Nach dem Kartentyp kommen wir zu Kartensteuerung. Mit Google Maps können Sie eines der sechs Steuerelemente in Ihren Karten verwenden. Sie finden eine Liste der Steuerelemente auf ihrer Website.

Sie können das zu verwendende Steuerelement und seinen Speicherort bei Bedarf wie folgt angeben:

map = new google.maps.Map (document.getElementById (‘map’), {
Center: {
lat: 51,513329,
lng: -0,08895
}},
Zoom: 14,
mapTypeId: ‘hybrid’,
scaleControl: true,
fullscreenControlOptions: {
Position: google.maps.ControlPosition.RIGHT_BOTTOM
}},

});

Wir aktivieren scaleControl, das den Maßstab der Karte ganz unten neben den Urheberrechten von Google anzeigt, indem wir es als WAHR deklarieren. In der nächsten Zeile ändern wir das Erscheinungsbild von fullscreenControl mithilfe der Eigenschaft fullscreenControlOptions von seiner Standardposition oben rechts nach unten rechts. Ebenso können Sie die Position anderer Steuerelemente anpassen.

Möchten Sie eine Steuerung, die etwas anderes als die eingebauten steuert? Keine Sorge, mit Google Maps können Sie auch benutzerdefinierte Steuerelemente für Ihre Karte erstellen.

Lassen Sie uns über Marker sprechen!

Hinzufügen eines Markers

Marker sind erstaunlich und ermöglichen es, viele interaktive Anwendungen mit einer Karte zu erstellen. Beispielsweise verwenden einige Hotelbuchungswebsites Markierungen, um Ihnen den Standort von Hotels auf einer Karte anzuzeigen. Und sie sind auch sehr einfach hinzuzufügen.

Lasst uns Fügen Sie einen Marker hinzu zur London Bridge mit folgendem Code:

let marker = new google.maps.Marker ({
Position: {
lat: 51.506821,
lng: -0,0879
}},
Karte: Karte,
Titel: ‘The London Bridge’
});

Wie Sie oben sehen können, hat der Code für unseren Marker drei Eigenschaften. Der erste sind die Koordinaten. Danach übergeben wir die Kartenvariable, in der wir unsere Karte am Anfang gespeichert haben, und schließlich den Titel des Markers.

Sie können die URL auch an ein benutzerdefiniertes Markierungssymbol mit einer Symboleigenschaft im obigen Codeblock übergeben.

Hinzufügen eines InfoWindows

Möglicherweise fehlt in unseren Markern etwas. Wenn Sie auf eine Markierung auf der Karte klicken, wird normalerweise ein Popup mit weiteren Details angezeigt. Dieses Popup ist eine andere Komponente an sich, die als bezeichnet wird InfoWindow.

Google Maps mit einem benutzerdefinierten Marker.Google Maps mit einem benutzerdefinierten Marker.

Zum Glück ist es sehr einfach, ein InfoWindow an unseren Marker anzuhängen.

let infoWindow = new google.maps.InfoWindow ({
Inhalt: ‘

London Bridge


});

marker.addListener (‘click’, function () {
infoWindow.open (Karte, Markierung);
});

Zuerst erstellen wir eine neue infoWindow-Variable, in der unsere InfoWindow-Komponente gespeichert ist. Wir übergeben ihm nur eine Eigenschaft von Inhalten, die den HTML-Code enthält, der nach dem Klicken angezeigt wird. Danach fügen wir unserem Marker einen On-Click-Ereignis-Listener hinzu, der ihn anweist, das infoWindow zu öffnen, wenn auf den Marker geklickt wird.

Einfach so können Sie einen Marker und ein infoWindow verwenden, um interaktive Erlebnisse mit Ihrer Karte zu erstellen.

Jetzt ist der richtige Moment, um eine Sekunde innezuhalten und auf die Fortschritte zurückzublicken, die wir gemacht haben. In nur 30 Codezeilen haben wir die JavaScript-API von Google Maps verwendet, um eine benutzerdefinierte Karte mit Markierungen und Infoboxen zu erstellen. Es ist erwähnenswert, wie einfach es ist, die Google Maps-API zu verwenden, um Dinge zu tun, die für Anfänger eine Herausforderung gewesen wären.

Dynamische Änderung & Event-Listener

Markierungen und Kartenoptionen sind nicht unbedingt die Gründe, warum jemand ein vorgefertigtes Google Map-Plugin fallen lassen und zur API wechseln würde. Sie sind vielversprechend, aber viele Plugins bieten diese Funktionen bereits an. Versuchen wir etwas, was mit einem Plugin nicht möglich ist.

Dynamische Änderung

Google Maps hat viele Methoden mit der Karte zu interagieren und ihr Verhalten zu ändern. Wenn Sie es gewohnt sind, mit DOM zu arbeiten, sollten Sie mit diesen Methoden keine großen Probleme haben.

Mit einigen dieser Methoden können Sie Informationen aus der Karte abrufen, z. B. getCenter, das die Mittelkoordinaten der Karte zurückgibt. In ähnlicher Weise können Sie in einigen Fällen das Verhalten ändern, z. B. setCenter, mit dem die Mitte der Karte geändert wird.

Es gibt viele Methoden, und Sie sollten sich alle ansehen, damit Sie wissen, was mit der API möglich ist. Verwenden wir eine dieser Methoden für unsere Karte.

Wir können unserem Beispiel eine Schaltfläche hinzufügen, die das Zentrum unserer Karte zurück in die City of London bringt.

Zuerst müssen wir unserem Code eine Schaltfläche hinzufügen:

<Button ID ="bringToCenter">Zum Centerbutton bringen>

Jetzt fügen wir unserer Schaltfläche einen Ereignis-Listener hinzu, der die setCenter-Methode auslöst:

const centerButton = document.querySelector (‘#bringToCenter’);

centerButton.addEventListener (‘click’, Funktion (e) {
e.preventDefault ();
map.setCenter ({
lat: 51,513329,
lng: -0,08895
});
});

Und das ist alles. Einfach, oder? Wir haben map.setCenter verwendet, in dem map die Variable ist, die wir zu Beginn deklariert haben, um unsere Map zu halten.

Sie sollten versuchen, mit verschiedenen Methoden zu experimentieren und die Grenzen der API zu erkunden.

Ereignis-Listener

Ein weiteres Konzept, mit dem JavaScript-Entwickler möglicherweise vertraut sind, sind Ereignis-Listener. Sie können Aktionen an bestimmte Ereignisse anhängen. Dies bedeutet, dass diese Aktionen ausgelöst werden, wenn ein Ereignis eintritt, z. B. ein Wechsel des Zentrums.

Nehmen wir eines der Beispiele aus den Google Maps-Dokumenten, um die Koordinaten der Karte abzurufen, wenn Sie auf eine beliebige Stelle klicken.

let infoWindowLatLang;

map.addListener (‘click’, Funktion (mapsMouseEvent) {
if (infoWindowLatLang) infoWindowLatLang.close ();

infoWindowLatLang = new google.maps.InfoWindow ({
Position: mapsMouseEvent.latLng
});

infoWindowLatLang.setContent (mapsMouseEvent.latLng.toString ());
infoWindowLatLang.open (Karte);
});

Wie Sie sehen können, entspricht das Konzept weitgehend der Funktionsweise von Ereignis-Listenern in JavaScript. Zuerst fügen wir unserer Karte einen onClick-Ereignis-Listener hinzu. In unserem Ereignis-Listener erhalten wir die Koordinaten, auf die der Benutzer klickt, und fügen sie in ein InfoWindow ein.

Wenn Sie das überprüfen Google Map Block von Otter, Sie können sehen, wie wir diese Ereignis-Listener und -Methoden verwenden, um beispielsweise Drag hinzuzufügen & Lassen Sie die Markierungen fallen und entfernen Sie eine Markierung, indem Sie darauf klicken.

Erstellen eines benutzerdefinierten Steuerelements

Und schließlich beenden wir diesen Artikel mit einem Beispiel für das Bauen benutzerdefinierte Steuerelemente für Ihre Google Maps.

Wie bereits erwähnt, erstellen wir eine benutzerdefinierte Schaltfläche, die der Mitte der Karte eine Markierung hinzufügt. Der Code dafür sieht zwar etwas kompliziert aus, ist aber unkompliziert.

Zuerst erstellen wir eine Schaltfläche als Funktion, die einen Ereignis-Listener hat, um der Mitte der Karte einen Marker hinzuzufügen.

Sie müssen YOUR_API_KEY im obigen Codeblock durch Ihren API-Schlüssel ersetzen. Es wird eine einfache Google Map mit dem angegebenen Breiten- und Längengrad als Mittelpunkt gerendert.

Funktion MarkerControl (controlDiv, map) {
const controlUI = document.createElement (‘div’);
controlUI.style.backgroundColor = ‘#fff’;
controlUI.style.border = ‘2px solid #fff’;
controlUI.style.borderRadius = ‘3px’;
controlUI.style.boxShadow = ‘0 2px 6px rgba (0,0,0, .3)’;
controlUI.style.cursor = ‘Zeiger’;
controlUI.style.margin = ’10px’;
controlDiv.appendChild (controlUI);

const controlText = document.createElement (‘img’);
controlText.style.padding = ‘5px’;
controlText.title = ‘Klicken, um einen Marker hinzuzufügen’;
controlText.src = ‘https://maps.google.com/mapfiles/ms/icons/red-pushpin.png’;
controlUI.appendChild (controlText);

controlUI.addEventListener (‘click’, function () {
neuer google.maps.Marker ({
Position: map.getCenter (),
Karte: Karte
});
});
}}

Der größte Teil des obigen Codes erstellt nur ein Element für unsere Schaltfläche. Am Ende fügen wir unserer Schaltfläche einen Ereignis-Listener hinzu, der der Mitte der Karte eine Markierung hinzufügt.

Jetzt müssen wir unseren Button an unsere Karte anhängen, was wir mit folgendem Code machen:

const markerControlDiv = document.createElement (‘div’);
const markerControl = neues MarkerControl (markerControlDiv, map);
markerControlDiv.index = 1;
map.controls [google.maps.ControlPosition.LEFT_BOTTOM] .push (markerControlDiv);

Mit dem obigen Code wird unsere Schaltfläche an der Karte an der unteren linken Position angebracht. Und das ist alles. Das ist alles, was Sie benötigen, um Google Maps mithilfe der JavaScript-API benutzerdefinierte Steuerelemente hinzuzufügen.

Google Maps mit einer benutzerdefinierten Schaltfläche.Google Maps mit einer benutzerdefinierten Schaltfläche in der unteren linken Ecke.

Fazit

Ein funktionierendes Beispiel für alles, was wir in diesem Artikel getan haben, ist online unter verfügbar CodeSandbox.

Das ist es für diesen Artikel, und ich hoffe, es hat Ihnen ein gewisses Vertrauen in die Arbeit mit der Google Maps JavaScript-API gegeben. Es ist unglaublich einfach zu bedienen und ermöglicht es Ihnen, mit einer Karte so ziemlich alles zu erstellen, was Sie wollen!

Jetzt sollten Sie versuchen, das zu verwenden, was Sie heute gelernt haben, und es üben, indem Sie mit Google Maps ein Demo-Projekt für sich selbst erstellen. Lassen Sie uns in den Kommentaren wissen, wenn Sie Fragen haben; Wir beantworten sie gerne!

Vergessen Sie nicht, an unserem Crashkurs teilzunehmen, um Ihre WordPress-Site zu beschleunigen. Mit einigen einfachen Korrekturen können Sie Ihre Ladezeit sogar um 50-80% reduzieren:

Layout und Präsentation von Karol K..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector