Die Einbindung dieser Karte:

Siehe davor Voraussetzung

1. Datei map_functions.js erstellen und auf dem Server laden

var centerLatitude = 50.9415187027125;
var centerLongitude = 6.958465576171875;
var startZoom = 13;
 
var map;
 
function init() {
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
 
	//Abrufen der Marker
	retrieveMarkers();

	GEvent.addListener(map, "click", function(overlay, latlng) {
		//Nur den Klick ausfuehren wenn das Fenster geschlossen ist und der Klick direkt auf der Karte war.
		if(!overlay) {
			//Erstellen ein HTML DOM Formularelement
			var inputForm = document.createElement("form");
				inputForm.setAttribute("action","");
				inputForm.onsubmit = function() {storeMarker(); return false;};
 
			//Abrufen der geografischen Koordinaten des Klickpunktes
			var lng = latlng.lng();
			var lat = latlng.lat();

			//Das Info Fenster
			inputForm.innerHTML = '<fieldset style="width:150px;">'
			+ '<legend>Neue Eintragung</legend>'
			+ '<label for="name">Name</label>'
			+ '<input type="text" id="name" style="width:100%;"/>'
			+ '<label for="adresse">Adresse</label>'
			+ '<input type="text" id="adresse" style="width:100%;"/>'
			+ '<label for="kategorie">Kategorie</label>'
			+ '<input type="text" id="kategorie" style="width:100%;"/>'
			+ '<label for="left">Icon URL</label>'
			+ '<input type="text" id="icon" style="width:100%"/>'
			+ '<input type="submit" value="Speichern"/>'
			+ '<input type="text" id="longitude" value="' + lng + '"/>'
			+ '<input type="text" id="latitude" value="' + lat + '"/>'
			+ '</fieldset>';
         
			map.openInfoWindow (latlng,inputForm);
		}
	});
}
 
window.onload = init;
window.onunload = GUnload;

function storeMarker(){
	var lng = document.getElementById("longitude").value;
	var lat = document.getElementById("latitude").value;

	var getVars = "?name=" + document.getElementById("name").value
	+ "&adresse=" + document.getElementById("adresse").value
	+ "&kategorie=" + document.getElementById("kategorie").value
	+ "&icon=" + document.getElementById("icon").value
	+ "&lng=" + lng
	+ "&lat=" + lat ;

	var request = GXmlHttp.create();

	//Auftrag oeffnen fuer storeMakres.php auf dem Server
	request.open('GET', 'storeMarker.php' + getVars, true);
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			//Auftrag komplett
 
			var xmlDoc = request.responseXML;
 
			//Abfragen des Dokumentelements (Antwort)
			var responseNode = xmlDoc.documentElement;
 
			//Abfragen des Attributes
			var type = responseNode.getAttribute("type");
 
			//Abfragen des Inhaltes
			var content = responseNode.firstChild.nodeValue;
 
			//Nachpruefung Fehler-Erfolg
			if(type!='success') {
				alert(content);
			} else {
				//Neuer Marker mit seinem Info Fenster erstellen.
				var latlng = new GLatLng(parseFloat(lat),parseFloat(lng));

				var iconImage = responseNode.getAttribute("icon");
				var marker = createMarker(latlng, content, iconImage)
 
				map.addOverlay(marker);
				map.closeInfoWindow();
			}
		}
	}
	request.send(null);
	return false;
}

function createMarker(latlng, html, iconImage) {
	if(iconImage) {
		var icon = new GIcon();
		icon.image = iconImage;
		icon.iconSize = new GSize(34, 34);
		icon.iconAnchor = new GPoint(17, 34);
		icon.infoWindowAnchor = new GPoint(17, 17);
		var marker = new GMarker(latlng,icon);
	} else {
		var marker = new GMarker(latlng);
	}
	GEvent.addListener(marker, 'click', function() {
		var markerHTML = html;
		marker.openInfoWindowHtml(markerHTML);
	});
	return marker;
}


function retrieveMarkers() {
	var request = GXmlHttp.create();
 
	//Woher kommen die Daten.
	request.open('GET', 'retrieveMarkers.php', true);
 
	//Wenn Status des Auftrages geaendert ist was soll passieren.
	request.onreadystatechange = function() {
		if (request.readyState == 4) {
			var xmlDoc = request.responseXML;
 
			var markers = xmlDoc.documentElement.getElementsByTagName("marker");
			for (var i = 0; i < markers.length; i++) {
				var lng = markers[i].getAttribute("lng");
				var lat = markers[i].getAttribute("lat");
				//Kontrolle fuer lat und lng
				if(lng && lat) {
					var latlng = new GLatLng(parseFloat(lat),parseFloat(lng));
 
					var html = '<div><b>Name</b> '
					+ markers[i].getAttribute("name")
					+ '</div><div><b>Adresse</b> '
					+ markers[i].getAttribute("adresse")
					+ '</div><div><b>Kategorie</b> '
					+ markers[i].getAttribute("kategorie")
					+ '</div>';

					var iconImage =  markers[i].getAttribute("icon");
					var marker = createMarker(latlng, html, iconImage);
					map.addOverlay(marker);
				}
			} //for
		} //if
	} //function

	request.send(null);
}

2. Datei storeMarker.php erstellen und auf dem Server laden

<?php
header('Content-Type: text/xml;charset=UTF-8');


