Error: Google map Content window on marker shows same result for each marker

Last Reply 4 months ago By dharmendr

Posted 5 months ago

I try this code for plotting data on google map and I plot it successfully but when I click on marker then small content window is open but all windows has same data .

Here is my code :

success: function (result) {
    var d = JSON.parse(result.d).response;

    console.log(JSON.parse(result.d).response);
    $("#tabledata").empty();
    if (d.length > 0) {
        $("#tabledata").append("<thead><tr><th>No</th><th>Status</th><th>Longitude</th><th>Latitude</th></tr></thead>");

        for (var i = 0; i < d.length - 1; i++) {
            if (d[i] !== null) {
                $("#tabledata").append("<tbody><tr><td>" +
                        d[i][0] + "</td> <td>" +
                        d[i][1] + "</td> <td>" +
                        d[i][2] + "</td> <td>" +
                        d[i][3] + "</td></tr></tbody>");

                Status = d[i][1];
                debugger;
                RegNo = d[i][0];
                latit = d[i][4];
                longi = d[i][3];
            }
        }
    }
    else {
        $("#tabledata").hide();
    }
    alert(d.length);
    var map;
    debugger;
    var latlng = new google.maps.LatLng(59.0895898, 78.0998546);
    debugger;
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    for (i = 0; i < d.length - 1; i++) {
        var data = d[i]
        var myLatlng = new google.maps.LatLng(d[i][4], d[i][3]);
        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Click me'

        });
        var infowindow = new google.maps.InfoWindow({
            content: 'No:' + d[i][0] + '<br>Status:' + d[i][1] + '<br>Lat:' + d[i][3] + 'Long:' + d[i][4]
        });
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, marker, data);
        });

    }
}

There is multiple marker on map when i click marker then window display but when i click on any other marker then same data is display and also all markers have same data when i click on marker but in table there is different data

Posted 5 months ago

Hi bakhtawar,

Please share what the result returns.


Posted 5 months ago Modified on 5 months ago

ok now i done this .. i done with all markers with content window are display on page load and this is also i want and i done this.

this is what i try

function (result) {
    var d = JSON.parse(result.d).response;
    console.log(JSON.parse(result.d).response);
    $("#tabledata").empty();
    if (d.length > 0) {
        $("#tabledata").append("<thead><tr><th>No</th><th>Date</th><th>Status</th><th>Longitude</th><th>Latitude</th></tr></thead>");
        for (var i = 0; i < d.length - 1; i++) {
            if (d[i] !== null) {
                $("#tabledata").append("<tbody><tr><td>"
                + d[i][0] + "</td> <td>"
                + d[i][1] + "</td> <td>"
                + d[i][2] + "</td> <td>"
                + d[i][3] + "</td> <td>"
                + [i][4] + "</td></tr></tbody>");
                Status = d[i][2];
                RegNo = d[i][0];
                latit = d[i][4];
                longi = d[i][3];
            }
        }
    }
    else {
        $("#tabledata").hide();
    }

    alert(d.length);
    var map;
    var latlng = new google.maps.LatLng(21.0895898, 69.0998546);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    for (i = 0; i < d.length - 1; i++) {
        var data = d[i]
        var myLatlng = new google.maps.LatLng(d[i][5], d[i][4]);
        var marker = new google.maps.Marker({
            position: myLatlng,
            icon: "/images/car.png",
            map: map,
            title: 'Click me'

        });

        var infowindow = new google.maps.InfoWindow({
            content: 'No:' + d[i][0] + '<br>Status:' + d[i][2] + '<br>Lat:' + d[i][4] + 'Long:' + d[i][3]
        });
        google.maps.event.addListener(marker, 'mouseclick', function () {
            infowindow.open(map, marker, data);
        });
        infowindow.open(map, marker, data);

    }
}
                      

 


Posted 4 months ago

Hi bakhtawar,

As you have solved mark your reply as answer.

I agree, here is the link: http://e-iceblue.com/free-api