パスを変更するマーカーをドラッグしてポリラインを更新する（マップから前のマップを削除する）

Question

私はJavascriptとGoogle Maps APIをかなり新しくしています。この質問のさまざまなバリエーションを見てきましたが、私のコードに適用するソリューションを手に入れることができません。関数内でポリラインが定義されているので、関数が呼び出されるたびに再定義されるべきではなく、前のものを効果的に削除するべきですか？または私は何かを逃していますか？マーカーをドラッグしたときに「古い」ポリラインを削除するにはどうすればよいですか？ここ

は私のコードである：コードのhttps://jsfiddle.net/emvee/qqavw3gh/6/

関連する行である行44-53（マーカーがドラッグされたときおよびドラッグされているプロセスのイベント）と線171から215でありますdirectionsServiceから受け取った方向に基づいてポリラインを定義し描画します。

//map details, i.e. creates a map of Lucca 
var mapOptions = { 
    center: new google.maps.LatLng(43.8430, 10.5050), 
    zoom: 15, 
    mapTypeId: google.maps.MapTypeId.SATELLITE 
}; 

//create map 
var map = new google.maps.Map(document.getElementById('map'), mapOptions); 

//marker details 
var markerOptions1 = { 
    position: new google.maps.LatLng(43.8402250, 10.5008083) 
}; 
var markerOptions2 = { 
    position: new google.maps.LatLng(43.83811, 10.50328) 
}; 
var markerOptions3 = { 
    position: new google.maps.LatLng(43.8439194, 10.5032083) 
}; 
var markerOptions4 = { 
    position: new google.maps.LatLng(43.8405167, 10.5038722) 
}; 

//creates markers 
var marker1 = new google.maps.Marker(markerOptions1); 
var marker2 = new google.maps.Marker(markerOptions2); 
var marker3 = new google.maps.Marker(markerOptions3); 
var marker4 = new google.maps.Marker(markerOptions4); 

//Draggable marker for the start of pathing 
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 

var startMarkerOptions = { 
    position: new google.maps.LatLng(43.8376806, 10.5060250), 
    map: map, 
    draggable: true, 
    title: "Drag me to your current locaton!", 
    icon: image 
} 

var startMarker = new google.maps.Marker(startMarkerOptions); 

google.maps.event.addListener(startMarker, 'dragend', function(evt) { 
    console.log("Marker dropped."); 
    console.log(evt.latLng.lat().toFixed(3)); 
    console.log(evt.latLng.lng().toFixed(3)); 
    calcRoute(); 
}); 

google.maps.event.addListener(startMarker, 'dragstart', function(evt) { 
    console.log("marker is being dragged"); 
}); 

//sets markers 
marker1.setMap(map); 
marker2.setMap(map); 
marker3.setMap(map); 
marker4.setMap(map); 

//content string for infoWindows 
var contentString1 = '<div id="content">' + 
    '<div id="siteNotice">' + 
    '</div>' + 
    '<h1 id="firstHeading" class="firstHeading">Via della Caserma alleyway</h1>' + 
    '<div id="bodyContent">' + 
    '<img src="http://i.imgur.com/4veClkp.jpg" width="100" height="150" />' + 
    '<img src="http://i.imgur.com/cUIGkWD.jpg" alt="alleyway1" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/wYokWoy.jpg" alt="3headstencil" width="100" height="136" />' + 
    '<img src="http://i.imgur.com/UKI1Hmf.jpg" alt="resTU2" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/fhN88hs.jpg" alt="alleyway2" width="100" height="150" />' + 
    '</div>' + 
    '</div>'; 

var contentString2 = '<div id="content">' + 
    '<div id="siteNotice">' + 
    '</div>' + 
    '<h1 id="firstHeading" class="firstHeading">Various Artists on Legal Walls</h1>' + 
    '<div id="bodyContent">' + 
    '<img src="http://i.imgur.com/hWt5kD1.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/Syedh0I.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/poNqEaq.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/pOZxM0p.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/1kAlmlk.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/eQkWHgl.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/TGvXhcV.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/NrJd1Tn.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/hxfBhl7.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/4VUjHa1.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/CL5EmVj.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/buHkEfj.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/KZIRQJL.jpg" width="150" height="100" />' + 
    '<img src="http://i.imgur.com/gOm3tNd.jpg" width="150" height="100" />' + 
    '</div>' + 
    '</div>'; 

