plot markers on google maps with json and jquery
        Posted  
        
            by mark
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by mark
        
        
        
        Published on 2010-03-28T16:26:02Z
        Indexed on 
            2010/03/28
            16:33 UTC
        
        
        Read the original article
        Hit count: 441
        
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;
}
© Stack Overflow or respective owner