How to get asp.net mvc controller to talk with google maps api - Adding markers dynamically

Question

I am working with the Google Maps API. I have the map displaying on my page, I can add markers to it manually, everything is working correctly.

Now I need to build a marker list from mvc and figure out how to pass it back to the map through asp.net MVC. Everything I need for the marker list is contained in the dtDealer_List shown below.

foreach (DataRow row in dtDealer_List.Rows)
      {
          dealer_list dl = new dealer_list();
          dl.address = row["address"].ToString();
          .......
          lstDealer_List.Add(dl);
      }

I'm not sure on how to pass this list back to the javascript function.

function init_map(map_canvas_id, lat, lng, zoomLevel) {
            var myLatLng = new google.maps.LatLng(lat, lng);

            var options = {
                zoom: zoomLevel,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.HYBRID
            };

            var map_canvas = document.getElementById(map_canvas_id);

            var map = new google.maps.Map(map_canvas, options);
        }

Do I need to pull out the dtDealer_List into a ajax call or something?

do you have the dtDealer_List ready on page load? If so you can just use it as the model or send it in the ViewBag. If not, you'll need to use AJAX — Jonesopolis
– Jonesopolis, Commented Oct 7, 2014 at 16:41
dtDealer_List is passed through to the page as the model. How can I use that to populate javascript/jQuery function call? @Jonesy — James Wilson
– James Wilson, Commented Oct 7, 2014 at 16:44
@Jonesy I'll play around with it found a couple of posts on passing model to javascript. Thanks for the idea. — James Wilson
– James Wilson, Commented Oct 7, 2014 at 16:56
I added a solution - took me a bit to remember razor/javascript syntax — Jonesopolis
– Jonesopolis, Commented Oct 7, 2014 at 16:59

Jonesopolis · Accepted Answer · 2014-10-07 16:57:03Z

1

add a small script at the top of your page to set up a javascript array from your list:

@model List<string>

<script>
    var addresses = [];
    @foreach (var address in Model)
    {
        <text>addresses.push('@address')</text>
    }
    console.log(addresses);
</script>

then you should be able to access the global addresses array where you need

answered Oct 7, 2014 at 16:57

Jonesopolis

25.4k12 gold badges72 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Wilson Over a year ago

I will play around with that and report back in a little bit, thank you.

Collectives™ on Stack Overflow

How to get asp.net mvc controller to talk with google maps api - Adding markers dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related