plot markers on google maps with json and jquery
- by mark
I am trying to plot the markers as defined in a json file om Google Maps but they don't show on the map. Can somebody help me with this problem?
This is the Json file:
http://sionvalais.com/gmap/markers/
This is the Javascritp function:
function loadMarkers() {
var bounds = map.getBounds();
var zoomLevel = map.getZoom();
$.post("/gmaps/markers/index.php", {zoom: zoomLevel,
swLat: bounds.getSouthWest().lat(), swLon: bounds.getSouthWest().lng(),
neLat: bounds.getNorthEast().lat(), neLon: bounds.getNorthEast().lng()},
function(data) {
processMarkers(data, _smallMarkerSize);
}, "json"
);
}
function processMarkers(webcams, markerSize) {
var marker = null;
var markersInView = new Array();
var idsInView = new Array();
// Loop through the new webcams
for (var i = 0; i < webcams.length; i++) {
var idx = markers.indexOf(webcams[i].id);
if (idx == -1) {
var info_html = "<table class='infowindow'>";
info_html += "<tr><td class='img'>";
info_html += "<img src='" + webcams[i].smallimg + "' /><td>";
info_html += "<td><p><b>" + webcams[i].loc + "</b>";
info_html += "<br /><a href='/webcam/" + webcams[i].url + "' target='_blank'>Show webcam</a></p></td></tr>";
info_html += "</table>";
marker = new WebcamMarker(new GLatLng(webcams[i].latitude, webcams[i].longitude),
{image: "" + webcams[i].smallimg + "",
height: markerSize, width: markerSize});
marker.myhtml = info_html;
map.addOverlay(marker);
markersInView[webcams[i].id] = marker;
} else {
markersInView[webcams[i].id] = markers[webcams[i].id];
}
idsInView.push(webcams[i].id);
}
// Now remove the markers outside of the viewport
for (var i = 0; i < webcamids.length; i++) {
var idx = markersInView.indexOf(webcamids[i]);
if (idx == -1) {
marker = markers[webcamids[i]];
map.removeOverlay(marker);
}
}
markers = markersInView;
webcamids = idsInView;
}
