Turn-By-Turn-Anweisungen mit der Google Maps-API

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

In diesem Tutorial werden wir den Prozess des Erstellens eines kleinen Widgets durchlaufen, mit dem Benutzer Abbiegehinweise zu einem bestimmten Ort abrufen können. Wir werden die Google Maps-API über JavaScript verwenden, um diese ziemlich erweiterte Funktionalität bereitzustellen.

Einen API-Schlüssel erhalten

Die einzige Einschränkung bei der Verwendung von Google Maps besteht darin, dass wir einen API-Schlüssel beantragen müssen. Das ist jedoch ein ziemlich trivialer Vorgang, wenn Sie schon über ein Google/GMail-Konto verfügen. Leider müssen wir aufgrund der Anforderungen von Google auf der Domain entwickeln, die wir Google zur Verfügung stellen, d. h. wir können nicht auf einem lokalen Server entwickeln. Zum Glück wird der Prozess schnell sein und wir werden nicht viel Zeit auf dem Live-Server verbringen. Stellen Sie außerdem sicher, dass Sie Ihren API-Schlüssel an einem sicheren Ort aufbewahren, da ich keine Möglichkeit finden konnte, sie nach der Generierung abzurufen, obwohl Sie wahrscheinlich nur einen neu erstellen könnten.

Der Staat der Affären

Bevor wir uns mit Code befassen, möchte ich den Grund für diese Idee diskutieren. Wie die meisten Entwickler verbringe ich viel Zeit im Web. Eine bestimmte Untergruppe von Websites, die ich besuche, sind lokale Unternehmen, die sicherlich keine großen Ressourcen für das Webdesign haben, aber hoffentlich werden die Leute, die diese Websites entwickeln, Artikel wie diesen sehen und erkennen, wie einfach es ist, ein voll funktionsfähiges zu integrieren Karte in eine beliebige Webseite. Fast jede Website, die ein kleines Unternehmen repräsentiert, verfügt über eine Seite, auf der Benutzer erfahren, wie sie ihren physischen Standort finden können. Oft erhalten Sie eine Karte mit ihrem Standort, was Benutzern, die das Gebiet nicht kennen, nicht hilft. In diesem Tutorial werden wir das ändern und den Benutzern erlauben, ihre Adresse einzugeben und eine Wegbeschreibung zu jeder gewünschten Adresse zu erhalten.

Einschließlich der Google Maps Javascript Library

Jetzt, da die Seifenkiste nicht mehr im Weg ist, können wir uns den Code ansehen. Als erstes müssen wir die Javascript-Bibliothek einbinden, die alle Google Maps-Methoden enthält. Google hat diesen Code wahrscheinlich generiert, als Sie Ihren API-Schlüssel erstellt haben. Dies hat jedoch möglicherweise auf die API der Version 3 hingewiesen, die sich noch im Beta-Test befindet. Hier ist der Link zur API-Version 2. Stellen Sie sicher, dass Sie Ihren API-Schlüssel einfügen. Wir werden auch eine Datei einfügen, application.js, die unsere benutzerdefinierten Funktionen enthält. Ich habe meine in einem Verzeichnis auf der Stammebene namens js gespeichert. Der folgende Code befindet sich im Kopfbereich Ihrer Seite.

1	<script src="https://maps.google.com/?file=api&v=2&key=INSERT_API_KEY_HERE" type="text/javascript"></script>
2	<script src="./js/application.js" type="text/javascript"></script>

Der HTML-Code

Im Hauptteil unserer Seite benötigen wir ein begrenztes Markup. Ich werde kurz auf die erforderlichen Bits eingehen, und Sie können sich den Quellcode ansehen, um die Flusen zu sehen, die ich in meine Demo aufgenommen habe. Das erste Element ist ein leeres Div mit der ID map_canvas. Dies ist der Platzhalter, auf den wir die Google Maps-Aufrufe verweisen, und es werden alle Karten-Markups in diesem Element generiert.

1	<div id="map_canvas"></div>

Als nächstes habe ich ein div erstellt, das die Organisationsadresse und das Formular enthält, in das der Benutzer seine Adresse eingeben kann. Sie können sich diesen Code ansehen, aber er ist ziemlich einfach und nicht sehr schwer zu erkennen, ob er erfüllt ist. Schauen Sie sich unbedingt mein CSS an, um zu sehen, wie es in meiner Demo gestaltet ist.

