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

Last Reply 11 months ago By dharmendr

Posted 11 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 11 months ago

Hi bakhtawar,

Please share what the result returns.


Posted 11 months ago Modified on 11 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 11 months ago

Hi bakhtawar,

As you have solved mark your reply as answer.

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html