var contentString3 = '<div id="content">' + 
    '<div id="siteNotice">' + 
    '</div>' + 
    '<h1 id="firstHeading" class="firstHeading">Octopus on Via Buia</h1>' + 
    '<div id="bodyContent">' + 
    '<img src="http://i.imgur.com/0tOabHO.jpg" alt="Test Image" width="100" height="150" />' 
'</div>' + 
'</div>'; 


//marker info windows 
var infoWindowOptions1 = { 
    content: contentString1 
}; 

var infoWindowOptions2 = { 
    content: contentString2 
}; 

var infoWindowOptions3 = { 
    content: contentString3 
}; 

var infoWindowOptions4 = { 
    content: 'Resta and Various Artists' 
}; 

//Events for clicking on the markers 
var infoWindow1 = new google.maps.InfoWindow(infoWindowOptions1); 
google.maps.event.addListener(marker1, 'click', function(e) { 
    infoWindow1.open(map, marker1); 
}); 

var infoWindow2 = new google.maps.InfoWindow(infoWindowOptions2); 
google.maps.event.addListener(marker2, 'click', function(e) { 
    infoWindow2.open(map, marker2); 
}); 

var infoWindow3 = new google.maps.InfoWindow(infoWindowOptions3); 
google.maps.event.addListener(marker3, 'click', function(e) { 
    infoWindow3.open(map, marker3); 
}); 

var infoWindow4 = new google.maps.InfoWindow(infoWindowOptions4); 
google.maps.event.addListener(marker4, 'click', function(e) { 
    infoWindow4.open(map, marker4); 
}); 


var directionsService = new google.maps.DirectionsService(); 

var waypts = []; 

stop = new google.maps.LatLng(43.8402250, 10.5008083) 
waypts.push({ 
    location: stop, 
    stopover: true 
}); 
stop = new google.maps.LatLng(43.83811, 10.50328) 
waypts.push({ 
    location: stop, 
    stopover: true 
}); 
stop = new google.maps.LatLng(43.8439194, 10.5032083) 
waypts.push({ 
    location: stop, 
    stopover: true 
}); 
stop = new google.maps.LatLng(43.8405167, 10.5038722) 
waypts.push({ 
    location: stop, 
    stopover: true 
}); 

function calcRoute() { 

    start = startMarker.getPosition(); 
    end = startMarker.getPosition(); 

    var request = { 
    origin: start, 
    destination: end, 
    waypoints: waypts, 
    optimizeWaypoints: true, 
    travelMode: google.maps.DirectionsTravelMode.WALKING 
    }; 

    var bounds = new google.maps.LatLngBounds(); 

    var poly = new google.maps.Polyline({ 
    path: [], 
    strokeColor: "#58FA58", 
    strokeOpacity: 1.0, 
    strokeWeight: 3 
    }); 

    directionsService.route(request, function(response, status) { 
    //console.log(response.routes[0].legs); 
    if (status == google.maps.DirectionsStatus.OK) { 
     var legs = response.routes[0].legs; 
     for (i = 0; i < legs.length; i++) { 
     var steps = legs[i].steps; 
     for (j = 0; j < steps.length; j++) { 
      //console.log(steps[j].instructions); 
      var nextSegment = steps[j].path; 
      for (k = 0; k < nextSegment.length; k++) { 
      poly.getPath().push(nextSegment[k]); 
      bounds.extend(nextSegment[k]); 
      } 
     } 
     } 
    } else { 
     alert("Something went wrong" + status); 
    } 
    }); 

    poly.setMap(map); 
    //poly.setPath([]); why does this not work? 
} 

calcRoute(); 

Answer 1

、ポリラインは、グローバル必ず、新しいものを作成したら、あなたはそれへのアクセスを失い、（新しいものを作成する前に（nullにそのmapプロパティを設定する）のマップからそれを削除し、そうでない場合グローバルでは、calcRoute関数を終了すると範囲外になります）。

if (poly && poly.setMap) poly.setMap(null); 
poly = new google.maps.Polyline({ 
    path: [], 
    strokeColor: "#58FA58", 
    strokeOpacity: 1.0, 
    strokeWeight: 3 
}); 

updated fiddle

コードスニペット：

//map details, i.e. creates a map of Lucca 
 
