Connecting Json to Jquery to Add Markers in Google Map

Question

Can someone Help me because im stucked in the situation where i need to loop the json and add it to the google maps as markers but it only returns null

Is there a way to Connect this automatically to Json because im planning to have a Grid and set it to style="display: none;" to hide it and then fetch and read the Values in the Grid

Here is my Javascript

 <script type="text/javascript">
        var geocoder;
        var map;
        function initialize() {
            var minZoomLevel = 4;
            var zooms = 7;
            geocoder = new google.maps.Geocoder();
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: minZoomLevel,
                center: new google.maps.LatLng(38.50, -90.50),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            // Bounds for North America
            var strictBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(15.70, -160.50),
     new google.maps.LatLng(68.85, -55.90)
   );

            // Listen for the dragend event
            google.maps.event.addListener(map, 'dragend', function () {
                if (strictBounds.contains(map.getCenter())) return;

                // We're out of bounds - Move the map back within the bounds

                var c = map.getCenter(),
         x = c.lng(),
         y = c.lat(),
         maxX = strictBounds.getNorthEast().lng(),
         maxY = strictBounds.getNorthEast().lat(),
         minX = strictBounds.getSouthWest().lng(),
         minY = strictBounds.getSouthWest().lat();

                if (x < minX) x = minX;
                if (x > maxX) x = maxX;
                if (y < minY) y = minY;
                if (y > maxY) y = maxY;

                map.setCenter(new google.maps.LatLng(y, x));
            });


            // Limit the zoom level
            google.maps.event.addListener(map, 'zoom_changed', function () {
                if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
            });
        }

        function codeAddress() {
            var address = $('#workerGrid').find("input[name=shiftDay]");
            alert(address);
            $.each(address, function () {

                address.each(function (e) {
                    e.preventDefault();

                    geocoder.geocode({ 'address': address }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {

                            map.setCenter(results[0].geometry.location);
                            var marker = new google.maps.Marker({
                                map: map,
                                position: results[0].geometry.location,
                                title: address

                            });
                            if (results[0].geometry.viewport) {
                                map.setZoom(10);
                            }

                        }
                        else {
                            alert("Geocode was not successful for the following reason: " + status);
                        }
                    });
                });
            });
        }

        window.onload = function () {
            initialize();
            codeAddress();
        }

    </script>

and here is my Json :

 public JsonResult LoadWorkerList(string search)
        {
            var workerList = new List<Worker_Address>();

            // check if search string has value
            // retrieve list of workers filtered by search criteria
            var list = (from a in db.Worker_Address
                        where a.LogicalDelete == false
                        select a).ToList();



            List<WorkerAddressInfo> wlist = new List<WorkerAddressInfo>();
            foreach (var row in list)
            {
                WorkerAddressInfo ci = new WorkerAddressInfo
                {
                    ID = row.ID,
                    Worker_ID = row.WorkerID,
                    AddressLine1 = row.Address_Line1 + " " + row.Address_Line2+ " " +row.City + " "+ GetLookupDisplayValById(row.State_LookID),
                    //AddressLine2 = row.Address_Line2,
                    //City = row.City,
                    //State = GetLookupDisplayValById(row.State_LookID),
                    LogicalDelete = row.LogicalDelete

                };
                wlist.Add(ci);
            }

                var wolist = (from a in wlist
                              where a.LogicalDelete == false
                              select a).ToList();
                wlist = wolist;



            return Json(wlist.ToList().OrderBy(p => p.AddressLine1), JsonRequestBehavior.AllowGet);
        }

Hope someone can help me

Answer 1

I believe you can do it the other way around: Get your map, go in the config object and add your array of markers there.

Small example from what I got working last week (google maps v3):

proj.root.gmap3({
    marker: {
        values: markersList, // arrGeodesic 
        options: {
            icon: new google.maps.MarkerImage(cfg.markers.custom),
            draggable: false
        }
    }
);

My markers array was filled like this:

// 2.10 Get markers from ajax request
// @param (lat): float value of latitude
// @param (lng): float value of longitude
// @doc (ajax data): http://encosia.com/3-mistakes-to-avoid-when-using-jquery-with-aspnet-ajax/
// @doc (JSON.stringify): https://github.com/douglascrockford/JSON-js
ajaxGetMarkers: function (lat, lng) {
    var proj = this,
        json = {};

    if (lat && lng) {
        // param mapping
        json.country = proj.countries.val();
        json.postcode = proj.postcode.val();
        json.latitude = lat.toFixed(12);
        json.longitude = lng.toFixed(12);

        // ajax request
        $.ajax({
            url: cfg.ajaxUrls.locations, // '/GMAPS/Locations.aspx/GetLocations'
            data: JSON.stringify(json)
        }).done(function (data) {
            if (data && data.d) {
                proj.root.gmap3("clear", "markers");
                proj.loadMarkers(data.d.Locationslist);
            }
        });
    }
},

Hope it doesn't complicate things but this is how I can make LngLat objects out of the data you have ... in my example it has country and postalcode ... I'm sure you can achieve the same with your data ...

// 2.9 Load map
// @param (query): array [country, postcode]
loadMap: function (query) {
    var proj = this,
        options, loc, geocoder;

    // init
    if (query.length) {
        // 2.9.1 geocode
        geocoder = new google.maps.Geocoder();

        // 2.9.1 set address
        geocoder.geocode({ address: query.join(" ") }, function (result, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                // center map
                loc = result[0].geometry.location;
                options = $.extend({}, cfg.mapOptions, { center: loc });

                // set map options & markers
                proj.initMap(options);
                proj.ajaxGetMarkers(loc.lat(), loc.lng());
            }
        });
    }
},