Jquery, XML and Google Map
- by EXPennD
Hi,
I'm integrating a Google Map in my website that user could add some thumbnails and details of their own house. Here's a code preview of what I want to happen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Jquery and Google Map
//
var locations = {};
function load() {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(47.614495, -122.341861), 13);
GDownloadUrl("markerdata.xml", 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 latlng = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var store = {latlng: latlng, name: name, address: address, type: type};
var latlngHash = (latlng.lat().toFixed(6) + "" + latlng.lng().toFixed(6));
latlngHash = latlngHash.replace(".","").replace(".", "").replace("-","");
if (locations[latlngHash] == null) {
locations[latlngHash] = []
}
locations[latlngHash].push(store);
}
for (var latlngHash in locations) {
var stores = locations[latlngHash];
if (stores.length > 1) {
map.addOverlay(createClusteredMarker(stores));
} else {
map.addOverlay(createMarker(stores));
}
}
});
}
function createMarker(stores) {
var store = stores[0];
var newIcon = MapIconMaker.createMarkerIcon({width: 32, height: 32, primaryColor: "#00ff00"});
var marker = new GMarker(store.latlng, {icon: newIcon});
var html = "<b>" + store.name + "</b> <br/>" + store.address;
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
function createClusteredMarker(stores) {
var newIcon = MapIconMaker.createMarkerIcon({width: 44, height: 44, primaryColor: "#00ff00"});
var marker = new GMarker(stores[0].latlng, {icon: newIcon});
var html = "";
for (var i = 0; i < stores.length; i++) {
html += "<b>" + stores[i].name + "</b> <br/>" + stores[i].address + "<br/>";
}
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
//]]>
description
I want this feature to be fully interactive. If possible user can drag and drop a marker to the location on the Google map and the description field would be enabled after adding the marker so user could add details and submit it.
Also here's my current situation. The reason why I want it to be done in XML is the Content Management System that I currently use for this project don't allow me to add Database and Php scripts. The only thing that I have access is I could add new HTML on the BODY section and also External Javascript on the HEAD section.
Sorry about the way I write it, it sounds like demanding. Its because I'm still learning Jquery.
Thanks everyone!
