How to add more marker to google map api v3 with dynamic call json

Question

i have an .net mvc 3 website, in my StoreModel:

 public class StoreModels 
{
    public string StoreName { get; set; }
    public decimal LongTit { get; set; }
    public decimal LatTit { get; set; }
    public int zIndex { get; set; }
}

and in my Home controller

 public ActionResult getBeach() {
        List<StoreModels> lstStore;
        StoreModels strMod = new StoreModels();

        lstStore = new List<StoreModels>() { 
            new StoreModels(){ StoreName = "cua hang 1",
                LatTit=20.998324m,
                LongTit=105.813708m,
                zIndex=1
            },
            new StoreModels(){ StoreName = "cua hang 2",
                LatTit=220.998485m,
                LongTit=105.812903m,
                zIndex=2
            },
            new StoreModels(){ StoreName = "cua hang 3",
                LatTit=20.982342m,
                LongTit=107.887392m,
                zIndex=3
            }
            };
        return Json(lstStore, JsonRequestBehavior.AllowGet);


    }

and in my index:

<script type="text/javascript">
$(document).ready(function () {
    // execute
    (function () {
        // map options
        var mapOptions = {
            zoom: 15,
            center: new google.maps.LatLng(20.998825, 105.81473),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map-canvas'),
                                      mapOptions);
        var image = {
            url: 'img/here.png',

            size: new google.maps.Size(50, 50),

            origin: new google.maps.Point(0, 0),

            anchor: new google.maps.Point(0, 32)
        };
        var shape = {
            coord: [1, 1, 1, 20, 18, 20, 18, 1],
            type: 'poly'
        };
        var infowindow;
        $.getJSON('Home/getBeach', null, function (model) {
            for (var i = 0; i < model.length; i++) {
                var myLatLng = new google.maps.LatLng(model[i].LatTit,model[i].LongTit);
                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon: image,
                    shape: shape,
                    title: model[i].StoreName,
                    zIndex: i + 1,
                });
                google.map.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
        });
    })();
});

i saw some example for process that in here and here but in my website, only one marker show on the maps.

Any help is greatly appreciated!

score 0 · Accepted Answer · answered Nov 07 '13 at 05:49

0

Looks like you problem might be with the longitude/latitude data. Trying passing them in without the m at the end.

       new StoreModels(){ StoreName = "cua hang 2",
            LatTit=220.998485,
            LongTit=105.812903,
            zIndex=2
        }

or change this line of Javascript by adding in parseFloat() to do the same thing:

var myLatLng = new google.maps.LatLng(parseFloat(model[i].LatTit),parseFloat(model[i].LongTit));

answered Nov 07 '13 at 05:49

ericjbasti

2,085
17
19

thanks for reply. but i don't think like this because if Latitude and Longtitude is wrong, why 'Cua hang 1' is showing on the map. – Hello Sun Nov 07 '13 at 06:07
Can you share the JSON object that you get back from calling `$.getJSON('Home/getBeach'...`, I'm sure the answer is in there. – ericjbasti Nov 07 '13 at 14:47
Ok. I found problem in "new StoreModels(){ StoreName = "cua hang 2", LatTit=220.998485m, LongTit=105.812903m, zIndex=2 }," lattit = 220.220.998485m is wrong thanks for your support! – Hello Sun Nov 08 '13 at 07:16

How to add more marker to google map api v3 with dynamic call json

1 Answers1