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

Question

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>

Geocoding is more complicated than not geocoding. Did you try to make the required change? — geocodezip, Nov 28 '15 at 03:04

score 0 · Accepted Answer · edited May 23 '17 at 12:15

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>

Can an infoWindow be added when an icon (Lat/long data point) is clicked? I added -- new google.maps.InfoWindow({ content:"locations[i].addedbyme }); -- , , but think my problem is in calling the addDomListener incorrectly. — Don, Nov 29 '15 at 00:53

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

1 Answers1