How To Show Markers On Map?

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

Solution 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 variablevar map;

functioninitMap() {
  // 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);
}

functiondisplayPathElevation(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.functionplotElevation(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%;
}

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