Good way to load multiple lat/long points from a database into google map markers?

Question

I have a table containing multiple addresses, including their Lat/Long coordinates, and I want to place many of these markers onto a google map at once, using asp.net webforms and Google Maps Javascript API V3.

The tutorials show how to add one marker:
http://code.google.com/apis/maps/documentation/javascript/overlays.html#Markers

 var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var marker = new google.maps.Marker({
      position: myLatlng, 
      map: map, 
      title:"Hello World!"
  });

My question is, after I've loaded the set of multiple addresses server side (codebehind), what is a good way to output this set into the html such that client side javascript can iterate the collection and place markers onto the map.

Update

If I already had created my set, what would be a decent way of pushing that out into the page's html at render time, without calling an external script? (Passing the complex filter parameters to the script would be complicated so I'd rather avoid this.) Should I literally just use a stringbuilder to construct a javascript function containing the proper json array and then append that function to the page? That would work, but it doesn't seem quite proper.

How many markers are you working with? The order of magnitude matters a lot. — Matt Ball

Daniel Vassallo Daniel Vassallo · Accepted Answer · 2010-07-16T06:44:41

You could go with the approach you are suggesting.

This is a very simple example showing how easy it is to plot multiple markers with the v3 API:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>

  <script type="text/javascript">

    var map;

    // Cretes the map
    function initialize() {
      map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
    }

    // This function takes an array argument containing a list of marker data
    function generateMarkers(locations) {
      for (var i = 0; i < locations.length; i++) {  
        new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map,
          title: locations[i][0]
        });
      }
    }
  </script>

</head> 
<body> 
  <div id="map" style="width: 500px; height: 400px;"></div>
</body>
</html>

Then to generate the markers you can dump the following script anywhere within your <body> tags.

<body> 
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    window.onload = function () {
      initialize();
      generateMarkers(
        ['Bondi Beach', -33.890542, 151.274856],
        ['Coogee Beach', -33.923036, 151.259052],
        ['Cronulla Beach', -34.028249, 151.157507],
        ['Manly Beach', -33.800101, 151.287478],
        ['Maroubra Beach', -33.950198, 151.259302]
      );
    };
  </script>
</body>

You would simply need to generate the array literal ['Bondi Beach', -33.890542, 151.274856] ... from your server-side data set, since the rest is static. Make sure that the last element does not end with a comma.

Good way to load multiple lat/long points from a database into google map markers?

Update

5 Answers