var mapOptions = { 
 
    center: new google.maps.LatLng(43.8430, 10.5050), 
 
    zoom: 15, 
 
    mapTypeId: google.maps.MapTypeId.SATELLITE 
 
}; 
 
var poly; 
 

 

 
//create map 
 
var map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 

 
//marker details 
 
var markerOptions1 = { 
 
    position: new google.maps.LatLng(43.8402250, 10.5008083) 
 
}; 
 
var markerOptions2 = { 
 
    position: new google.maps.LatLng(43.83811, 10.50328) 
 
}; 
 
var markerOptions3 = { 
 
    position: new google.maps.LatLng(43.8439194, 10.5032083) 
 
}; 
 
var markerOptions4 = { 
 
    position: new google.maps.LatLng(43.8405167, 10.5038722) 
 
}; 
 

 
//creates markers 
 
var marker1 = new google.maps.Marker(markerOptions1); 
 
var marker2 = new google.maps.Marker(markerOptions2); 
 
var marker3 = new google.maps.Marker(markerOptions3); 
 
var marker4 = new google.maps.Marker(markerOptions4); 
 

 
//Draggable marker for the start of pathing 
 
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'; 
 

 
var startMarkerOptions = { 
 
    position: new google.maps.LatLng(43.8376806, 10.5060250), 
 
    map: map, 
 
    draggable: true, 
 
    title: "Drag me to your current locaton!", 
 
    icon: image 
 
} 
 

 
var startMarker = new google.maps.Marker(startMarkerOptions); 
 

 
google.maps.event.addListener(startMarker, 'dragend', function(evt) { 
 
    console.log("Marker dropped."); 
 
    console.log(evt.latLng.lat().toFixed(3)); 
 
    console.log(evt.latLng.lng().toFixed(3)); 
 
    calcRoute(); 
 
}); 
 

 
google.maps.event.addListener(startMarker, 'dragstart', function(evt) { 
 
    console.log("marker is being dragged"); 
 
}); 
 

 
//update the marker's coordinates for the pathing 
 
/* 
 
    function markerCoords(startMarker){ 
 
google.maps.event.addListener(startMarker, 'dragend', function(evt){ 
 

 
    }); 
 

 
}); 
 

 
google.maps.event.addListener(startMarker, 'drag', function(evt){ 
 
    console.log("marker is being dragged"); 
 
}); */ 
 
//end of marker coordinate update 
 

 
//sets markers 
 
marker1.setMap(map); 
 
marker2.setMap(map); 
 
marker3.setMap(map); 
 
marker4.setMap(map); 
 

 
//content string for infoWindows 
 
var contentString1 = '<div id="content">' + 
 
    '<div id="siteNotice">' + 
 
    '</div>' + 
 
    '<h1 id="firstHeading" class="firstHeading">Via della Caserma alleyway</h1>' + 
 
    '<div id="bodyContent">' + 
 
    '<img src="http://i.imgur.com/4veClkp.jpg" width="100" height="150" />' + 
 
    '<img src="http://i.imgur.com/cUIGkWD.jpg" alt="alleyway1" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/wYokWoy.jpg" alt="3headstencil" width="100" height="136" />' + 
 
    '<img src="http://i.imgur.com/UKI1Hmf.jpg" alt="resTU2" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/fhN88hs.jpg" alt="alleyway2" width="100" height="150" />' + 
 
    '</div>' + 
 
    '</div>'; 
 

 
var contentString2 = '<div id="content">' + 
 
    '<div id="siteNotice">' + 
 
    '</div>' + 
 
    '<h1 id="firstHeading" class="firstHeading">Various Artists on Legal Walls</h1>' + 
 
    '<div id="bodyContent">' + 
 
    '<img src="http://i.imgur.com/hWt5kD1.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/Syedh0I.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/poNqEaq.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/pOZxM0p.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/1kAlmlk.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/eQkWHgl.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/TGvXhcV.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/NrJd1Tn.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/hxfBhl7.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/4VUjHa1.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/CL5EmVj.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/buHkEfj.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/KZIRQJL.jpg" width="150" height="100" />' + 
 
    '<img src="http://i.imgur.com/gOm3tNd.jpg" width="150" height="100" />' + 
 
    '</div>' + 
 
    '</div>'; 
 

 