$lat = (float)$_GET['lat'];
$lng = (float)$_GET['lng'];
$name = htmlspecialchars(strip_tags(utf8_encode($_GET['name'])));
$adresse = htmlspecialchars(strip_tags(utf8_encode($_GET['adresse'])));
$kategorie = htmlspecialchars(strip_tags(utf8_encode($_GET['kategorie'])));
$icon = htmlspecialchars(strip_tags(utf8_encode($_GET['icon'])));

//Ein XML node erstellen
$marker = <<<MARKER
<marker lat="$lat" lng="$lng" name="$name" adresse="$adresse" kategorie="$kategorie" icon="$icon"/>
MARKER;

//Datei data.xml oefnen
$f=@fopen('data.xml', 'a+');
if(!$f) die('<?xml version="1.0"?>
<response type="error"><![CDATA[Die Datei data.xml kann nicht geöffnet werden]]></response>
');

//Den XML node schreiben
$w=@fwrite($f, $marker);
if(!$w) die('<?xml version="1.0"?>
<response type="error"><![CDATA[Die Datei data.xml kann nicht beschrieben werden]]></response>');

@fclose($f);

//Antwort ausgeben
$newMarkerContent = "<div><b>Name</b> $name</div><div><b>Adresse</b> $adresse</div><div><b>Kategorie</b> $kategorie</div>";

echo <<<XML
<?xml version="1.0"?>
<response type="success" icon="$icon"><![CDATA[$newMarkerContent]]></response>
XML;
?>

3. Datei retrieveMarkers.php erstellen und auf dem Server laden

<?php
header('Content-Type: text/xml;charset=UTF-8');
$markers = file_get_contents('data.xml');
echo <<<XML
<markers>
$markers
</markers>
XML;
?>

4. Datei data.xml erstellen und auf dem Server laden

Die Datei ist am Anfang leer.

Cyberduck kann auch eine leere Datei direkt auf dem Server erstellen.

5. In einer HTML Seite diesen Code eingeben:

<script type="text/javascript" src="PFAD-ZU-DATEI/map_functions.js"></script>
<div id="map" style="width: 650px; height: 500px"></div>

Siehe davor Voraussetzung

6. Icons erstellen und auf dem Server laden

In der Datei map_functions.js die Grössen diesen Icons sind mit 34*34 px angegeben:

icon.iconSize = new GSize(34, 34);
icon.iconAnchor = new GPoint(17, 34);
icon.infoWindowAnchor = new GPoint(34, 34);

Die Google-Marker haben auch eine 34 px Höhe, aber die eigene Icons dürfen natürlich auch andere Grössen haben.
Die Icons dürfen auch Transparenz haben. Das Format ist .png

(Die Google-Marker haben auch Schatten!)

7. Zusammenhänge der Elementen:

1. Das Info-Fenster - Eingabe:

Das Info-Fenster - Eingabe

In der Datei map_functions.js in der Funktion function init()

+ '<legend>Neue Eintragung</legend>'
+ '<label for="name">Name</label>'
+ '<input type="text" id="name" style="width:100%;"/>'
+ '<label for="adresse">Adresse</label>'
+ '<input type="text" id="adresse" style="width:100%;"/>'
+ '<label for="kategorie">Kategorie</label>'
+ '<input type="text" id="kategorie" style="width:100%;"/>'
+ '<label for="left">Icon URL</label>'
+ '<input type="text" id="icon" style="width:100%"/>'
+ '<input type="submit" value="Speichern"/>'
+ '<input type="hidden" id="longitude" value="' + lng + '"/>'
+ '<input type="hidden" id="latitude" value="' + lat + '"/>'

Anmerkung: Möchte man, aus welchem Grund auch immer, auch die Koordinaten bei der Eingabe sehen/ändern/kopiern etc - dann den Code so ändern:

+ '<input type="text" id="longitude" value="' + lng + '"/>'
+ '<input type="text" id="latitude" value="' + lat + '"/>'

Mit den Befehlen aus der Funktion function storeMarker(){:

+ "&adresse=" + document.getElementById("adresse").value
+ "&kategorie=" + document.getElementById("kategorie").value
+ "&icon=" + document.getElementById("icon").value
+ "&lng=" + lng
+ "&lat=" + lat ;

werden die Angaben der Datei storeMarker.php weitergegeben:

$lat = (float)$_GET['lat'];
$lng = (float)$_GET['lng'];
$name = htmlspecialchars(strip_tags(utf8_encode($_GET['name'])));
$adresse = htmlspecialchars(strip_tags(utf8_encode($_GET['adresse'])));
$kategorie = htmlspecialchars(strip_tags(utf8_encode($_GET['kategorie'])));
$icon = htmlspecialchars(strip_tags(utf8_encode($_GET['icon'])));

Damit wird ein XML Node erstellt:

<marker lat="$lat" lng="$lng" name="$name" adresse="$adresse" kategorie="$kategorie" icon="$icon"/>

und in der Datei data.xml geschrieben:

$w=@fwrite($f, $marker);

und eine Antwort ausgeben:

$newMarkerContent = "<div><b>Name</b> $name</div><div><b>Adresse</b> $adresse</div><div><b>Kategorie</b> $kategorie</div>";
2. Das Info-Fenster - Ausgabe:

Das Info-Fenster - Ausgabe

Für dieses Fenster ist aus der Datei map_functions.js die Funktion function retrieveMarkers() verantwortlich:

var html = '<div><b>Name</b> '
+ markers[i].getAttribute("name")
+ '</div><div><b>Adresse</b> '
+ markers[i].getAttribute("adresse")
+ '</div><div><b>Kategorie</b> '
+ markers[i].getAttribute("kategorie")
+ '</div>';