11. Jan 2023
Lesedauer 5 Min.
Komplexe Karten und Funktionen
Freihandzeichnen in Google Maps
Wie man mithilfe von JavaScript das Zeichnen von Polygonen in Google Maps realisieren kann.
Als Entwickler können Sie den Google Maps Service nutzen, um Ausschnitte von Google Maps auf Ihrer Webseite oder in Ihre Mails einzubinden. Damit können Sie beispielsweise Ihren Standort genau präsentieren oder in dem Kartenausschnitt eine perfekte Wegbeschreibung ermöglichen.Der einfachste Weg hierzu ist, Google Maps als iFrame-Element in eine Webseite per HTML-Code zu implementieren. Über den Google Maps Codegenerator funktioniert die Erzeugung des benötigten HTML-Codes mit einem Klick auf die Schaltfläche Get HTML-Code (Bild 1). Über die Einbettung von Googles Kartendienst mithilfe der Google Maps API eröffnen sich für den Entwickler, durch die Nutzung der Programmierschnittstelle, vollkommen neue Möglichkeiten, Google Maps in das eigene Webprojekt zu integrieren. Nimmt man dann noch JavaScript zur Programmierung hinzu, lassen sich auch komplexe Karten und Funktionen mit Google Maps nutzen. Hierzu benötigen Sie allerdings einen entsprechenden API-Key von Google.
Der Google Map Code Generatorerleichtert die Codierung(Bild 1)
Basler
Um mit der Nutzung von Google Maps via JavaScript starten zu können, benötigen Sie für Google Maps ein aktives Google-Konto. Beachten Sie bitte, dass Google nur einen kostenlosen Testmonat aktuell mit einem Guthaben über circa 200 US-Dollar zur Verfügung stellt. Eine Nutzung darüber hinaus wird in Rechnung gestellt. Das Google-Konto erlaubt es Ihnen dann, einen entsprechenden Authentifikations-Key für die Nutzung der Google Maps API zu erstellen.
Google Maps-API Key erstellen
Um einen Google Maps-API Key zu erstellen, gehen Sie wie folgt vor: Öffnen Sie die Google Cloud Console und erstellen Sie über das Dashboard ein neues Projekt. Legen Sie den Projektnamen fest und klicken Sie auf Erstellen.Wählen Sie danach den Link Zur API-Übersicht und suchen Sie im Textfeld von APIs und Dienste den Eintrag Google Maps JavaScript API. Anschließend klicken Sie auf Aktivieren. Setzen Sie den Vorgang mit einem Klick auf Weiter fort und bestätigen Sie die Nutzungsbedingungen von Google. Nachdem Sie den API-Key erzeugt haben, können Sie ihn sofort in Ihrer Webanwendung für die Nutzung von Google Maps verwenden.Die Core Web App
Sie benötigen für dieses Beispiel die Community-Edition von Visual Studio 2022 oder alternativ Visual Studio 2019. In diesem Workshop soll die Google Map in einer ASP.NET Core Web App auf Basis von MVC (Model-View-Controller) erstellt werden. Hierfür benutzen Sie einfach die zur Verfügung stehende Microsoft ASP.NET-Webvorlage.Die Projektvorlage finden Sie unter Create a new project und dann in der Auswahlliste mit der vollständigen Bezeichnung ASP.NET Core Web App (Model-View-Controller). Wählen Sie die Projektvorlage aus (Bild 2) und vergeben Sie als Vorbereitung für die Beispielanwendung den Namen GoogleMapsDemo. Wählen Sie als Framework .NET Core 3.1 aus und schließen Sie das Dialogfenster mit Create ab.
Projektauswahl:Über diesen Dialog erfolgt die Projektauswahl(Bild 2)
Basler
Visual Studio erstellt automatisch aus dem Template eine bereits lauffähige Webapplikation. Diese Vorlage lässt sich gut für kleine übersichtliche Client-Web Applikationen nutzen. Bild 3 zeigt die entsprechende Projektstruktur der MVC-Web-App. Über die Taste [F5] oder das Startsymbol lässt sich die Web-App jetzt auch schon ausführen. Visual Studio startet hierfür im Hintergrund einen Webserver und präsentiert die Startseite der Anwendung im vorgewählten Browser.
Die Projektstrukturder Web-App zum Zeichnen in Google Maps(Bild 3)
Basler
Es gibt eine Vielzahl von Möglichkeiten, die JavaScript API von Google Maps in eigenen Projekten einzusetzen. Bild 4 zeigt die Google-Dokumentation der JavaScript API für die Nutzung der Kartenelemente und deren Einsatzzweck.
Die Dokumentationder Google Maps API ist übersichtlich aufgebaut(Bild 4)
Basler
Im Beispiel verwenden Sie klassisches JavaScript einfach in der Razor-Website der Projektvorlage. Im ersten Schritt fügen Sie dem Projekt erst einmal eine entsprechende Überschrift hinzu. Öffnen Sie hierfür die Datei Index.cshtml im Projektordner Views/Home und ersetzen Sie den HTML-Code wie folgt:
@{
ViewData[<span class="hljs-string">"Title"</span>] =
<span class="hljs-string">"Home Page"</span>;
}
<div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"text-center"</span>>
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Freihandzeichnen in </span>
<span class="xml"> Google Maps<span class="hljs-tag"></<span class="hljs-name">h3</span>></span></span>
<<span class="hljs-regexp">/div></span>
Im nächsten Schritt fügen Sie dem Projekt die benötigten JavaScript-Dateien für die Google Maps API hinzu. Wechseln Sie hierfür in die Razor-Datei _Layout.cshtml im Unterordner Shared. Hier können Sie den kompletten <header>-Tag Bereich entfernen. Dadurch wird die Datei für das Beispiel etwas übersichtlicher. Fügen Sie jetzt die drei nachfolgenden JavaScript-Aufrufe in der Header-Sektion hinzu:
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://ajax.googleapis.com/ajax/libs/</span></span>
<span class="hljs-tag"><span class="hljs-string">jquery/2.1.1/jquery.min.js"</span>></span>
<span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://maps.googleapis.com/maps/api/js?</span></span>
<span class="hljs-tag"><span class="hljs-string">sensor=false&libraries=geometry,places&ext=.js"</span>></span>
<span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">async</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"</span>></span>
<span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
Anstelle von YOUR_API_KEY müssen Sie natürlich den von Ihnen erzeugten Google Maps API-Key einsetzen Im nächsten Schritt können Sie für das Beispiel das <Style>-Tag Element für die Kartenansicht definieren und den Link für die Aktivierung der Zeichenfunktion implementieren:
<span class="hljs-tag"><<span class="hljs-name">style</span>></span>
<span class="css"> <span class="hljs-selector-id">#map_canvas</span> {</span>
<span class="css"> <span class="hljs-attribute">height</span>: <span class="hljs-number">500px</span>;</span>
<span class="css"> <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</span>
<span class="css"> }</span>
<span class="hljs-tag"></<span class="hljs-name">style</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"drawpoly"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Hier klicken, um auf
der Karte zu zeichnen<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"map_canvas"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
Der Code steuert die Einbindung der Karte und verwendet die Funktion draw() direkt als Link-Ziel. Die Einbindung von JavaScript direkt im href-Attribut sollten Sie im Allgemeinen aber nur in Tests verwenden. Der Link kann nur bei aktiviertem JavaScript ausgeführt werden. Besser wäre die Verwendung eines onClick-Handlers um JavaScript auszuführen. Das folgende Listing zeigt den vollständigen Code der Datei _Layout.cshtml mit allen vorgenommenen Anpassungen:
<span class="hljs-meta"><!DOCTYPE html></span>
<span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"utf-8"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">title</span>></span>@ViewData["Title"] - DemoGoogleMaps<span class="hljs-tag"></<span class="hljs-name">title</span>></span>
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"~/lib/bootstrap/dist/css/bootstrap.min.css"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"~/css/site.css"</span> /></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">async</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">style</span>></span>
<span class="css"> <span class="hljs-selector-id">#map_canvas</span> {</span>
<span class="css"> <span class="hljs-attribute">height</span>: <span class="hljs-number">500px</span>;</span>
<span class="css"> <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</span>
<span class="css"> }</span>
<span class="css"> </span><span class="hljs-tag"></<span class="hljs-name">style</span>></span>
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"text-center"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"drawpoly"</span>></span><span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span>></span>Hier klicken, um auf der Karte zu zeichnen<span class="hljs-tag"></<span class="hljs-name">a</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"map_canvas"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">main</span> <span class="hljs-attr">role</span>=<span class="hljs-string">"main"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"pb-3"</span>></span>
@RenderBody()
<span class="hljs-tag"></<span class="hljs-name">main</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"><<span class="hljs-name">footer</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"border-top footer text-muted"</span>></span>
<span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>></span>
&copy; 2022 - DemoGoogleMaps - <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">asp-area</span>=<span class="hljs-string">""</span> <span class="hljs-attr">asp-controller</span>=<span class="hljs-string">"Home"</span> <span class="hljs-attr">asp-action</span>=<span class="hljs-string">"Privacy"</span>></span>Privacy<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
<span class="hljs-tag"></<span class="hljs-name">footer</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"~/lib/jquery/dist/jquery.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"~/js/site.js"</span> <span class="hljs-attr">asp-append-version</span>=<span class="hljs-string">"true"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
@RenderSection("Scripts", required: false)
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
Der Programmcode für das Zeichnen in der Anwendung übernimmt der JavaScript-Code aus dem folgenden Listing:
<span class="hljs-tag"><<span class="hljs-name">script</span>></span>
<span class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">drawAnewPolygon</span>(<span class="hljs-params"></span>)</span></span>
<span class="javascript">{ </span>
<span class="javascript"> poly=<span class="hljs-keyword">new</span> google.maps.Polyline({<span class="hljs-attr">map</span>:map,<span class="hljs-attr">clickable</span>:<span class="hljs-literal">false</span>}); </span>
<span class="javascript"> </span>
<span class="javascript"> <span class="hljs-keyword">var</span> move=google.maps.event.addListener(map,<span class="hljs-string">'mousemove'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>)</span>{</span>
<span class="javascript"> poly.getPath().push(e.latLng);</span>
<span class="javascript"> }); </span>
<span class="javascript"> </span>
<span class="javascript"> google.maps.event.addListenerOnce(map,<span class="hljs-string">'mouseup'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>)</span>{</span>
<span class="javascript"> google.maps.event.removeListener(move);</span>
<span class="javascript"> <span class="hljs-keyword">var</span> path=poly.getPath();</span>
<span class="javascript"> poly.setMap(<span class="hljs-literal">null</span>);</span>
<span class="javascript"> poly=<span class="hljs-keyword">new</span> google.maps.Polygon({<span class="hljs-attr">map</span>:map,<span class="hljs-attr">path</span>:path}); </span>
<span class="javascript"> google.maps.event.clearListeners(map.getDiv(), <span class="hljs-string">'mousedown'</span>); </span>
<span class="javascript"> enable();</span>
<span class="javascript"> });</span>
<span class="javascript">}</span>
<span class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">disable</span>(<span class="hljs-params"></span>)</span>{</span>
<span class="javascript"> map.setOptions({</span>
<span class="javascript"> <span class="hljs-attr">draggable</span>: <span class="hljs-literal">false</span>, </span>
<span class="javascript"> <span class="hljs-attr">zoomControl</span>: <span class="hljs-literal">false</span>, </span>
<span class="javascript"> <span class="hljs-attr">scrollwheel</span>: <span class="hljs-literal">false</span>, </span>
<span class="javascript"> <span class="hljs-attr">disableDoubleClickZoom</span>: <span class="hljs-literal">false</span></span>
<span class="javascript"> });</span>
<span class="javascript">}</span>
<span class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">enable</span>(<span class="hljs-params"></span>)</span>{</span>
<span class="javascript"> map.setOptions({</span>
<span class="javascript"> <span class="hljs-attr">draggable</span>: <span class="hljs-literal">true</span>, </span>
<span class="javascript"> <span class="hljs-attr">zoomControl</span>: <span class="hljs-literal">true</span>, </span>
<span class="javascript"> <span class="hljs-attr">scrollwheel</span>: <span class="hljs-literal">true</span>, </span>
<span class="javascript"> <span class="hljs-attr">disableDoubleClickZoom</span>: <span class="hljs-literal">true</span></span>
<span class="javascript"> });</span>
<span class="javascript">}</span>
<span class="javascript"><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">initialize</span>(<span class="hljs-params"></span>) </span></span>
<span class="javascript">{</span>
<span class="javascript"> <span class="hljs-keyword">var</span> mapOptions = {</span>
<span class="javascript"> <span class="hljs-attr">zoom</span>: <span class="hljs-number">14</span>,</span>
<span class="javascript"> <span class="hljs-attr">center</span>: <span class="hljs-keyword">new</span> google.maps.LatLng(<span class="hljs-number">52.371790</span>, <span class="hljs-number">9.735244</span>),</span>
<span class="javascript"> <span class="hljs-attr">mapTypeId</span>: google.maps.MapTypeId.ROADMAP</span>
<span class="javascript"> };</span>
<span class="javascript"> map = <span class="hljs-keyword">new</span> google.maps.Map(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'map_canvas'</span>), mapOptions);</span>
<span class="javascript"> </span>
<span class="javascript"> <span class="hljs-comment">//draw</span></span>
<span class="javascript"><span class="hljs-comment"> $("#draw a").click(function(e) {</span></span>
<span class="javascript"><span class="hljs-comment"> e.preventDefault();</span></span>
<span class="javascript"><span class="hljs-comment"> disable();</span></span>
<span class="javascript"><span class="hljs-comment"> google.maps.event.addDomListener(map.getDiv(),'mousedown',function(e){</span></span>
<span class="javascript"><span class="hljs-comment"> drawAnewPolygon()</span></span>
<span class="javascript"><span class="hljs-comment"> });</span></span>
<span class="javascript"><span class="hljs-comment"> });</span></span>
<span class="javascript"><span class="hljs-comment">}</span></span>
<span class="javascript"><span class="hljs-comment">google.maps.event.addDomListener(window, 'load', initialize);</span></span>
<span class="hljs-tag"></<span class="hljs-name">script</span>></span>
Der Code erlaubt es Ihnen jetzt freihand in der Karte von Google Maps zu zeichnen.Durch die Funktion Initialize() wird die Karte mit den Koordinaten der Marktkirche in Hannover dargestellt. Die Funktionen enable() und disable() sorgen für das Ein- bzw. Ausblenden der jeweiligen Kartenoptionen. Über den EventListener wird die entsprechende Maps Polygon-Funktion der Google Maps API mit den übergebenen Maus-Koordinaten ausgeführt. Das heißt, ein EventListener ist eine Methode in JavaScript, um auf Events zu hören. Sobald ein Event ausgelöst wird, werden die Event-Eigenschaften als sogeanntes Event-Objekt übergeben. Bild 5 zeigt die lauffähige Web App aus dem Beispiel-Projekt.
Einsatz:So kann man mithilfe der Web-App in einer Karte zeichnen(Bild 5)
Basler
Dieser Workshop hat Ihnen einen kleinen Einblick über die Möglichkeiten der Google Maps API gegeben. Über die gute Online-Dokumentation können Sie Ihr Projekt beliebig ausbauen. Die Dokumentation ist sehr ausführlich und gut verständlich und bietet darüber hinaus viele Beispiel für den Umgang mit der Google Maps API.Auf der anderen Seite können Sie aber auch Ihre ASP.NET Core App erweitern. So zum Beispiel mit einer Speichermöglichkeit der gezeichneten Koordinaten in eine Datenbank und vieles mehr.
Links zum Thema
<b>◼ <a href="https://google-map-generator.com/" rel="noopener" target="_blank">Google Maps Codegenerator</a> <br/></b>