var contentString3 = '<div id="content">' + 
 
    '<div id="siteNotice">' + 
 
    '</div>' + 
 
    '<h1 id="firstHeading" class="firstHeading">Octopus on Via Buia</h1>' + 
 
    '<div id="bodyContent">' + 
 
    '<img src="http://i.imgur.com/0tOabHO.jpg" alt="Test Image" width="100" height="150" />' 
 
'</div>' + 
 
'</div>'; 
 

 

 
//marker info windows 
 
var infoWindowOptions1 = { 
 
    content: contentString1 
 
}; 
 

 
var infoWindowOptions2 = { 
 
    content: contentString2 
 
}; 
 

 
var infoWindowOptions3 = { 
 
    content: contentString3 
 
}; 
 

 
var infoWindowOptions4 = { 
 
    content: 'Resta and Various Artists' 
 
}; 
 

 
//Events for clicking on the markers 
 
var infoWindow1 = new google.maps.InfoWindow(infoWindowOptions1); 
 
google.maps.event.addListener(marker1, 'click', function(e) { 
 
    infoWindow1.open(map, marker1); 
 
}); 
 

 
var infoWindow2 = new google.maps.InfoWindow(infoWindowOptions2); 
 
google.maps.event.addListener(marker2, 'click', function(e) { 
 
    infoWindow2.open(map, marker2); 
 
}); 
 

 
var infoWindow3 = new google.maps.InfoWindow(infoWindowOptions3); 
 
google.maps.event.addListener(marker3, 'click', function(e) { 
 
    infoWindow3.open(map, marker3); 
 
}); 
 

 
var infoWindow4 = new google.maps.InfoWindow(infoWindowOptions4); 
 
google.maps.event.addListener(marker4, 'click', function(e) { 
 
    infoWindow4.open(map, marker4); 
 
}); 
 

 

 
var directionsService = new google.maps.DirectionsService(); 
 

 
var waypts = []; 
 

 
stop = new google.maps.LatLng(43.8402250, 10.5008083) 
 
waypts.push({ 
 
    location: stop, 
 
    stopover: true 
 
}); 
 
stop = new google.maps.LatLng(43.83811, 10.50328) 
 
waypts.push({ 
 
    location: stop, 
 
    stopover: true 
 
}); 
 
stop = new google.maps.LatLng(43.8439194, 10.5032083) 
 
waypts.push({ 
 
    location: stop, 
 
    stopover: true 
 
}); 
 
stop = new google.maps.LatLng(43.8405167, 10.5038722) 
 
waypts.push({ 
 
    location: stop, 
 
    stopover: true 
 
}); 
 

 
function calcRoute() { 
 

 
    start = startMarker.getPosition(); 
 
    end = startMarker.getPosition(); 
 

 
    var request = { 
 
    origin: start, 
 
    destination: end, 
 
    waypoints: waypts, 
 
    optimizeWaypoints: true, 
 
    travelMode: google.maps.DirectionsTravelMode.WALKING 
 
    }; 
 

 
    var bounds = new google.maps.LatLngBounds(); 
 
    if (poly && poly.setMap) poly.setMap(null); 
 
    poly = new google.maps.Polyline({ 
 
    path: [], 
 
    strokeColor: "#58FA58", 
 
    strokeOpacity: 1.0, 
 
    strokeWeight: 3 
 
    }); 
 

 

 

 
    directionsService.route(request, function(response, status) { 
 
    //console.log(response.routes[0].legs); 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     var legs = response.routes[0].legs; 
 
     for (i = 0; i < legs.length; i++) { 
 
     var steps = legs[i].steps; 
 
     for (j = 0; j < steps.length; j++) { 
 
      //console.log(steps[j].instructions); 
 
      var nextSegment = steps[j].path; 
 
      for (k = 0; k < nextSegment.length; k++) { 
 
      poly.getPath().push(nextSegment[k]); 
 
      bounds.extend(nextSegment[k]); 
 
      } 
 
     } 
 
     } 
 
    } else { 
 
     alert("Something went wrong" + status); 
 
    } 
 
    }); 
 

 
    poly.setMap(map); 
 
    //poly.setPath([]); why does this not work? 
 
} 
 

 
calcRoute();

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
#map { 
 
    height: 100%; 
 
    margin: 0; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<h1>Graffmap</h1> 
 
<hr/> 
 
<p> 
 
    Grab and drag the flag marker to indicate your starting position.</p> 
 
<hr/> 
 
<div id="map"></div>