Location Map – Interactive Google Maps Webapplication

by ·12 Kommentare

Vor langer Zeit suchte ich eine Möglichkeit coole Locations und besuchenswerte Orte gut sichtbar „anpinnen“ zu können, auf einer großen Karte wie der Google Map. Warum das nicht selber entwickeln? 😉

Mit der „Location Map“ habe ich versucht diesen Gedanken umzusetzen. Auf der Google Map kann man mit Hilfe eines Formulars neue Locations mit einem Icon anpinnen, und noch eine Beschreibung hinzufügen. Die Beschreibung kann bequem mit einem Editor bearbeitet werden. Ebenso lassen sich die Einträge natürlich nachträglich bearbeiten und löschen.
location-map-interaktive-google-maps-webapplication-banner
location-map-interaktive-google-maps-webapplication-tooltip location-map-interaktive-google-maps-webapplication-editform

Der größte Knackpunkt des Projekts bestand darin die in der Datenbank gespeicherten Locations dynamisch auf die Google Map laden zu lassen und jeder Location ein eigenes Icon, ein Klick Event und ein Info Window zu geben. Diesen schweren Part würde ich hier kurz veröffentlichen. Ich gehe davon aus, dass ihr schon mit der Google Map hantiert und sie am besten auch schon lauffähig realisiert habt. Hier geht es jetzt nur noch im die Location Marker mit Icon, Klick Event und Info Box.

Hinweis: Dieser Code und die folgenden Anmerkungen beziehen sich auf eine veraltete Version der Location Map, zeigen aber die Grundfunktionalität der Map mit den Locations. Der Aufbau zeigt also eine Art Minimalgerüst. Für weitere Features bitte den Code aus der Demo Page (siehe unten) benutzen.
Code

map.php:

<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas"></div>

In der Webseite wird beim onload die initialize Funktion aufgerufen, in der die Google Map initialisiert und zusammengebastelt wird.

locations-main.js:

/* GMaps v3 !!! */				
function initialize() {
	
	// map initialisieren
	map = new google.maps.Map(document.getElementById("map_canvas"), 
	{
		zoom: 11,
		center: new google.maps.LatLng(52.510788, 13.426666),
		mapTypeId: google.maps.MapTypeId.HYBRID
	}); 
	 
	// marker
	$.ajax({
		type: 'POST',
		url: 'locationmgr.php',
		dataType: 'json',
		data: 'action=get',
		success: function(data) {
			for (loca in data) {
				setMarkers( map, 
					data[loca]['XKoord'], 
					data[loca]['YKoord'],
					data[loca]['Titel'],
					data[loca]['Icon'],
					data[loca]['Inhalt'],
					data[loca]['EventID']
					);
			}
			infowindow = new google.maps.InfoWindow({
				content: "loading...",
				maxWidth: 300
			});
		}
	});
}

function setMarkers(map, XKoord, YKoord, Titel, Icon, Inhalt, ID) {
	var marker = new google.maps.Marker({
		position: new google.maps.LatLng(XKoord, YKoord),
		map: map,
		title: Titel,
		html: generateInfoWindowHtml(Titel, Icon, Inhalt, ID),
		icon: new google.maps.MarkerImage("img/"+ Icon +".png")
	});

	google.maps.event.addListener(marker, "click", function () {
		infowindow.setContent(this.html);
		infowindow.open(map, this);
		$('div.infowindow').css({
			'height':'+=3px'
		});
	});
}

function generateInfoWindowHtml(Titel, Icon, Inhalt, ID) {
	var html = "\
	<div class='infowindow'>\
		<img class='infowindowmoodicon' src='img/"+Icon+".png' alt='"+Icon+"' />\
		<h5>"+Titel+"</h5>\
		<div class='fulltext'>"+decodeHtml(Inhalt)+"</div>\
		<span class='edit' onclick='javascript:editLocation("+ID+");'>(edit)</span>\
	</div>";
	return html;
}

