Google Maps geocoding Multiple Lines

Question

I am trying to draw multiple geodesic polyline with Google Maps JavaScript API from multiple location pairs. I found 98% of what I'm looking for here (http://stackoverflow.com/questions/2994424/google-maps-geocoding-address-to-glatlng) but I just can't figure out how to add additional points and additional lines (ex also show line between Chicago, US and Los Angeles, US). Thanks for any help anyone can provide.

javram · Accepted Answer · 2012-04-30T22:43:25.210

New update, this one puts the destination point encoding into a separate function, and makes each geocoding call independently. Should be much more scalable than trying to nest the callback procedures.

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
  <title>Google Maps API Geocoding Demo</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 1280px; height: 1024px;"></div>

  <script type="text/javascript">
//add locations
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: new google.maps.LatLng(35.00, -25.00),
      mapTypeId: google.maps.MapTypeId.TERRAIN
    });

    var address1 = '60033';

    var gc = new google.maps.Geocoder();
    gc.geocode({'address': address1}, function (res1, status) {

        var hub = res1[0].geometry.location;
        new google.maps.Marker({
            position: res1[0].geometry.location,
            map: map
          });

        geocodeLine(hub, '44145');  
        geocodeLine(hub, '03103');
        geocodeLine(hub, '30236');
        geocodeLine(hub, '18106');
        geocodeLine(hub, '64147');
        geocodeLine(hub, '86401');
        geocodeLine(hub, '75110');
        geocodeLine(hub, '56001');
        geocodeLine(hub, '80239');
        geocodeLine(hub, '95776');
    });   

    function geocodeLine(hub, address)
    {
        var gc = new google.maps.Geocoder();

        gc.geocode({'address': address}, function (res, status) { 
            if (status == google.maps.GeocoderStatus.OK) {

              new google.maps.Marker({
                position: res[0].geometry.location,
                map: map
              }); 

              new google.maps.Polyline({
                path: [
                  hub,
                  res[0].geometry.location
                ],
                strokeColor: '#FF0000',
                geodesic: true,
                map: map
                });
            }
        });
    }
  </script>
</body>
</html>

Thank you VERY much for the reply. The only issue with the example you sent is that it is doing all of the addresses linearly. Is there a way to have them each be unique? For instance, one line from London to NY and another from Chicago to LA. The code is generating London to NY to Chicago to LA. What if I didn't want the NY to Chicago leg? Again, thanks a TON! — Scott Orbin, Apr 30 '12 at 16:32
You would need to create multiple polylines in that case, since a polyline represents a continuous line, to have two lines, you would need to create two polylines. I have placed an example showing what I mean in the answer above. — javram, Apr 30 '12 at 17:10
You're the man! Thanks again for all the help. Another quick question for you. I have coded this for my needs, but I seem to running into a bit of a wall when I add too many points. If you look at http://www.maptest.freehosting.com/chi.html I made the map I was trying to make, except I need to add one more point. But when I try and add the 12th point it doesn't work. Any idea what could be causing this? Is it a google thing, a script thing or an user error (me)? Thanks. — Scott Orbin, Apr 30 '12 at 20:23
See my updated solution (again) :) Now that I understand what you are trying to do better, this solution should be much more scalable. — javram, Apr 30 '12 at 22:44

Google Maps geocoding Multiple Lines

1 Answers1