Google Maps Cluster

Google Maps ist ein starkes Tool zur Visualisierung von Geo-Daten. In diesem Beispiel zeigen wir die Verwendung von Maps Cluster.

Mit einem Cluster können wir das Auftreten von bestimmten Koordinaten auf einer Karte anzeigen lassen.

Man kann sich z.B. die Verteilung seiner Kunden oder die geographische Anzahl von Erdbeben, etc. anzeigen lassen.

Zoomt man nun im Webviewer, wird das Cluster immer feiner.

 

Für die Verwendung dieser API ist ein API-Key von Google erforderlich!

Um sich ein Cluster anzeigen zu lassen, benötigt man die Koordinaten. Die Koordinaten kann man anhand einer Adresse ebenfalls bei Google abfragen.

Die Verarbeitung im Webviewer geschieht mittels JavaScript, hierfür ist es erforderlich, dass die Dezimale mit Punkt statt mit Komma getrennt ist.

Wenn wir uns die API-Beschreibung (https://developers.google.com/maps/documentation/javascript/marker-clustering?hl=de) anschauen, dann sehen wir, dass die Locations als JSON erwartet werden.

Wir erfassen einfachkeitshalber die Koordinaten als Textfeld und tauschen bei der Koordinaten-Ermittlung das Komma durch einen Punkt aus.

Damit wir die Koordinaten einer Adresse ermitteln können, senden wir einen HTTP-Request mittels Aus URL einfügen an die Google API. Als Antwort erhalten wir ein JSON, von dem wir die “Location” mit den Koordinaten ermitteln können.

Abfrage der Koordinaten der Adresse: Bundestag Berlin

{
	"results" : 
	[
		{
			"address_components" : 
			[
				{
					"long_name" : "1",
					"short_name" : "1",
					"types" : [ "street_number" ]
				},
				{
					"long_name" : "Platz der Republik",
					"short_name" : "Platz der Republik",
					"types" : [ "route" ]
				},
				{
					"long_name" : "Mitte",
					"short_name" : "Mitte",
					"types" : [ "political", "sublocality", "sublocality_level_1" ]
				},
				{
					"long_name" : "Berlin",
					"short_name" : "Berlin",
					"types" : [ "locality", "political" ]
				},
				{
					"long_name" : "Berlin",
					"short_name" : "Berlin",
					"types" : [ "administrative_area_level_1", "political" ]
				},
				{
					"long_name" : "Germany",
					"short_name" : "DE",
					"types" : [ "country", "political" ]
				},
				{
					"long_name" : "11011",
					"short_name" : "11011",
					"types" : [ "postal_code" ]
				}
			],
			"formatted_address" : "Platz der Republik 1, 11011 Berlin, Germany",
			"geometry" : 
			{
				"location" : 
				{
					"lat" : 52.5186202,
					"lng" : 13.3761872
				},
				"location_type" : "ROOFTOP",
				"viewport" : 
				{
					"northeast" : 
					{
						"lat" : 52.5199691802915,
						"lng" : 13.3775361802915
					},
					"southwest" : 
					{
						"lat" : 52.5172712197085,
						"lng" : 13.3748382197085
					}
				}
			},
			"place_id" : "ChIJbVDuQcdRqEcR5X3xq9NSG2Q",
			"types" : [ "establishment", "point_of_interest" ]
		},
		{
			"address_components" : 
			[
				{
					"long_name" : "1",
					"short_name" : "1",
					"types" : [ "street_number" ]
				},
				{
					"long_name" : "Platz der Republik",
					"short_name" : "Platz der Republik",
					"types" : [ "route" ]
				},
				{
					"long_name" : "Mitte",
					"short_name" : "Mitte",
					"types" : [ "political", "sublocality", "sublocality_level_1" ]
				},
				{
					"long_name" : "Berlin",
					"short_name" : "Berlin",
					"types" : [ "locality", "political" ]
				},
				{
					"long_name" : "Berlin",
					"short_name" : "Berlin",
					"types" : [ "administrative_area_level_1", "political" ]
				},
				{
					"long_name" : "Germany",
					"short_name" : "DE",
					"types" : [ "country", "political" ]
				},
				{
					"long_name" : "11011",
					"short_name" : "11011",
					"types" : [ "postal_code" ]
				}
			],
			"formatted_address" : "Platz der Republik 1, 11011 Berlin, Germany",
			"geometry" : 
			{
				"location" : 
				{
					"lat" : 52.5182798,
					"lng" : 13.3756895
				},
				"location_type" : "ROOFTOP",
				"viewport" : 
				{
					"northeast" : 
					{
						"lat" : 52.5196287802915,
						"lng" : 13.3770384802915
					},
					"southwest" : 
					{
						"lat" : 52.5169308197085,
						"lng" : 13.3743405197085
					}
				}
			},
			"place_id" : "ChIJWX5PM79RqEcRvd2pKX9U06o",
			"types" : [ "establishment", "point_of_interest" ]
		}
	],
	"status" : "OK"
}

Der Pfad um an “lat” und “lng” zu gelangen lautet:

results[0].geometry.location.lat (Lat-Wert)

results[0].geometry.location.lng (Long-Wert)

Fehleraufzeichnung setzen [ Ein ]

Aus URL einfügen [ $$json; "https://maps.googleapis.com/maps/api/geocode/json?address=" & Coordinates::Adresse &"&key=" &
SQLAusführen ( "SELECT API_KEY FROM Google_Settings FETCH FIRST ROWS ONLY" ; "" ; "" )]
[ Auswahl; Ohne Dialogfeld ]

Feldwert setzen [ Coordinates::Lat; Austauschen ( JSONGetElement ( $$json ; "results[0].geometry.location.lat" ) ; "," ; "." )]

Feldwert setzen [ Coordinates::Long; Austauschen ( JSONGetElement ( $$json ; "results[0].geometry.location.lng" ) ; "," ; "." ) ]

Schreibe Änderung Datens./Abfrage
[ Ohne Dialogfeld ]

Wir ermitteln den Google API-KEY aus der Einstellungstabelle und holen den Wert mittels SQL, so müssen wir keine Beziehung herstellen.

In dieser Einstellungstabelle wird auch der HTML-Code für die Cluster-Anzeige im Webviewer gespeichert. Wir setzen im Quellcode Platzhalter “#???#”, den wir nachher durch die Austausch-Funktion  in Code umwandeln.

Den HTML-Code wird mittels einer SQL-Abfrage in den Webviewer geladen.

"data:text/html," & Austauschen ( 

SQLAusführen ( "SELECT HTML_CLUSTER FROM Google_Settings FETCH FIRST ROWS ONLY" ; "" ; "" ) ;


["#JSONLONGLAT#" ; SQLAusführen ( "SELECT JSONLONGLAT FROM Coordinates WHERE Long IS NOT NULL" ; "" ; "," )] ;


["#GOOGLEAPIKEY#" ; SQLAusführen ( "SELECT API_KEY FROM Google_Settings FETCH FIRST ROWS ONLY" ; "" ; "" )]

 )

Der Platzhalter “#JSONLONGLAT#” ist ein Feld in der Tabelle Coordinates, in dem die Werte Lat und Long zu einem Array für den HTML-Code generiert werden.

 

Download

 

  MapsCluster.fmp12 (492,0 KiB, 1.654 hits)

 

 

2 Kommentare zu „Google Maps Cluster“

  1. Hi, good day !
    Thank you for the downloadable example, but it seems that it doesn’t work.
    I entered my API key in the provided box, but the map doesn’t appear.
    What is wrong ?
    Thanks for your time,
    JLLQ

    1. Please check your enabled API in your Google console.

      I mean you need the “Maps JavaScript API” for the webviewer and the “Geocoding API” to get address from coords

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.