1

I am creating a longitudinal profile in Google Maps. For this, I created a function that lets you draw a line and when it disappears just drawn. So far there is no problem, but when I return to view this function that is hosted on a button, and I think the new profile line adheres to the old, not the new one is created.

Any suggestions?

this is my code:

var elevator;
var perfil1=[];
var data_val=false;
var total;
var cadena=[];
var elevationService = new google.maps.ElevationService();
function longitudinal(lat,lng){

    var elevator = new google.maps.ElevationService;
    for (var i=0; i<lat.length; i++) {
        perfil1[i]= new google.maps.LatLng((lng[i]),(lat[i])); 
    }
    var path=perfil1;
    displayPathElevation(path, elevator);
        google.setOnLoadCallback(function () {
              google.load('visualization', '1', { 'packages': ['corechart'],         'callback': function
        () {
                chart.render(path);
              }});
            });

}

 function displayPathElevation(path, elevator) {
     // Display a polyline of the elevation path.
          // Create a PathElevationRequest object using this array.
      // Ask for 256 samples along that path.
       // Initiate the path request.
       chart = new             google.visualization.ColumnChart(document.getElementById('elevation_chart'));
     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) {

         chartDiv.innerHTML = 'No se puede mostrar el gráfico en este momento: ' + status;
      return;
      }
     // Create a new chart in the elevation_chart DIV.
           var chart = new google.visualization.ColumnChart(chartDiv);

       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.
               if(data_val==false){
              var data = new google.visualization.DataTable();
            data.addColumn('string', 'Sample');
                 data.addColumn('number', 'Altura');
             for (var i = 0; i < elevations.length; i++) {
               data.addRow(['', elevations[i].elevation]);

               }
                 data_val =true;
            }else {
              var data = new google.visualization.DataTable();


              data.addColumn('string', 'Sample');
               data.addColumn('number', 'Altura');
             for (var c = 0; c < elevations.length; c++) {
              data.addRow(['', elevations[c].elevation]);

            }

            }



         // Draw the chart using the data within its DIV.
            chart.draw(data, {
            height: 200,
             titleY: 'Altura (m)',
            titleX: 'Distancia '
              });

            map.removeInteraction(perfil_linea);

     }
  • This is not very clear: " For this, I created a function that lets you draw a line and when it disappears just drawn". Dímelo en español si prefieres y lo traduciré. Also, if you could post a working example in jsfiddle, jsbin or similar, that will help people to run the example. – John Powell Dec 21 '15 at 11:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.