Javascript: adding and removing Polyline in google maps?

Question

I'm trying to add a polyline between two locations on google maps.

1 of the locations is static (always the same) and the another one is dynamic, refreshed every X seconds via AJAX.

Now, I need to add a polyline between these two points on the map.

I can add the polyline but it wont get removed or refreshed.

This is a working FIDDLE

AND MY CODE:

var map;


         function initialize()
         {

            var input = $('#input').val();
           var input2 = $('#input2').val();

var line = new google.maps.Polyline({
    path: [new google.maps.LatLng(24.71237, 72.90634), new google.maps.LatLng(input, input2)],
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
    geodesic: true,
    map: map
});


           var latlng = new google.maps.LatLng(21.16536,72.79387);



           var myOptions = {
               zoom: 5,
               center: latlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
           };


           map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
           var marker = new google.maps.Marker
           (
               {
                   position: new google.maps.LatLng(21.1673643, 72.7851802),
                   map: map,
                   title: 'Click me'
               }

           );




           var infowindow = new google.maps.InfoWindow({
               content: 'Location info:<br/>SVNIT Post Office, Dumas Rd, Surat<br/>LatLng:<br/>21.1673643, 72.7851802'
           });
           google.maps.event.addListener(marker, 'click', function ()
           {
              infowindow.open(map, marker);
              setTimeout(function(){infowindow.close();}, '5000');
           });

       //$('#clickme').on('click', function(){
       setInterval(function() {
           var input = $('#input').val();
           var input2 = $('#input2').val();


            var NewLatLng = new google.maps.LatLng(input, input2);
            //setInterval(function() { marker.setPosition(NewLatLng);}, 2000);

            marker.setPosition( NewLatLng );
            line.setMap(map);
    }); 





       }





       window.onload = initialize;

Could someone please advise on this issue?

I did try adding line.setMap(null); but this doesn't do anything.

Answer 1

You need to update the path of the Polyline when the marker position is updated (or bind the vertex of the path to the marker).

setInterval(function() {
  var input = $('#input').val();
  var input2 = $('#input2').val();

  var NewLatLng = new google.maps.LatLng(input, input2);

  marker.setPosition(NewLatLng);
  line.setPath([new google.maps.LatLng(24.71237, 72.90634), NewLatLng]);
  line.setMap(map);
});

proof of concept fiddle

code snippet:

var map;
function initialize() {
  var input = $('#input').val();
  var input2 = $('#input2').val();

  var line = new google.maps.Polyline({
    path: [new google.maps.LatLng(24.71237, 72.90634), new google.maps.LatLng(input, input2)],
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
    geodesic: true,
    map: map
  });

  var latlng = new google.maps.LatLng(21.16536, 72.79387);
  var myOptions = {
    zoom: 5,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  var marker = new google.maps.Marker({
      position: new google.maps.LatLng(21.1673643, 72.7851802),
      map: map,
      title: 'Click me'
    }
  );

  var infowindow = new google.maps.InfoWindow({
    content: 'Location info:<br/>SVNIT Post Office, Dumas Rd, Surat<br/>LatLng:<br/>21.1673643, 72.7851802'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map, marker);
    setTimeout(function() {
      infowindow.close();
    }, '5000');
  });

  setInterval(function() {
    var input = $('#input').val();
    var input2 = $('#input2').val();

    var NewLatLng = new google.maps.LatLng(input, input2);

    marker.setPosition(NewLatLng);
    line.setPath([new google.maps.LatLng(24.71237, 72.90634), NewLatLng]);
    line.setMap(map);
  });
}
window.onload = initialize;

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="input" value="24" />
<input id="input2" value ="72" />
<div id="map_canvas"></div>

Answer 2

You need to change the path of your polyline object when the marker is updated.