BayLife BayLife - 7 months ago 44
Javascript Question

Not able to hide PolyLine from Map

I have a PolyLine which I draw with clicks on the Map. This works fine, but for some reason I´m not able to hide this from map. Removing and everything else works fine. I tried nearly everything from setVisible to setMap(null) as you can the in the code below.

var drawOnMap = function (){

var poly = null;
var path;
var encodedString;
var decodedString;

function drawPolyLine(latLng){

if(!poly){
path = new google.maps.MVCArray();
}
console.log(latLng);
path.push(latLng);

poly = new google.maps.Polyline({
path: path,
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3,
editable: true,
map: map
});
}

function getPolyLineData(){
//console.log(path.getPath());
var firstPoint = path.getAt(0);
var lastPoint = path.getAt(path.length - 1);

console.log(firstPoint);

console.log(lastPoint);

if ($j("#useWaypoints").is(":checked")) {
var twaypoints = path.slice(1, path.length - 1);

var waypoints = [];

for (var i = 0; i < twaypoints.length; i++) {
waypoints.push(
{
location: new google.maps.LatLng(twaypoints[i].lat(), twaypoints[i].lng())
}
);
}
} else {
waypoints = null;
}

return data = {
origin: {lat: firstPoint.lat(), lng: firstPoint.lng()},
destination: {lat: lastPoint.lat(), lng: lastPoint.lng()},
waypoints: waypoints
};
}

function removePolyLine(){

for(var i = path.length; i > 0 ; i--){
path.pop();
}
}

function removeLastPoint(){
if(path.length > 0){
path.pop();
poly.setPath(path);
}
}

function hidePolyLine(){
console.log("HIDE");
console.log(poly.getVisible());
poly.getVisible() ? poly.setVisible(false) : poly.setVisible(true);
poly.setMap(null);
}

function showPolyLine(){
console.log("SHOW");
poly.setVisible(true);
poly.setMap(map);
}


return {
drawPolyLine: drawPolyLine,
getPolyLineData: getPolyLineData,
removeLastPoint: removeLastPoint,
removePolyLine: removePolyLine,
showPolyLine: showPolyLine,
hidePolyLine: hidePolyLine
}
}();


Can someone tell me, why this isn´t working. According to the Google Maps API I´m right. I have also found several SO Question about this topic, but nothing worked for me.

To be a bit more specific. Why is this part not working? I don´t see any reasons for it...

poly.getVisible() ? poly.setVisible(false) : poly.setVisible(true);


polyline-hide

MAPS API v3

Toogle Visablity

EDIT: I´m calling the hide/show functionality via radio buttons

$j("input[name='editDraw']").change(function () {
console.log("editDraw change");
if ($j("#editDraw_on").is(":checked")) {

drawOnMap.showPolyLine();

};

if ($j("#editDraw_off").is(":checked")) {
//console.log("OFF");
drawOnMap.hidePolyLine();
};

});


The code is surrounded in an Object using the revealing module pattern. The object is running for it's own, for testing just a map instance and an click event to call drawPolyLine(latLng) is required.

Answer

Your issue is everytime you add a point to the polyline, you create a new polyline and lose the reference to the old one. If the polyline already exists, extend the path of the existing polyline rather than creating a new polyline.

function drawPolyLine(latLng){
    if(!poly){
      path = new google.maps.MVCArray();
      console.log(latLng);
      path.push(latLng);

      poly = new google.maps.Polyline({
        path: path,
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        editable: true,
        map: map
      });
    } else {
      poly.getPath().push(latLng);
    }    
}

proof of concept fiddle

code snippet:

var drawOnMap = function() {

  var poly = null;
  var path;
  var encodedString;
  var decodedString;

  function drawPolyLine(latLng) {

    if (!poly) {
      path = new google.maps.MVCArray();
      console.log(latLng);
      path.push(latLng);

      poly = new google.maps.Polyline({
        path: path,
        strokeColor: '#000000',
        strokeOpacity: 1.0,
        strokeWeight: 3,
        editable: true,
        map: map
      });
    } else {
      poly.getPath().push(latLng);
    }
  }

  function getPolyLineData() {
    var firstPoint = path.getAt(0);
    var lastPoint = path.getAt(path.length - 1);

    console.log(firstPoint);
    console.log(lastPoint);

    if ($j("#useWaypoints").is(":checked")) {
      var twaypoints = path.slice(1, path.length - 1);

      var waypoints = [];

      for (var i = 0; i < twaypoints.length; i++) {
        waypoints.push({
          location: new google.maps.LatLng(twaypoints[i].lat(), twaypoints[i].lng())
        });
      }
    } else {
      waypoints = null;
    }

    return data = {
      origin: {
        lat: firstPoint.lat(),
        lng: firstPoint.lng()
      },
      destination: {
        lat: lastPoint.lat(),
        lng: lastPoint.lng()
      },
      waypoints: waypoints
    };
  }

  function removePolyLine() {

    for (var i = path.length; i > 0; i--) {
      path.pop();
    }
  }

  function removeLastPoint() {
    if (path.length > 0) {
      path.pop();
      poly.setPath(path);
    }
  }

  function hidePolyLine() {
    console.log("HIDE");
    console.log(poly.getVisible());
    poly.getVisible() ? poly.setVisible(false) : poly.setVisible(true);
    poly.setMap(null);
  }

  function showPolyLine() {
    console.log("SHOW");
    poly.setVisible(true);
    poly.setMap(map);
  }


  return {
    drawPolyLine: drawPolyLine,
    getPolyLineData: getPolyLineData,
    removeLastPoint: removeLastPoint,
    removePolyLine: removePolyLine,
    showPolyLine: showPolyLine,
    hidePolyLine: hidePolyLine
  }
}();


var map;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  google.maps.event.addListener(map, 'click', function(evt) {
    drawOnMap.drawPolyLine(evt.latLng);
  })

  $("input[name='editDraw']").change(function() {
    console.log("editDraw change");
    if ($("#editDraw_on").is(":checked")) {

      drawOnMap.showPolyLine();

    };

    if ($("#editDraw_off").is(":checked")) {
      //console.log("OFF");
      drawOnMap.hidePolyLine();
    };

  });
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="editDraw" id="editDraw_on" type="radio" checked="checked" />
<input name="editDraw" id="editDraw_off" type="radio" />

<div id="map_canvas"></div>