<div id="addresses">
    <div class="address-panel">
        <h2>Our Address</h2>
        <address>
          1450 Jayhawk Blvd #223<br />
          Lawrence, KS<br />
          66045
        </address>
    </div>

    <div class="address-panel">
        <h2>Your Address</h2>

        <form action="./index.php" onsubmit="overlayDirections();return false;" method="post">
            <div>
              <label for="street">Street Address</label>
              <input id="street" name="street_address" type="text" />
            </div>
            <div>
              <div class="address-form-column">
                <label for="city">City</label>
                <input id="city" name="city" type="text" />
              </div>

              <div class="address-form-column">
                <label for="state">State</label>
                <select id="state" name="state">
                  <option value="AL">Alabama</option>
                  <option value="AK">Alaska</option>
                  <option value="AZ">Arizona</option>
                  <option value="AR">Arkansas</option>
                  <option value="CA">California</option>
                  <option value="CO">Colorado</option>
                  ...
                </select>
              </div>

              <div class="address-form-column">
                <label for="zip">Zip Code</label>
                <input id="zip" name="zip_code" type="text" maxlength="5" size="5" />
              </div>
            </div>

            <div class="button">
              <input name="submit" type="submit" value="Get Directions" />
            </div>
        </form>
    </div>
</div>

Beachten Sie, dass wir diese Seite an sich selbst senden, damit wir die Seite mit PHP verarbeiten können, wenn der Benutzer JS deaktiviert hat. Wenn sie JS aktiviert haben, möchten wir eine Funktion, overlayDirections(), ausführen, die wir uns etwas später ansehen werden. Der Großteil dieses Codes geht in das Auswahlfeld, in dem der Benutzer seinen Status auswählen kann. Ich habe ihn für diejenigen, die diesen Artikel drucken, komprimiert, aber Sie können den vollständigen Code aus dem Download abrufen. Weitere interessante Hinweise sind, dass wir die size und die maxlength des Postleitzahlentextfelds auf 5 setzen. Als letztes müssen wir beachten, dass wir allen Formularelementen IDs und Namen zugewiesen haben.

Bootstrapping und Deklarieren von Variablen

Okay, jetzt können wir uns dem Fleisch dieses Tutorials widmen, dem JavaScript-Code. Fast alle Anrufe, die wir tätigen werden, stammen von der Google Maps-API, auf die wir zuvor verwiesen haben. Google bietet auf seiner Website eine hervorragende Dokumentation und Beispielcode. Schauen Sie sich diese also unbedingt an. Ich werde versuchen, auf relevante Seiten zu verlinken, wenn ich sie benutze.

Das erste ist, während wir unsere HTML-Seite geöffnet haben, können wir die Initialisierungsfunktion durch Festlegen des onload-Attributs booten. Hinweis: Dies kann in jQuery mit der Funktion $(document).ready() erfolgen.

1	<body onload="initialize()">

Jetzt werden wir in die Datei js/appication.js wechseln. Als erstes müssen wir einige Variablen setzen. Einige Code-Evangelisten werden mich wahrscheinlich wegen der Deklaration globaler Variablen jagen, aber ich glaube, in diesem Fall sollten wir in Ordnung sein. Ich gebe Ihnen den Code und erkläre dann, wie wir jeden einzelnen verwenden werden.

1	var gdir, fromAddress, toAddress;

gdir: Enthält das GDirections-Objekt, mit dem die Ergebnisse der Wegbeschreibungen abgerufen und auf einer Karte und / oder einem Textfeld angezeigt werden.
fromAddress: Eine Zeichenfolge, die die vollständige Adresse des Benutzers enthält.
toAddress: Eine Zeichenfolge, die die Geschäfts- / Organisationsadresse enthält

Die Funktion initialize()

Die zuvor aufgerufene Funktion initialize() wird verwendet, um die Karte auf der Seite zu erstellen und eine benutzerdefinierte Markierung für unseren Standort zu platzieren.

