create elevation chart from markers and a HUB

Question

This Javascript plots a HUB marker with a ployline from the HUB to all surrounding markers. I would like to plot an elevation chart from the HUB to the marker a user clicks. Without the elevation portion the script runs, with the elevation portion nothing display, not the map and not the elevation chart.

<html>
<head>
<title>HUB</title>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
<center>
<div id="map" style="width: 900px; height: 600px;"></div>
<script type="text/javascript">
<div id="elevation_chart" style="width: 900px; height: 600px;"></div>
<script type="text/javascript">
var locations = [ 
{xtitle: 'Hub title',      xinfo: 'Hub infowindow',      lat: 38.624365, lng: -90.18503 },
{xtitle: 'Marker 1 title', xinfo: 'Marker 1 infowindow', lat: 38.920056, lng: -90.105111 },
{xtitle: 'Marker 2 title', xinfo: 'Marker 2 infowindow', lat: 38.688667, lng: -89.560639 },
{xtitle: 'Marker 3 title', xinfo: 'Marker 3 infowindow', lat: 38.416944, lng: -90.433028 },
{xtitle: 'Marker 4 title', xinfo: 'Marker 4 infowindow', lat: 38.692667, lng: -90.665944 }
            ];
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), 
{
zoom: 9,                      
center: new google.maps.LatLng(locations[0]),
mapTypeId: google.maps.MapTypeId.TERRAIN
});      // ---- END OF var map FUNCTION

// CREATE HUB MARKER & HUB INFOWINDOW
var marker = new google.maps.Marker({
position: locations[0],
title: locations[0].xtitle,
map: map
});

 var infowindow = new google.maps.InfoWindow({
 content: locations[0].xinfo 
 });

// CREATE SURROUNDING MARKERS AND POLYLINE TO HUB
for (var i = 1; i < locations.length; i++) 
{ createMarker(i); }; 

function createMarker(i) {
var Xmarker = new google.maps.Marker({
    map: map,
    position: locations[i],
    title: locations[i].xtitle,
});
var infowindow = new google.maps.InfoWindow({
    content: locations[i].xinfo 
});
google.maps.event.addListener(Xmarker, 'click', function() {
    infowindow.open(map,Xmarker);
});                       

new google.maps.Polyline({
path: [ locations[0], locations[i] ],
strokeColor: '#cc0000',
strokeWeight: '3',
geodesic: true,
map: map
 });

 }  //  END OF createMarker(i) FUNCTION

marker.addListener('click', function() {
infowindow.open(map, marker);
map.setCenter(marker.getPosition());
 });

               };   // END OF initMap() FUNCTION


function drawPath() {

// Create a new chart in the elevation_chart DIV.
chart = new  google.visualization.ColumnChart(document.getElementById('elevation_chart'   ));

var path = new Array;
path.push(locations[0], locations[i]);


// Create a PathElevationRequest object using this array.
var pathRequest = {
'path': path,
'samples': 256
}

// Initiate the path request.
elevator.getElevationAlongPath(pathRequest, plotElevation);
}

// Takes an array of ElevationResult objects, draws the path on the map
// and plots the elevation profile on a Visualization API ColumnChart.
function plotElevation(results, status) {
if (status == google.maps.ElevationStatus.OK) {
elevations = results;

// Extract the elevation samples from the returned results
// and store them in an array of LatLngs.
var elevationPath = [];
for (var i = 0; i < results.length; i++) {
  elevationPath.push(elevations[i].location);
}

// Extract the data from which to populate the chart.
// Because the samples are equidistant, the 'Sample'
// column here does double duty as distance along the
// X axis.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Sample');
data.addColumn('number', 'Elevation');
for (var i = 0; i < results.length; i++) {
  data.addRow(['', elevations[i].elevation]);
}

// Draw the chart using the data within its DIV.
document.getElementById('elevation_chart').style.display = 'block';
chart.draw(data, {
  width: 640,
  height: 200,
  legend: 'none',
  titleY: 'Elevation (m)'
});
}
}                 
google.maps.event.addDomListener(window, 'load', initMap);
</script>
<br /></body></html>

