MVC 4 and Google Maps API v3

Question

I'm incorporating Google Maps into my MVC 4 application. Fairly straightforward to do. However, I have a question concerning the best way to add multiple markers dynamically. My users will search for a list of items for sale, via a call to an action method on a controller, and I want to be able to show them the items and the location of each on the map. What I'm not certain of is how or the best way, to add markers dynamically to a map, which is all JavaScript in the client. Essentially I'd like to be able to send all the marker information from the MVC server code to the client, but not sure it can or should be done that way.

Answer 1

In the project I'm working on right now, this is how we handle it:

Let the main ViewModel be called FooViewModel.

ViewModels:

public class FooViewModel
{
    // Your search results:
    public IEnumerable<FooWithLocationViewModel> Foos { get; set; }

    // Properties for your search filter:
    public decimal? MaxPrice { get; set; }
    public CityEnum? City { get; set; }
    ... 
}

public class FooWithLocationViewModel
{
    public string Name { get; set; }
    public decimal Price { get; set; }
    ...
    public double Latidude { get; set; }
    public double Longitude { get; set; }
    ...
}

In the view, there is a <div> for each FooWithLocationViewModel. We will make use of data-* attributes which are valid in HTML5:

View:

@model FooViewModel

...

@foreach(FooWithLocationViewModel foo in Model.Foos)
{
    <div class="foo" data-latitude="@(foo.Latitude)" 
        data-longitude="@(foo.Longitude)">
        <span>@foo.Name</span>
        <span>@foo.Price</span>
        ...
    </div>
}

<div id="map-canvas"></div>

Now, it is time for JavaScript, I am assuming that you are using JQuery:

Initializing the map, adding the markers and storing them in markers array:

function initialize() {
    var foos = $(".foo");
    var markers = new Array();
    var mapOptions = {
       ...
    }};
    var mapCanvas = document.getElementById('map-canvas');
    if (mapCanvas != null) {
        map = new google.maps.Map(mapCanvas, mapOptions);

        $.each(foos, function (key, value) {
            markers[key] = new google.maps.Marker({
              map: map,
              draggable: false,
              animation: google.maps.Animation.DROP,
              position: new google.maps.LatLng(
                  Number($(value).attr("data-latitude")), 
                  Number($(value).attr("data-longitude")
               ));
            });

            google.maps.event.addListener(markers[key], 'click', function () {
                // If you need this...
            });
        });
    }
}

What's good about this approach is, everything is done in the function that initializes your Google Map. Thus your script does not have to be embedded in your View. We are using an HTML5 friendly approach. And it is simple.

Answer 2

Use the web API and handle it all asynchronously. Pass a JSON object back to the client, parse out your info, remove your old markers and add the new ones.

EDIT after your comment:

If you post some of what you've tried and not been able to get to work then we can help you with the problems you're running into. If you're just getting started:

http://www.asp.net/web-api - Great tutorials on using the Web API http://angularjs.org/ - Check out Angular for the GET request (http://docs.angularjs.org/api/ng.$http) and binding your results to the UI