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: 358

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

Related posts about google-maps

Related posts about jQuery