/*
**
* Bootstrap function to setup map and apply
* custom company marker
*/
function initialize() {
  if (GBrowserIsCompatible()) {
    //settings
    var companyMarkerImage= "./images/jayhawk.gif";
    var companyLatLng     = new GLatLng(38.957101, -95.251469);
    var companyMarkerSize = new GSize(55, 52); //width, height
    
    toAddress = "1450 Jayhawk Blvd #223 Lawrence, KS 66045";

    var defaultZoomLevel  = 13;
    //end settings

    //setup elements
    map   = new GMap2(document.getElementById("map_canvas"));
    gdir  = new GDirections(map, document.getElementById("directions"));

    //error handler
    GEvent.addListener(gdir, "error", handleErrors);

    //set company marker
    var companyMarker = createMarker(companyLatLng, companyMarkerImage, companyMarkerSize);

    //set map center
    map.setCenter(companyLatLng, defaultZoomLevel);
    map.addOverlay(companyMarker);
  }
}

Als erstes müssen wir überprüfen, ob der Browser mit Google Maps kompatibel ist. Dazu stellt Google GBrowserIsCompatible() in der API zur Verfügung. Im Wesentlichen gibt es true zurück, wenn der Browser kompatibel ist und wir den Rest unserer Funktion ausführen können. Ich habe beschlossen, einige der Werte in Variablen am oberen Rand der Funktion zu abstrahieren, damit diese problemlos auf viele Anwendungen portiert werden können.

  //settings
  var companyMarkerImage= "./images/jayhawk.gif";
  var companyLatLng     = new GLatLng(38.957101, -95.251469);
  var companyMarkerSize = new GSize(55, 52); //width, height
  
  toAddress = "1450 Jayhawk Blvd #223 Lawrence, KS 66045";

  var defaultZoomLevel  = 13;
  //end settings

Das companyMarkerImage ist eine Zeichenfolge der Position eines kleinen Bildes, das wir an unserer Position auf der Karte platzieren. Dies ist meiner Meinung nach eine nette Geste, wenn Sie ein benutzerdefiniertes Symbol für Ihr Unternehmen haben, mit dem die allgemeine Google Map-Ansicht personalisiert wird. Als nächstes enthält companyLatLng ein GLatLng-Objekt, das einem Längen- und Breitengradpunkt in der Welt entspricht. Gehen Sie nicht aus und kaufen Sie ein GPS-Gerät, um diese Nummern zu erhalten. Wir können maps.google.com verwenden. Geben Sie im Suchfeld Ihre Adresse ein und klicken Sie oben rechts auf der Karte auf die Schaltfläche Link, wenn der Ort gefunden wurde. Scrollen Sie durch das erste Textfeld im modalen Fenster und suchen Sie &sll=....

Sie können diese Koordinaten kopieren und in die Parameter unseres GLatLng-Konstruktors einfügen. Dies ist der Punkt auf der Karte, an dem wir unser benutzerdefiniertes Bild platzieren. Die nächste Variable, companyMarkerSize, enthält ein GSize-Objekt, das die Breite und Höhe Ihres benutzerdefinierten Markierungsbilds darstellt. Als nächstes setzen wir toAddress, die die Adresse des Geschäfts ist. Die letzte Variable, defaultZoomLevel, teilt der Karte lediglich mit, wie hoch die Standardzoomstufe zwischen 1 und 18 sein soll.

1	//setup elements
2	map = new GMap2(document.getElementById("map_canvas"));
3	gdir = new GDirections(map, document.getElementById("directions"));

In der nächsten Codezeile wird ein GMap2-Objekt erstellt. Google beschreibt dies als "die zentrale Klasse in der API". Dies lädt die Kartendaten und ermöglicht es uns, die im Kartenbereich angezeigten Daten zu bearbeiten. Ein DOM-Objekt, das auf das Element zeigt, das die Karte enthält, #map_canvas, benötigt ein Argument. Als nächstes setzen wir gdir so, dass es das GDirections-Objekt enthält. Dies ist die Schnittstelle, über die wir Google Maps nach Wegbeschreibungen abfragen. Der Konstruktor verwendet zwei Argumente, ein Kartenobjekt und ein DOM-Objekt, in die die Turn-by-Turn-Richtungen eingefügt werden sollen. Ich beschließe, ein leeres Div unter #addresses mit dem Namen #directions zu erstellen.

