Google Maps API und GeoJSON-Daten

Keine Kommentare

Heute zeige ich euch, wie man GeoJSON-Daten in eigenen Anwendungen in Zusammenhang mit Google Maps anzeigen kann. In meinem GeoJSON-Tutorial hatte ich kurz angesprochen, wie man GeoJSON-Daten mit Drittanbieter-Diensten darstellen kann.

Zur Einbettung in eigene Anwendungen ist dieses Vorgehen aber wenig geeignet, daher werfen wir heute einen Blick auf das Google Maps JavaScript API, mit dem wir Karten von Google Maps in unsere Web-Anwendung einbetten und sehr einfach mit GeoJSON-Daten anreichern können.

Google Maps JavaScript API

Grundsätzlich gestaltet sich die Nutzung des Google Maps JavaScript APIs sehr einfach. Um es nutzen zu können, müssen wir uns allerdings erst einen API-Key generieren.

Beachtet bitte, dass die Nutzung ab einer gewissen Größenordnung kostenpflichtig ist. Wenn ihr euch keinen eigenen API-Key generieren wollt, könnt ihr trotzdem diesen Artikel lesen, nur die Beispiele nicht selber lokal ausführen. Meinen eigenen API-Key werde ich in Sourcecode-Beispielen symbolisch als [API_KEY] darstellen.

Unser minimales Beispiel sieht so aus, dass wir ein DIV-Element definieren, auf dem die Google Map dann dargestellt wird. Die Initialisierung geschieht in einer Callback-Funktion, die vom Google Maps API aufgerufen wird:

<!DOCTYPE html>
<html>
   <body>
    <div id="map" style="width: 600px; height: 400px;"</div>
    <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 49.451993, lng: 11.073397}
          , zoom: 5
        });
      }
    </script>
    <script async defer
       src="https://maps.googleapis.com/maps/api/js?key=[API_KEY]&callback=initMap"
    </script>
   </body>
</html>

Die Attribute center und zoom legen den Mittelpunkt der Karte und den Zoom-Faktor fest. Beim Zoom-Faktor gilt: Je größer der Wert, desto „tiefer“ zoomt man in die Karte. Das Ergebnis kann dann so aussehen:

Google Maps

Im Folgenden werden wir nun suksessive die Funktion initMap() erweitern, um weitere Funktionalität zu ergänzen.

GeoJSON

Wir stellen eine GeoJSON-Datei ccbranches.geojson mit den Niederlassungen der codecentric AG dar, die auch bereits in meinem GeoJSON-Tutorial als Beispiel für einen MultiLineString diente. Dazu ist nur eine weitere Code-Zeile notwendig:

function initMap() {
	var map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 49.451993, lng: 11.073397}
	, zoom: 5
	});
 
   // Load GeoJSON
   map.data.loadGeoJson('ccbranches.geojson');
}

Standardmäßig werden GeoJSON-Punkte als die typischen roten Marker gerendert, Linien in schwarzer Farbe:

Google Maps GeoJSON

Darstellung der GeoJSON-Daten anpassen

Das geht noch besser, indem wir Styling-Informationen ergänzen:

function initMap() {
	var map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 49.451993, lng: 11.073397}
	, zoom: 5
	});
 
	// Styling
	map.data.setStyle({
		icon: "cc-logo-black.png",
	  	strokeColor: "#808080",
		strokeWeight: 2,
		clickable: true
	});	
 
   // Load GeoJSON
   map.data.loadGeoJson('ccbranches.geojson');
}

Wir definieren ein eigenes Marker-Icon, ändern Eigenschaften der Linien und unsere Geometrien sollen klickbar sein (mehr dazu gleich). Die Karte sieht nun so aus:

Google Maps GeoJSON Custom Stlye

Schnell mal ein Popup

Beim Klick auf einen Marker sollen nun noch bestimmte Properties des jeweiligen GeoJSON-Features (in unserem Fall Name der Niederlassung und Adresse) angezeigt werden. Dazu verwenden wir das Standard-Popup aus dem Google API, das für viele Anwendungsfälle bereits ausreichen sollte, da es frei definierbare HTML-Snippets beinhalten kann:

function initMap() {
	var map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 49.451993, lng: 11.073397}
	, zoom: 5
	});
 
	// Styling
	map.data.setStyle({
		icon: "cc-logo-black.png",
	  	strokeColor: "#808080",
		strokeWeight: 2,
		clickable: true
	});	
 
   // Load GeoJSON
   map.data.loadGeoJson('ccbranches.geojson');
 
   // Click listener
   map.data.addListener('click', function(event) {
        var popup = new google.maps.InfoWindow({
            content:
            	"<b>" + event.feature.getProperty("name") + "</b><br/>"
            	+ event.feature.getProperty("address"),
            position: event.latLng
          });
        popup.open(map);
    });   
}

Wir regisitrieren einen Listener für das click-Event, mit dem wir ein neues Objekt vom Typ InfoWindow konstruieren. Das Feld content ist der Inhalt des Popups, in das wir Daten aus dem GeoJSON-Feature einfließen lassen, das wir als Eigenschaft event.feature abgreifen können. Die position des Popups soll der des Events entsprechen. Diese steht unter event.latLng zur Verfügung.

Bei einem Klick auf einen Marker sehen wir dann ein Popup:

Google Maps GeoJSON Popup

Zusammenfassung

Wir haben gesehen, wie man das Google Maps JavaScript API zur Darstellung von Karten nutzen kann. Eigene Geo-Daten im GeoJSON-Format sind extrem einfach einzubinden, wobei die Darstellung noch anpassbar ist. Interaktionen mit den Geometrien haben wir am Beispiel eines einfachen Popups demonstriert.

Die vollständigen Code-Beispiele gibt es in meinem GitHub-Repository ttrelle/geojson-examples.

Einfach dieses Repository klonen, den Inhalt des Ordners docroot als statischen Content in einen Web-Server werfen und in der Datei index.html den eigenen API-Key eintragen. Noch einfacher geht es mit dem beiliegenden docker-compose.yml:

$ docker-compose up

Und schon ist das vollständige Beispiel abrufbar unter

http://localhost:8080
Tobias Trelle

Diplom-Mathematiker Tobias Trelle ist Senior IT Consultant bei der codecentric AG, Solingen. Er ist seit knapp 20 Jahren im IT-Business unterwegs und interessiert sich für Software-Architekturen und skalierbare Lösungen. Tobias hält Vorträge auf Konferenzen und Usergruppen und ist Autor des Buchs „MongoDB: Ein praktischer Einstieg“.

Kommentieren

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.