title: create elevation chart from kml file using php and javascript
body: <p>I am trying to use google elevation service to create an elevation profile just like this:</p>
  
  <p><a href="https://google-developers.appspot.com/maps/documentation/javascript/examples/elevation-paths" rel="nofollow">https://google-developers.appspot.com/maps/documentation/javascript/examples/elevation-paths</a></p>
  
  <p>Here is the Javascript:</p>
  
  <pre><code>var elevator;
  var map;
  var chart;
  var infowindow = new google.maps.InfoWindow();
  var polyline;
  
  // The following path marks a general path from Mt.
  // Whitney, the highest point in the continental United
  // States to Badwater, Death Vallet, the lowest point.
  var whitney = new google.maps.LatLng(36.578581, -118.291994);
  var lonepine = new google.maps.LatLng(36.606111, -118.062778);
  var owenslake = new google.maps.LatLng(36.433269, -117.950916);
  var beattyjunction = new google.maps.LatLng(36.588056, -116.943056);
  var panamintsprings = new google.maps.LatLng(36.339722, -117.467778);
  var badwater = new google.maps.LatLng(36.23998, -116.83171);
  
  // Load the Visualization API and the columnchart package.
  google.load("visualization", "1", {packages: ["columnchart"]});
  
  function initialize() {
    var mapOptions = {
      zoom: 8,
      center: lonepine,
      mapTypeId: 'terrain'
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  
    // Create an ElevationService.
    elevator = new google.maps.ElevationService();
  
    // Draw the path, using the Visualization API and the Elevation service.
    drawPath();
  }
  
  function drawPath() {
  
    // Create a new chart in the elevation_chart DIV.
    chart = new google.visualization.ColumnChart(document.getElementById('elevation_chart'));
  
    var path = [ whitney, lonepine, owenslake, panamintsprings, beattyjunction, badwater];
  
    // 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);
  }
  
  // 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 &lt; results.length; i++) {
        elevationPath.push(elevations[i].location);
      }
  
      // Display a polyline of the elevation path.
      var pathOptions = {
        path: elevationPath,
        strokeColor: '#0000CC',
        opacity: 0.4,
        map: map
      }
      polyline = new google.maps.Polyline(pathOptions);
  
      // 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 &lt; 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)'
      });
    }
  }
  </code></pre>
  
  <p>I have a KML file. It's contents are:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"&gt;
  &lt;Document&gt;
      &lt;name&gt;test.kml&lt;/name&gt;
      &lt;Style id="inline10"&gt;
          &lt;LineStyle&gt;
              &lt;color&gt;ff0000ff&lt;/color&gt;
              &lt;width&gt;2&lt;/width&gt;
          &lt;/LineStyle&gt;
          &lt;PolyStyle&gt;
              &lt;fill&gt;0&lt;/fill&gt;
          &lt;/PolyStyle&gt;
      &lt;/Style&gt;
      &lt;Style id="inline00"&gt;
          &lt;LineStyle&gt;
              &lt;color&gt;ff0000ff&lt;/color&gt;
              &lt;width&gt;2&lt;/width&gt;
          &lt;/LineStyle&gt;
          &lt;PolyStyle&gt;
              &lt;fill&gt;0&lt;/fill&gt;
          &lt;/PolyStyle&gt;
      &lt;/Style&gt;
      &lt;StyleMap id="inline"&gt;
          &lt;Pair&gt;
              &lt;key&gt;normal&lt;/key&gt;
              &lt;styleUrl&gt;#inline00&lt;/styleUrl&gt;
          &lt;/Pair&gt;
          &lt;Pair&gt;
              &lt;key&gt;highlight&lt;/key&gt;
              &lt;styleUrl&gt;#inline10&lt;/styleUrl&gt;
          &lt;/Pair&gt;
      &lt;/StyleMap&gt;
      &lt;Placemark&gt;
          &lt;name&gt;4.6m run&lt;/name&gt;
          &lt;styleUrl&gt;#inline&lt;/styleUrl&gt;
          &lt;LineString&gt;
              &lt;tessellate&gt;1&lt;/tessellate&gt;
              &lt;coordinates&gt;
                  -118.3701083851859,33.86613514741887,0 -118.3835891373556,33.86595745112309,0 -118.3837603618944,33.86620604860725,0 -118.3860197295395,33.865106678845,0 -118.3853630075581,33.86344608835453,0 -118.392210401906,33.86235962069966,0 -118.3930072160544,33.86482879105449,0 -118.3952920372758,33.86473719683653,0 -118.3955064755973,33.86544254118038,0 -118.3978346563853,33.87119781418026,0 -118.4006823491955,33.8746256060688,0 -118.395927369356,33.8729025811578,0 -118.3929679702478,33.87284041135064,0 -118.3912963149097,33.87280457074664,0 -118.3873145130551,33.86670833356382,0 -118.3845601044409,33.86794790820593,0 -118.3840431481755,33.86710880429249,0 -118.3704571100188,33.86705385780814,0 
              &lt;/coordinates&gt;
          &lt;/LineString&gt;
      &lt;/Placemark&gt;
  &lt;/Document&gt;
  &lt;/kml&gt;
  </code></pre>
  
  <p>The example on the developers blog of google creates a path from specific lat and lon values. I already have these values in the kml file under "coordinates". I'd like to create a chart that shows the elevation profile.</p>
  
  <p>Also, I was able to parse through the kml file using "simplexml_load_file" to get the coordinate string:</p>
  
  <pre><code>-118.3701083851859,33.86613514741887,0 -118.3835891373556,33.86595745112309,0 -118.3837603618944,33.86620604860725,0 -118.3860197295395,33.865106678845,0 -118.3853630075581,33.86344608835453,0 -118.392210401906,33.86235962069966,0 -118.3930072160544,33.86482879105449,0 -118.3952920372758,33.86473719683653,0 -118.3955064755973,33.86544254118038,0 -118.3978346563853,33.87119781418026,0 -118.4006823491955,33.8746256060688,0 -118.395927369356,33.8729025811578,0 -118.3929679702478,33.87284041135064,0 -118.3912963149097,33.87280457074664,0 -118.3873145130551,33.86670833356382,0 -118.3845601044409,33.86794790820593,0 -118.3840431481755,33.86710880429249,0 -118.3704571100188,33.86705385780814,0
  </code></pre>
  
  <p>I don't know if I'm on the right path or not.</p>
  
  <p>I think I need to replace this</p>
  
  <pre><code>var path = [ whitney, lonepine, owenslake, panamintsprings, beattyjunction, badwater];
  </code></pre>
  
  <p>With the lat,lon values from the KML.</p>
  
  <p>I'm fairly new to google api. Any help would be appreciated.</p>