ansaurus

Question

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

Answer 1

A:

try this:

http://www.svennerberg.com/2009/01/handling-large-amounts-of-markers-in-google-maps/

SteveCav 2010-07-16 04:14:26

Answer 2

A:

I think that the obvious approach will work fine. After you initialize the map you can make an asynchronous request to a script that produces a JSON array of lat long coordinates. Iterate over that list placing a marker at each coordinate, or hand off each marker to the marker manager as suggested by Steve.

If you have too many markers to make this approach feasible, then you should load the markers incrementally. Your task will then be to decide when to trigger the asynchronous request which will add the markers for a given subset of the map.

2010-07-16 04:23:45

Answer 3

+1 A:

Here's what I was able to get from the Google Maps API v3 Group a while back, for working with tens of thousands of points - specifically, check out what Paul Kulchenko threw together. It's pretty awesome.

http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/59a52aecec860e75?pli=1

Matt Ball 2010-07-16 04:24:43

Answer 4

+1 A:

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.

Daniel Vassallo 2010-07-16 06:44:41

Excellent...but, does this run as is, or does: generateMarkers(locations); need to be called at the end of initialize()...and "generateMarkers([" should actually be "locations([", or am I mistaken?

tbone 2010-07-16 13:10:41

@tbone: My previous example had a small flaw. It's better if you use `window.onload` as the updated answer. I've tested it and it works. You can put the `window.onload` script block anywhere in your HTML. As for the argument of `generateMarkers()` you can pass an "anonymous" array using the [array literal notation](https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Core_Language_Features#Literals) as in my example.

Daniel Vassallo 2010-07-16 14:21:57

Cool, thanks for the update, works great!

tbone 2010-07-16 21:44:07

ansaurus

tags:

views:

answers:

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

Update

related questions