How to put Multiple Markers in Google Map in MVC 4

source article: http://blog.myitside.com/post/2012/01/20/How-to-use-Google-Maps-with-multiple-markers-in-ASPNET-MVC-3.aspx

* In my Controller, 
  public ActionResult Map()
  {
    IEnumerable<Place> places = getAllPlaces();
    return View(places);
  }  

* In Map.cshtml razor view, 

@model IEnumerable<Place>
<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>

<script language="javascript" type="text/javascript">
   var map;    
   var mgr;    
   function initialize() {
        var myOptions = {
            zoom: 2,
            center: new google.maps.LatLng(0, 0),
            mapTypeId: google.maps.MapTypeId.HYBRID
        };
        map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
        mgr = new MarkerManager(map);
        var infoWindow = new google.maps.InfoWindow({ content: "contents" });
        google.maps.event.addListener(mgr, 'loaded', function () {
            @foreach (var place in Model) {
                <text>
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(@place.Latitude, @place.Longitude),
                    html: "@place.Link"
                });

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

                mgr.addMarker(marker, 0);
                </text>
            }
            mgr.refresh();
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="googleMap"></div>
Advertisements

Data Visualization Gallery from USA Census Bureau

DataViz Gallery,  USA Census Bureau websites provides a number of interactive data access/visualization tool that shows census data in many categories.

They also provide Census Data APIs for developers to access data, send/recv query requests/responses, and JSON scripts as well.

CoastlineCountyPopulation

Their web pages are well established and data sets are comparatively well presented on the public domain. For instance, the captured image above is from Coastline County Population, which enables end-users to control the slider at the bottom to show the changes in time (years) and the accumulated population in coastline counties in USA.

Most of the visualization here are, however, just 2D plain graphs that are just for 1 or 2D data arrays. It would be much better and effective if there are some fast & light-weighted 3D interactive visualization which provides more interactive controls for the end-users for in-depth data analysis and exploration. But still, data sets here are very well presented in my opinion, as a Data Visualization Expert, Senior Software Engineer, and an Assistant Professor in Computer Science.