在谷歌地图上显示多个标记

Question

I try to display markers on google map there is two rows on datatable and there is longitude and latitude columns also in that row i try to display according to these lat and long i also do this through loop in jquery but this show error

UPDATE

JQUERY CODE

I try this code and 1 marker is display on map but there is 2 rows on datatable

1 marker is display beacuse i hard code lat and long value

<script type="text/javascript">
        $(function () {

            var latit = '21.19055';
            var longi = '69.84629';
            var obj = {};
            obj.latit = latit;
            obj.longi = longi;
            getdata(obj);
            return false;
        });

        function getdata(obj) {
            var RegNo = '';
            var Status = '';
            var latit = '';
            var longi = '';
            $.ajax({
                type: "POST",
                url: "home.aspx/info",
                contentType: "application/json;charset=utf-8",
                data: "{'id':'442'}",
                datatype: "json",
                async: true,
                cache: false,
                success: function (result) {

                    alert("map2");

                    $("#tabledata").empty();

                    var table_data = JSON.parse(result.d).response;

                    console.log(JSON.parse(result.d));

                    $("#tabledata").empty();

                    if (table_data.length > 0) {

                 $("#tabledata").append(

      "<thead><tr><th>No</th><th>Longitude</th><th>Latitude</th></tr></thead>");
                   for (var i = 0; i < table_data.length; i++) {

                   if (table_data[i] !== null) {

                   $("#tabledata").append("<tbody><tr><td>" +
                   table_data[i][0] + "</td> <td>" +

                   table_data[i][1] + "</td> <td>" +

                   table_data[i][2] + "</td></tr></tbody>");



                   No = table_data[i][0];

                  latit = table_data[i][2];

                  longi = table_data[i][1];
                            }
                        }
                    }
                    else {
                        $("#tabledata").hide();
                    }

                    var map;
                    debugger;
        var latlng = new google.maps.LatLng(74.0895898, 47.0998546);
                    debugger;
                    var myOptions = {
                        zoom: 8,
                        center: latlng,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    debugger;
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                    debugger;
                   var marker = new google.maps.Marker
                    (
                        {
        position: new google.maps.LatLng(obj.latit, obj.longi),
                            map: map,
                            title: 'Click me'
                        }
                    );
                    debugger;
                    var infowindow = new google.maps.InfoWindow({
                        content: 'No:' + No,
                        title: 'tr'
                    });
                    google.maps.event.addListener(marker, 'click', function () {
                        infowindow.open(map, marker);
                    });
                },
                error: function (error) {
                    alert(error);
                    alert("error");
                }
            });
        }     

</script>

in above script this line data: "{'id':'442'}", because on info method there is string id so i hard this id on this id . but i dont want hard code beacuse there is not 1 id on table so how i save this id on session on call on this line

any solution?

Answer 1

Here is the solution

<div id="map" style="height: 400px; width: 500px;">
</div>
<script type="text/javascript">
    var geocoder = new google.maps.Geocoder();
    var address = ["Bondi Beach", "Coogee Beach", "nidhi hospital, ahmedabad", "Sal hospital, ahmedabad", "Maroubra Beach"];
    var latitude = [],
        longitude = [];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: new google.maps.LatLng(23.049356, 72.52376000000004),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;
    console.log(address.length)
    for (var i = 0; i < address.length; i++) {

        geocoder.geocode({
            'address': address[i]
        }, function(results, status) {

            console.log(1)
            if (status == google.maps.GeocoderStatus.OK) {
                latitude[i] = results[0].geometry.location.lat();
                longitude[i] = results[0].geometry.location.lng();

                console.log(latitude[i], longitude[i])

                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(latitude[i], longitude[i]),
                    map: map
                });
            }

        })
    }

</script>

Answer 2

Your solution is incorrect from a design point of view. There is absolutely no need to create a table on a .Net side.

You should create a DTO with required fields (Eg.'No', 'DateTime', 'Status') populate it in the Controller (or in a Factory of sort) and set your API to return Collection<yourDTO> .

If you do need to create a table, you can do so with jQuery later.

Anyhow, after you call your API you will get a bunch of JSON objects which could be easily iterated over to create a table or markers for Google map.

It's seems that you are lacking a little bit of theory base.

ASP website would be a good point to start: http://www.asp.net/web-api/overview/data/using-web-api-with-entity-framework/part-5