1	//error handler
2	GEvent.addListener(gdir, "error", handleErrors);

Bei der Nutzung von Webdiensten besteht immer das Risiko, dass ein Fehler zurückgegeben wird. Mit der GEvent-Klasse können wir dies so schmerzfrei wie möglich gestalten. In diesem Codebit sagen wir, dass wenn wir einen Fehler beim Abrufen der Anweisungen zum Ausführen einer benutzerdefinierten Rückruffunktion haben, in unserem Fall handleErrors. Wir rufen direkt die Funktion addListener() auf, die einen Rückruf registriert. Es werden 3 Argumente für ein Quellobjekt, eine Zeichenfolge, die sich auf den Ereignistyp bezieht, für den der Rückruf ausgeführt werden soll, und ein Handler benötigt, der auf eine Funktion verweist, die ausgeführt werden soll. Die Funktion handleErrors werden wir uns später ansehen.

  //set company marker
  var companyMarker = createMarker(companyLatLng, companyMarkerImage, companyMarkerSize);
  
  //set map center
  map.setCenter(companyLatLng, defaultZoomLevel);
  map.addOverlay(companyMarker);

Die letzten Zeilen in initialize() werden verwendet, um unseren benutzerdefinierten Marker zu erstellen. Ich habe einen Jayhawk ausgewählt, der auf der KU-Homepage zu finden ist. createMarker ist eine Wrapper-Funktion, die ich geschrieben habe, um den Code zu abstrahieren, der zum Erstellen eines benutzerdefinierten Markers erforderlich ist. Es werden drei Argumente benötigt: ein Verweis auf ein GLatLng-Objekt, auf dem das Bild platziert werden soll, eine Zeichenfolge, die den Pfad zu einem Bild darstellt, und ein Verweis auf ein GSize-Objekt, das die Größe des Bildes darstellt. Als nächstes verwenden wir die setCenter()-Methode der GMap2-Klasse, die zwei Argumente, ein GLatLng-Objekt der Koordinaten, auf die zentriert werden soll, und eine Ganzzahl für die Zoomstufe verwendet. Beachten Sie, dass wir die Variablen übergeben, die wir im Einstellungsblock oben in der Funktion initialize() festgelegt haben. Die letzte Codezeile verwendet die Methode addOverlay(). Dies ist es, was das benutzerdefinierte Bild tatsächlich zur Karte hinzufügt.

Die Funktion initialize() hebt viel, aber sie kann es auf jeden Fall zeigen. Nachdem wir als nächstes die Funktion createMarker() geschrieben haben, können Sie die Anwendung laden und einige Fortschritte sehen. Aber lassen Sie uns zuerst die Funktion initialize() rekapitulieren.

Die Funktion createMarker()

Als Nächstes erstellen wir eine Wrapper-Funktion, die das Erstellen eines Markers mit einem benutzerdefinierten Bild vereinfacht. Der Grund, warum ich mich dazu entscheide, dies zu abstrahieren, ist, dass es ein komplizierter Prozess ist und unsere initialize()-Funktion noch mehr überladen würde. Ein weiterer zusätzlicher Vorteil ist, dass wir sehr schnell mehrere Marker hinzufügen können, ohne viel Code zu wiederholen.

/*
**
* Wrapper function to create/return a marker object
* with custom image
*/
function createMarker(latlng, imageURL, imageSize)
{

    var marker      = new GIcon(G_DEFAULT_ICON, imageURL);
    marker.iconSize = imageSize;

    return new GMarker(latlng, { icon: marker });

}

