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:
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:
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>';