My.I.T.Side

How to use Google Maps with multiple markers in ASP.NET MVC 3

Filed under ASP.NET MVC 3

If you load more then 20 markers in your google map page, it will only load 10 markers because google map api has limitations.
To solve this limitation problem we will use the google utility called MarkerManager.

Let's do a code:

First we need to include our scripts for Google Maps API and MarkerManager.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/src/markermanager.js"></script>

In my database table i have complete address field,  latitude field, and longitude field and
I'm using Massive by Rob Conery for my data access tool 

In Controller:

public ActionResult GoogleMaps(int id) {
            IEnumerable<dynamic> result = null;
            dynamic table = new Maps();
            result = table.All();
            return View(result);
}

In my View:

<h2>MAPS</h2>
<div id="map_canvas" style="height: 400px;"></div>

And add your Script for loading the maps

<script language="javascript" type="text/javascript">
    var map;
    var mgr;

    function initialize() {
        var myOptions = {
            zoom: 8,
            center: new google.maps.LatLng(32.9756415, -96.8899636),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        mgr = new MarkerManager(map);
        var infoWindow = new google.maps.InfoWindow({ content: "Cargando..." });
        google.maps.event.addListener(mgr, 'loaded', function () {
            @foreach (var item in Model) {
                <text>
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(@item.Latitude, @item.Longitude),
                    html: "@item.CompleteAddress"
                });

                google.maps.event.addListener(marker, "click", function () {
				    infoWindow.setContent(this.html);
				    infoWindow.open(map, this);
			    });

                mgr.addMarker(marker, 0);
                </text>
            }
            mgr.refresh();
        });
    }
    $(document).ready(function () {
        initialize();
    });
</script>