How to show markers on map?

Question

I'm new to Google Maps API and on the example of Showing elevation along a path, i am trying to pop up a marker on locations that every sample of the chart has been taken.

function plotElevation(elevations, status) {
  var chartDiv = document.getElementById('elevation_chart');
  if (status !== google.maps.ElevationStatus.OK) {
    // Show the error code inside the chartDiv.
    chartDiv.innerHTML = 'Cannot show elevation: request failed because ' + status;
    return;
  }

  // Create a new chart in the elevation_chart DIV.
  var chart = new google.visualization.ColumnChart(chartDiv);

  // 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 < elevations.length; i++) {
    data.addRow(['', elevations[i].elevation]);
    var marker = new google.maps.Marker({
      position: {lat: elevations[i].location.lat(), lng: elevations[i].location.lng()},
      draggable: false,
      map: map,
      flat: true
    });
  }

  // Draw the chart using the data within its DIV.
  chart.draw(data, {
    height: 170,
    legend: 'none',
    titleY: 'Elevation (m)'
  });
}

Here is the part that i modified to pop-up markers but i couldnt find where the problem is. If someone can help me i would appreciate.

Answer 1

There is an error reported in the javascript console: InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama.

Your map variable is local to the initMap routine, simplest solution is to make it global.

code snippet:

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

// global map variable
var map;

function initMap() {
  // initialize global map variable
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: path[1],
    mapTypeId: 'terrain'
  });

  // Create an ElevationService.
  var elevator = new google.maps.ElevationService;

  // Draw the path, using the Visualization API and the Elevation service.
  displayPathElevation(path, elevator, map);
}

function displayPathElevation(path, elevator, map) {
  // Display a polyline of the elevation path.
  new google.maps.Polyline({
    path: path,
    strokeColor: '#0000CC',
    opacity: 0.4,
    map: map
  });

  // Create a PathElevationRequest object using this array.
  // Ask for 256 samples along that path.
  // Initiate the path request.
  elevator.getElevationAlongPath({
    'path': path,
    'samples': 256
  }, 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(elevations, status) {
  var chartDiv = document.getElementById('elevation_chart');
  if (status !== google.maps.ElevationStatus.OK) {
    // Show the error code inside the chartDiv.
    chartDiv.innerHTML = 'Cannot show elevation: request failed because ' + status;
    return;
  }

  // Create a new chart in the elevation_chart DIV.
  var chart = new google.visualization.ColumnChart(chartDiv);

  // 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 < elevations.length; i++) {
    data.addRow(['', elevations[i].elevation]);
    var marker = new google.maps.Marker({
      position: {
        lat: elevations[i].location.lat(),
        lng: elevations[i].location.lng()
      },
      draggable: false,
      map: map,
      flat: true
    });
  }

  // Draw the chart using the data within its DIV.
  chart.draw(data, {
    height: 170,
    legend: 'none',
    titleY: 'Elevation (m)'
  });
}
google.maps.event.addDomListener(window, "load", initMap);
// The following path marks a path from Mt. Whitney, the highest point in the
// continental United States to Badwater, Death Valley, the lowest point.
var path = [{
    lat: 36.579,
    lng: -118.292
  }, // Mt. Whitney
  {
    lat: 36.606,
    lng: -118.0638
  }, // Lone Pine
  {
    lat: 36.433,
    lng: -117.951
  }, // Owens Lake
  {
    lat: 36.588,
    lng: -116.943
  }, // Beatty Junction
  {
    lat: 36.34,
    lng: -117.468
  }, // Panama Mint Springs
  {
    lat: 36.24,
    lng: -116.832
  }
]; // Badwater, Death Valley

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

<script src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div>
  <div id="map" style="height:250px;"></div>
  <div id="elevation_chart"></div>
</div>