function decodeHtml(encodedHtml) {
  return encodedHtml
      .replace(/&amp;/g, '&')
      .replace(/&lt;/g, '<')
      .replace(/&gt;/g, '>')
      .replace(/&quot;/g, '"')
      .replace(/&#039;/g, "'");
}

Anmerkungen:
Wie in Zeile 1 schon gesehen, ist der Code nach dem aktuelleren Google Maps API v3 Standard programmiert. Irgendwann während meiner Entwicklung stellte Google von v2 auf v3 um und ich programmierte ebenso mein halbes Projekt um, man möchte ja mit dem Fortschritt mithalten.
In den Zeilen 4-10 wird die Google Map im div initialisiert, das Zentrum auf den Berlin Alexanderplatz gesetzt, Zoom und MapType gesetzt.
Nun werden in 12-19 die Locations mit der locationmgr.php aus der Datenbank geladen und für Javascript aufbereitet. Die Daten werden entgegengenommen und eine Schleife durchläuft nun in Zeile 19 jeden Locationdatensatz. setMarkers wird aufgerufen und erzeugt in den Zeilen 38-44 ein Marker Objekt. Dieses wird mit map: map direkt auf die Google Map gepinnt.
Hier erfolgt noch der Aufruf der generateInfoWindowHtml. Diese bastelt ein optisch etwas angepasstes InfoWindow mit der Beschreibung und gibt das komplette HTML Paket zurück an das Marker Objekt, welches daraus das Info Window baut.
In den Zeilen 46-52 wird ein Listener auf das soeben erstellte Marker Objekt gelegt.
Diese 3 Schritte – Marker erstellen, InfoWindow generieren, Listener zuweisen – werden für jede Location ausgeführt und in die Map integriert.

Demo

http://public.hannes-schurig.de/LocationMapDemo/map.php
Demo Version: 0.16

Changelog

Code anzeigenDen Code könnt ihr bequem mit den Links/Rechts Pfeiltasten horizontal bewegen.

Changelog (08.04.2013)

  • v0.1: Event Map zeigt Events an, Events können erstellt und gelöscht werden, 2 Icons stehen zur Verfügung
  • v0.2: Events lassen sich anklicken, ein kleines Popup mit Zusatzinformationen erscheint, Eingabe der Zusatzinformationen bei neuen Events möglich
  • v0.3: Statt getrennter X und Y Koordinaten kann jetzt ein Koordinatenstring, der sich aus Google Maps extrahieren lässt, eingeben
  • v0.4: Statische Icons in eine Datenbank übertragen, die möglichen Icons werden jetzt direkt beim Erstellen neuer Events angezeigt und können somit ausgewählt werden
  • v0.5: Infofenster für das Koordinatentextfeld, komplette Umbenennung in Location Map inklusive aller Codeverweise
  • v0.6: Locations löschen jetzt via selektieren, mit Suchfunktion
  • v0.7: etliche Designverbesserungen und Fixes
  • v0.8: komplette Umprogrammierung: Umstieg von Maps API v2 auf Maps API v3
  • v0.9: komplette Umprogrammierung: Umstieg von HTML Forms auf AJAX
  • v0.10: kleine Informationsfenster als Feedback für den User am unteren Bildschirmrand
  • v0.11: 2 Events mit gleichem Namen verboten, doppelte Überprüfung
  • v0.12: Edititeren von bestehenden Locations
  • v0.12.1: Löschen aus dem Update Dialog
  • v0.12.2: Umstrukturierung des HTML Codes, neuer Formularaufbau
  • v0.13: Dialog Manager kürzt den Code um ca 20%
  • v0.14: verbesserte Unterstützung von Auflösungen kleiner als 1280px
  • v0.14.1: Fehler im Dialog Manager, wenn der zu öffnende Dialog schon geöffnet ist, behoben
  • v0.15: für die Veröffentlichung vorbereitet: Read-Only-Modus, Read-Only-Designset
  • v0.15.1: neuer HTML Head, Meta Tags, see/ref ergänzt, CSSDOC DocBlock erweitert
  • v0.16: Maus-Features: Linksklick auf die Map -> fügt automatisch die Koordinaten des Klicks in das „Neue Location“ Koordinatenfeld ein, Rechtsklick auf die Map -> Management Menü (noch ungenutzt)

To-Do:
Rechte- & Usermanagement
Zuklappen der rechten Seite zulassen
Größen der Map und Formulare dynamisch ändern
Mehr Icons
fehlerhaften Login optisch hervorheben
Unterstützung für mobile Geräte und kleinere Auflösungen einbauen/verbessern

Download

Ich habe schon ein Paket fertig geschnürt, dass die komplette Entwicklung in wenigen Minuten auf dem eigenen Server einrichten lässt, werde das aber erstmal nur auf Anfrage herausgeben. Die Entwicklung hat noch einige Macken und vermisst noch viele Features. Vorerst werde ich selber an dem Projekt weiterarbeiten und es dann in einem reiferen Zustand veröffentlichen.

12 Kommentare

  1. Hey 🙂
    Gibt es schon Ansätze / Ideen wie man sich das suchen der Koordinaten über maps.google.com sparen könnte? 🙂 Hätte Interese am bisherigen Code und würde mich über die scripte per Mail freuen 🙂

  2. Du wirst ja doch noch zu einem richtigen Programmierer. Wenn ich mir vorstelle, was du früher alles in Batch-Scripten gemacht hast, weil du dich nicht an eine richtige Programmiersprache getraut hattest. Respekt. 🙂

  3. @Michael: Den Download hast du ja bereits per Mail erhalten. Bei Fragen kannst du mich kontaktieren; Antwortzeit kann aber aufgrund von Unistress aktuell variieren 😉

    @Kenny: grrrr! Ich scripte auf Arbeit immernoch mit Batch rum, da kommt man als Admin nicht vorbei, vor allem im Bereich Softwareverteilung. Aber außerhalb meines Jobs bin ich auch außerhalb von Batch aktiv.
    Aber so ein Programmierer wie du werde ich sowieso nie werden. 😉

  4. Ach iwo. Derzeit mache ich kaum noch richtige Projekte. Mein Server-Backup habe ich sogar per Bash-Script realisiert. Es liegen zwar noch ein paar Dinge in der Schublade, aber die muss ich eine nach der anderen anfassen. 🙂

  5. Funktioniert super! Da ich das ganze nicht nur gerne auf meiner Seite einrichten würde, sondern auch komplett verstehen, würde ich mich sehr über das angesprochene Paket freuen. 🙂

    Hoffe das Thema ist noch aktuell!

    Beste Grüße,
    Johannes

  7. Auch für mich von Interesse.

    Lässt sich die Karte auch unabhängig von Adminmenü anzeigen?

    Auch ich würde mich über das Script sehr freuen!

    Herzliche Grüße aus Berlin

    Martin

  8. Hallo Martin,

    mit Adminmenü meinst du den Kopfbereich mit den Löschen- und Hinzufügen-Buttons? Dann klar, du kannst die Überschrift und die Buttons aus dem HTML Code ja einfach auskommentieren, dann erscheint nur noch die Map.
    Die Formulare für neue Locations und die Verwaltung lässt sich natürlich auf einer ganz anderen Seite einbauen. Im Endeffekt werden die Daten der Formulare ja nur per AJAX Request an den Server weitergegeben und dort verarbeitet.

    Einzig das Feature, dass beim Linksklick auf die Map die Koordinaten des Klicks direkt in das „Location hinzufügen“ Formular eingefügt werden, funktioniert vermutlich nicht mehr, wenn das Formular nicht mehr direkt ansprechbar ist. Aber auch hier könnte man mit einfachen AJAX Calls oder Sockets Daten an einen anderen Server/Socket schicken und dort abfangen. Das ist dann jedoch schon fortgeschrittene Programmierung.

    Das Projekt sende ich dir gleich per Mail.

    Grüße ebenfalls aus Berlin 😉

  12. Hallo Maik,
    das Projekt gibt es noch, ich lasse dir den Code per Mail zukommen. Allerdings muss ich natürlich dazusagen, dass der Code super alt, die GMaps API in der Version gar nicht mehr erreichbar und es vermutlich einige Open Source Alternativen gibt, die man ebenfalls verwenden und anpassen könnte. Aber wenn du diesem Disclaimer zustimmst, viel Spaß mit meinem eingestaubten Projekt 😉

Schreibe einen Kommentar