Search code examples
javascriptgoogle-mapsgoogle-polyline

Modify script to use latitude / longitudes instead of address's


This demo script draws lines (polyline) on a google-map from one point out to all other points, however it uses address's for all points (except map center). How can this script be modified to use ALL latitude and longitude data instead of address's ?

<!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>

Solution

  • Removing the calls to the geocoder and replacing them with an array similar to question: Google Maps JS API v3 - Simple Multiple Marker Example, making the 0th location the "hub". Objects in the array have lat and lng properties so they can be used as LatLngLiteral objects:

    //add locations
    var locations = [
      {address: 60033, lat: 42.4444701, lng: -88.6144839}, 
      {address: 44145, lat: 41.4470451, lng: -81.9207423}, 
      {address: 03103, lat: 42.9561485, lng: -71.44181}, 
      {address: 30236, lat: 33.5213067, lng: -84.3226488}, 
      {address: 18106, lat: 40.5825021, lng: -75.6149893}, 
      {address: 64147, lat: 38.8524485, lng: -94.5469705}, 
      {address: 86401, lat: 35.1115663, lng: -113.8584737}, 
      {address: 75110, lat: 32.0302037, lng: -96.5143087}, 
      {address: 56001, lat: 44.1223003, lng: -93.9674371}, 
      {address: 80239, lat: 39.8086537, lng: -104.8337879}, 
      {address: 95776, lat: 38.6944843, lng: -121.6967438}];
    
    function initMap() {
        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
        });
    
        new google.maps.Marker({
            position: locations[0],
            title: ""+locations[0].address,
            map: map
        });
    
        for (var i = 1; i < locations.length; i++) {
    
            new google.maps.Marker({
                position: locations[i],
                title: ""+locations[i].address,
                map: map
            });
    
            new google.maps.Polyline({
                path: [
                locations[0],
                locations[i]],
                strokeColor: '#FF0000',
                geodesic: true,
                map: map
            });
        }
    }
    google.maps.event.addDomListener(window, 'load', initMap);
    html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px
    }
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <div id="map"></div>