Hallo alle zusammen! Folgendes: Ich habe eine Map eingebunden, welche mir Marker anzeigt, die vorher in einer MySql-Tabelle hinterlegt wurden.
Das realisiere ich durch folgendes script:
<script type="text/javascript">
var iconRed = new GIcon();
iconRed.image = '
http://labs.google.com/ridefinder/images/mm_20_red.png';
iconRed.shadow = '
http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconRed.iconSize = new GSize(12, 20);
iconRed.shadowSize = new GSize(22, 20);
iconRed.iconAnchor = new GPoint(6, 20);
iconRed.infoWindowAnchor = new GPoint(5, 1);
var customIcons = [];
customIcons["restaurant"] = iconBlue;
customIcons["bar"] = iconRed;
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setUIToDefault();
map.setCenter(new GLatLng(-33.867139,151.207114), 14);
GDownloadUrl("test2.php", function(data) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(point, name, address, type);
map.addOverlay(marker);
}
});
}
}
function createMarker(point, name, address, type) {
var marker = new GMarker(point, customIcons[type]);
var html = "<b>" + name + "</b> <br/>" + address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
</script>
Jetzt möchte ich gern zusätzlich, dass wenn man in die karte klickt, ein kleines fenster sich öffnet, ich name, adresse und typ eingebe und dieses in der Datenbank gespeichert wird.
Seperat hab ichs hinbekommen durch dieses Script:
<script type="text/javascript">
var marker;
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(-33.867139,151.207114), 14);
GEvent.addListener(map, "click", function(overlay, latlng) {
if (latlng) {
marker = new GMarker(latlng, {draggable:true});
GEvent.addListener(marker, "click", function() {
var html = "<table>" +
"<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
"<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
"<tr><td>Type:</td> <td><input type='text' id='type'></td></tr>" +
"<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
marker.openInfoWindow(html);
});
map.addOverlay(marker);
}
});
}
}
function saveData() {
var name = escape(document.getElementById("name").value);
var address = escape(document.getElementById("address").value);
var type = document.getElementById("type").value;
var latlng = marker.getLatLng();
var lat = latlng.lat();
var lng = latlng.lng();
var url = "mapeintrag.php?name=" + name + "&address=" + address +
"&type=" + type + "&lat=" + lat + "&lng=" + lng;
GDownloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
marker.closeInfoWindow();
document.getElementById("message").innerHTML = "Dein Ort wurde hinzugefügt!";
}
});
}
</script>
Wie bekomme ich jetzt beides miteinander kombiniert? Nutze weitestgehend die googleMaps-Tutorials, kenne mich nicht wirklich gut mit JS aus. Also was eine Funktion etc ist, ist mir schon bekannt...das wars dann aber auch schon :)
Hat wer nen Tip?
Grüße, David.