Deutlich kleiner als unsere erste Funktion, aber genauso wichtig. Zuerst deklarieren wir eine neue Variable, einen Marker und speichern ein GIcon-Objekt. Es kann zwei Argumente kopieren, bei denen es sich um ein GIcon-Objekt handelt, von dem Eigenschaften kopiert werden, und image, bei dem es sich um eine Zeichenfolge handelt, die einen Pfad zu einem benutzerdefinierten Image darstellt. G_DEFAULT_ICON ist eine Konstante, die eine Standardmarkierung darstellt, und die imageURL stammt aus dem Einstellungsblock in initialize(). Wir müssen nur noch eine Eigenschaft festlegen, iconSize vom Typ GSize. Dies entspricht der Größe unseres benutzerdefinierten Bildes und stammt ebenfalls aus dem Einstellungsblock. Die letzte Codezeile gibt ein GMarker-Objekt zurück, das zwei Argumente latlng und icon verwendet. Das erste, latlng, ist ein Verweis auf das GLatLng-Objekt, das wir im Einstellungsblock deklariert haben. Das nächste Argument bezieht sich auf das gerade erstellte GIcon-Objekt. Das ist alles, was wir tun müssen, damit der Kartenteil unserer Anwendung funktioniert. Sie können jetzt die Seite laden und sehen, wie einfach es ist, eine schöne Karte auf unserer Website zu erhalten.

Anweisungen hinzufügen

Dies ist bei weitem mein Lieblingsteil dieses Tutorials, bei dem Benutzer eine Adresse eingeben und eine Karte mit hervorgehobener Route und Abbiegehinweisen zurückerhalten können. Durch die Verwendung dieser API können wir etwas, das Tausende von Codezeilen und eine unglaubliche Menge an Verarbeitungsressourcen erfordert, auf nur eine Handvoll Code komprimieren.

/*
**
* Looks up the directions, overlays route on map,
* and prints turn-by-turn to #directions.
*/

function overlayDirections()
{
    fromAddress =
      document.getElementById("street").value
      + " " + document.getElementById("city").value
      + " " + document.getElementById("state").options[document.getElementById("state").selectedIndex].value
      + " " + document.getElementById("zip").value;

    gdir.load("from: " + fromAddress + " to: " + toAddress);
}

Die erste Zeile habe ich aus Gründen der Übersichtlichkeit tatsächlich in fünf Zeilen erweitert. Im Wesentlichen werden dadurch alle Werte aus dem Formular erfasst und ein Leerzeichen zwischen den einzelnen Teilen eingefügt. Ich dachte, dies wäre besser, als den Benutzer zu bitten, die gesamte Adresse in ein einziges Textfeld einzugeben, da dies verwirrend werden kann.

Die zweite Zeile verwendet das in initialize() festgelegte gdir. Wir rufen die load()-Methode auf und übergeben ein einzelnes String-Argument. Dies ist im Wesentlichen das, was wir maps.google.com über das Suchfeld übergeben würden. Mithilfe der Schlüsselwörter from: und to: können Sie Google mitteilen, welche Adresse der Startpunkt und welche der Endpunkt sein muss. Das ist alles, was wir für eine Wegbeschreibung tun müssen. Ja, ich war auch schockiert! Wenn Sie Ihre Seite erneut besuchen, können Sie dies in Aktion sehen.

Fehler behandeln

Als nächstes deklarieren wir die Funktion handleErrors(). Ich habe dies aus dem Google-Beispielcode auf der API-Website übernommen. Ich werde nicht ins Detail gehen, weil es ziemlich einfach ist.

  function handleErrors(){
     if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
       alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);
     else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
       alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);
     else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
       alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);
     else if (gdir.getStatus().code == G_GEO_BAD_KEY)
       alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);
     else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
       alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);
     else alert("An unknown error occurred.");
  }

Es gibt eine lange if... elseif... else-Anweisung, die nach vielen Fehlertypen sucht und den Benutzer benachrichtigt, wenn welche auftreten. Sie können dies ändern, wenn Sie die Warnung weniger technisch gestalten möchten.

Abbaubar

Als gute Webentwickler sollten wir sicherstellen, dass unsere Website für so viele Benutzer wie möglich funktioniert, auch für Benutzer mit deaktiviertem JavaScript. In dieser Situation habe ich mich dafür entschieden, diejenigen mit deaktiviertem JS mit der durchgeführten Suche zu Google Maps umzuleiten, damit sie weiterhin eine Wegbeschreibung erhalten. Dies erfolgt mit PHP, um das Formular auszuwerten und zu Google Maps umzuleiten. Fügen Sie oben auf Ihrer HTML-Seite diesen Code ein:

<?php
  //settings

    $TO    = "1450 Jayhawk Blvd #223 Lawrence, KS 66045"; //company address

  //end settings

  //they seem to have JS disabled, let's redirect them to
  //Google Maps and prefill the query
  if($_POST['submit']) {
    $FROM  = $_POST['street'] . " " . $_POST['city'] . ", " . $_POST['state'] . " " . $_POST['zip'];
    $LOC   = $_POST['language'];

    $url   = "http://maps.google.com/maps?hl=".urlencode($LOC)."&q=from:".urlencode($FROM)."+to:".urlencode($TO)."&ie=UTF8";

    header("Location: " . $url);
  }
?>
...

Zuerst haben wir wieder einen Einstellungsblock, der nur eine Variable zum Setzen hat, $TO. Dies ähnelt dem, was wir in JavaScript für toAddress getan haben, aber wir benötigen dieselbe Zeichenfolge auch in PHP. Als nächstes haben wir eine if-Anweisung, um nach POST-Daten zu suchen, was bedeutet, dass unser Formular gesendet wurde. Jetzt nehmen wir die Formularwerte und platzieren sie in einer Zeichenfolge mit Leerzeichen und speichern diese in einer Variablen, $FROM. Dann speichern wir den Sprachwert in $LOC, dazu später mehr. Die Variable $url enthält die Zeichenfolge, die die Abfrage-URL zu Google darstellt. Beachten Sie, dass wir unsere Werte per URL codieren, damit sie sicher auf der Umleitung übertragen werden. In der letzten Codezeile werden PHP-Header verwendet, um den Nutzer zu Google umzuleiten.

Optional: Mehrsprachige Unterstützung hinzufügen

Als Unternehmen möchten Sie so viele Menschen wie möglich erreichen. Ein Teil dieses Prozesses besteht darin, mehrere Sprachen zu unterstützen. In Google Maps fallen für uns die Unterstützung anderer Sprachen ohne zusätzliche Kosten an.

Öffnen Sie zuerst Ihre HTML-Seite und fügen Sie den folgenden Code zwischen Ihre Formular-Tags ein.

...
<select id="language" name="language">
  <option value="en" selected>English</option>
  <option value="fr">French</option>                  
  <option value="de">German</option>
  <option value="ja">Japanese</option>
  <option value="es">Spanish</option>
</select>
...

Wenn Sie Sprachen entfernen möchten, löschen Sie einfach das Options-Tag. Sie können die Standardeinstellung auch ändern, indem Sie das ausgewählte Attribut verschieben.

Wenn wir zu js/application.js wechseln, müssen wir nur zwei Änderungen vornehmen. Beginnen Sie mit der Funktion overlayDirections(), nachdem Sie die Zeichenfolge fromAddress erstellt haben. Fügen Sie diese hinzu, um den ausgewählten Wert aus dem Sprachauswahlfeld abzurufen und in unserer Sprachvariablen zu speichern.

1	...
2	var language = document.getElementById("language").options[document.getElementById("language").selectedIndex].value;
3	...

Fügen Sie als Nächstes der Funktion gdir.load() ein Argument hinzu. Hierfür wird ein Optionssatz benötigt. In unserem Fall müssen wir nur das Gebietsschema deklarieren, damit es die richtige Sprache und die richtigen Einheiten für die Turn-by-Turn-Richtungen kennt.

1	...
2	gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": language });
3	...

Hinweis: Wir haben dies bereits in die PHP-Umleitung aufgenommen. Wenn Sie dies deaktivieren möchten, setzen Sie einfach $LOC statisch.

1	...
2	$LOC = 'en'
3	...

Abschluss

Das ist alles, was wir für diese erstaunliche Funktion benötigen, und ich hoffe, Sie haben auf diesem Weg etwas über Google Maps gelernt. Ich fordere Sie als Entwickler auf, weiterhin interessante Möglichkeiten zu finden, um Karten in Ihre Anwendungen zu integrieren. Immer wenn ein Modell ortsbezogen ist, sollten Sie sich fragen, ob Ihr Projekt für die visuelle Darstellung auf einer Karte verwendet werden kann. Danke fürs Lesen; Wie immer bin ich hier, um in den Kommentaren oder auf Twitter (@noahhendrix) zu helfen.

Folgen Sie uns auf Twitter oder abonnieren Sie den NETTUTS RSS-Feed, um weitere tägliche Tipps und Artikel zur Webentwicklung zu erhalten.