I don't see any code in your question that uses the elevation service. What have you tried? — geocodezip, Dec 19 '15 at 21:54
related question: [Create Elevation profile from polyline coordinate array](http://stackoverflow.com/questions/11008284/create-elevation-profile-from-polyline-coordinate-array/) — geocodezip, Dec 19 '15 at 22:05
Where do you want to display the chart? In the marker infowindow? In another div on your page? — geocodezip, Dec 19 '15 at 22:37
I would like to display the elevation data in another div on the page. I tried elevation code from multiple examples, but failed and now I am more confused than when I started. — Don, Dec 19 '15 at 23:44
I don't see a div in the posted code to display the elevation chart in. I do see two divs with id="map" (which is not valid in HTML). Where is the code that you tried to display the chart that failed (if you tried many, the one that you thought stood the best chance of working)? — geocodezip, Dec 19 '15 at 23:47
I tried multiple attempts, every attempt failed to display the map I had, and the elevation chart did not display. All my results were terrible (so bad I didn't include), I don't think any of them were even close. Thanks for pointing out the 2 id's, the last one was unintentional. — Don, Dec 20 '15 at 00:11
Why isn't this a duplicate of [Create Elevation profile from polyline coordinate array](http://stackoverflow.com/questions/11008284/create-elevation-profile-from-polyline-coordinate-array/)? You have multiple paths, but the principle is the same. — geocodezip, Dec 20 '15 at 00:39
When I try to duplicate the code (Create Elevation profile from polyline coordinate array) for my use, nothing displays (see edited code). — Don, Dec 20 '15 at 01:24
[I see a map with that code](http://jsfiddle.net/twtfdoft/1/). You don't seem to be calling drawPath anywhere. — geocodezip, Dec 20 '15 at 01:37

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

To have multiple sources for the chart, you need to keep references to the various polylines and pass something into the draw function to indicate which polyline to draw the chart for.

One option push the polylines onto an array associated with each of the "non-HUB" markers:

  function createMarker(i) {
    var Xmarker = new google.maps.Marker({
      map: map,
      position: locations[i],
      title: locations[i].xtitle,
    });
    var infowindow = new google.maps.InfoWindow({
      content: locations[i].xinfo
    });
    google.maps.event.addListener(Xmarker, 'click', function() {
      infowindow.open(map, Xmarker);
      drawPath(i);
    });

    var polyline = new google.maps.Polyline({
      path: [locations[0], locations[i]],
      strokeColor: '#cc0000',
      strokeWeight: '3',
      geodesic: true,
      map: map
    });
    polylines[i] = polyline;

  } //  END OF createMarker(i) FUNCTION

Then pass that index into the drawPath function (modified from one of the answers to the question: Create Elevation profile from polyline coordinate array):

function drawPath(i) {

  // Create a new chart in the elevation_chart DIV.
  chart = new google.visualization.ColumnChart(document.getElementById('elevation-chart'));

  var path = polylines[i].getPath().getArray();

  // Create a PathElevationRequest object using this array.
  // Ask for 256 samples along that path.
  var pathRequest = {
    'path': path,
    'samples': 256
  }

  // Initiate the path request.
  elevator.getElevationAlongPath(pathRequest, plotElevation);
}



function plotElevation(results, status) {
  if (status == google.maps.ElevationStatus.OK) {
    elevations = results;

    // Extract the elevation samples from the returned results
    // and store them in an array of LatLngs.
    var elevationPath = [];
    for (var i = 0; i < elevations.length; i++) {
      elevationPath.push(elevations[i].location);
    }

    // Extract the data from which to populate the chart.
    // Because the samples are equidistant, the 'Sample'
    // column here does double duty as distance along the
    // X axis.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Sample');
    data.addColumn('number', 'Elevation');
    for (var i = 0; i < results.length; i++) {
      data.addRow(['', elevations[i].elevation]);
    }

    // Draw the chart using the data within its DIV.
    document.getElementById('elevation-chart').style.display = 'block';
    chart.draw(data, {
      width: 960,
      height: 300,
      legend: 'none',
      titleY: 'Elevation (m)'
    });
  }
}

proof of concept fiddle

code snippet: (note that the chart doesn't actually work in the code snippet, there is a security error: Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Sandbox access violation: Blocked a frame at "http://stacksnippets.net" from accessing a frame at "null". Both frames are sandboxed and lack the "allow-same-origin" flag., but it does work in the fiddle)

// Load the Visualization API and the columnchart package.
google.load("visualization", "1", {
  packages: ["columnchart"]
});

var polylines = [];
var elevator;

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,
    center: new google.maps.LatLng(locations[0]),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  }); // ---- END OF var map FUNCTION

  // Create an ElevationService.
  elevator = new google.maps.ElevationService();

  // CREATE HUB MARKER & HUB INFOWINDOW
  var marker = new google.maps.Marker({
    position: locations[0],
    title: locations[0].xtitle,
    map: map
  });

  var infowindow = new google.maps.InfoWindow({
    content: locations[0].xinfo
  });

  // CREATE SURROUNDING MARKERS AND POLYLINE TO HUB
  for (var i = 1; i < locations.length; i++) {
    createMarker(i);
  };


  function createMarker(i) {
      var Xmarker = new google.maps.Marker({
        map: map,
        position: locations[i],
        title: locations[i].xtitle,
      });
      var infowindow = new google.maps.InfoWindow({
        content: locations[i].xinfo
      });
      google.maps.event.addListener(Xmarker, 'click', function() {
        infowindow.open(map, Xmarker);
        drawPath(i);
      });

      var polyline = new google.maps.Polyline({
        path: [locations[0], locations[i]],
        strokeColor: '#cc0000',
        strokeWeight: '3',
        geodesic: true,
        map: map
      });
      polylines[i] = polyline;

    } //  END OF createMarker(i) FUNCTION

}; // END OF initMap() FUNCTION

function drawPath(i) {

  // Create a new chart in the elevation_chart DIV.
  chart = new google.visualization.ColumnChart(document.getElementById('elevation-chart'));

  var path = polylines[i].getPath().getArray();

  // Create a PathElevationRequest object using this array.
  // Ask for 256 samples along that path.
  var pathRequest = {
    'path': path,
    'samples': 256
  }

  // Initiate the path request.
  elevator.getElevationAlongPath(pathRequest, plotElevation);
}



function plotElevation(results, status) {
  if (status == google.maps.ElevationStatus.OK) {
    elevations = results;

    // Extract the elevation samples from the returned results
    // and store them in an array of LatLngs.
    var elevationPath = [];
    for (var i = 0; i < elevations.length; i++) {
      elevationPath.push(elevations[i].location);
    }

    // Extract the data from which to populate the chart.
    // Because the samples are equidistant, the 'Sample'
    // column here does double duty as distance along the
    // X axis.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Sample');
    data.addColumn('number', 'Elevation');
    for (var i = 0; i < results.length; i++) {
      data.addRow(['', elevations[i].elevation]);
    }

    // Draw the chart using the data within its DIV.
    document.getElementById('elevation-chart').style.display = 'block';
    chart.draw(data, {
      width: 960,
      height: 300,
      legend: 'none',
      titleY: 'Elevation (m)'
    });
  }
}



google.maps.event.addDomListener(window, 'load', initMap);

var locations = [{
  xtitle: 'Hub title',
  xinfo: 'Hub infowindow',
  lat: 38.624365,
  lng: -90.18503
}, {
  xtitle: 'Marker 1 title',
  xinfo: 'Marker 1 infowindow',
  lat: 38.920056,
  lng: -90.105111
}, {
  xtitle: 'Marker 2 title',
  xinfo: 'Marker 2 infowindow',
  lat: 38.688667,
  lng: -89.560639
}, {
  xtitle: 'Marker 3 title',
  xinfo: 'Marker 3 infowindow',
  lat: 38.416944,
  lng: -90.433028
}, {
  xtitle: 'Marker 4 title',
  xinfo: 'Marker 4 infowindow',
  lat: 38.692667,
  lng: -90.665944
}];

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<div id="elevation-chart"></div>
<div id="map"></div>

create elevation chart from markers and a HUB

1 Answers1

Linked