Googleマップの表示回数は2回かかりますか？

Question

私は、ロード時にユーザーの現在の位置をGoogleマップに表示するページを作成しようとしています。さまざまな可能な宛先の選択リストもあります。選択リストが変更されると、現在位置から目的地までのルートが地図に表示されます。ここまでは順調ですね！

どこがうまくいかないのは、運転の方向を追加しようとするときです。何らかの理由で彼らは二度現れますが、なぜ私は見ることができません。これはコードです：

var latitude = 0; 
var longitude = 0; 
$(document).ready(function() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(initMap); 
    } else { 
     document.getElementById("feedback").innerHTML = "Geolocation is not supported by this browser."; 
    } 
}); 
function initMap(position) { 
    latitude = position.coords.latitude; 
    longitude = position.coords.longitude; 
    latlong = latitude + "," + longitude; 
    var myCentre = new google.maps.LatLng(latitude,longitude); 
    var directionsService = new google.maps.DirectionsService; 
    var directionsDisplay = new google.maps.DirectionsRenderer; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 14, 
     center: {lat: latitude, lng: longitude}, 
     mapTypeId:google.maps.MapTypeId.ROADMAP 
    }); 
    var marker = new google.maps.Marker({ 
     position: myCentre, 
     title: 'Your current position' 
    }); 
    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById('dirs'));   
    marker.setMap(map); 

    var control = document.getElementById('floating-panel'); 
    control.style.display = 'block'; 
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(control); 



    var onChangeHandler = function() { 
     calculateAndDisplayRoute(directionsService, directionsDisplay, myCentre, marker); 
    }; 
    document.getElementById('end').addEventListener('change', onChangeHandler); 
} 

function calculateAndDisplayRoute(directionsService, directionsDisplay, myStart, marker) { 
    marker.setMap(null); 
    directionsService.route({ 
     origin: myStart, 
     destination: document.getElementById('end').value, 
     travelMode: google.maps.TravelMode.DRIVING 
    }, function(response, status) { 
     if (status === google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     } else { 
      window.alert('Directions request failed due to ' + status); 
     } 
    }); 
} 

私はそれがラインに何か持って推測している：

directionsDisplay.setMap(map); 
directionsDisplay.setPanel(document.getElementById('dirs')); 

を私は正直に何を見ることはできません。 Googleサイト（https://developers.google.com/maps/documentation/javascript/examples/directions-panel）の例には、2つの非常に類似した行がありますが、同じ問題はありません。私は明らかに不必要に何度も何かを呼びますが、何ですか？それはinitMap関数内であるため、

おかげ

Answer 1

のonChangeハンドラは二回発射されます。 initMap関数の外に（すべてのパラメータの変数とともに）移動すると、意図したとおりに機能します。だから、コードは次のとおりです。

var latitude = 0; 
var longitude = 0; 
$(document).ready(function() { 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(initMap); 
    } else { 
     document.getElementById("feedback").innerHTML = "Geolocation is not supported by this browser."; 
    } 
}); 
var directionService = ""; 
var DirectionsRenderer = ""; 
var myCentre = ""; 
var marker = ""; 
function initMap(position) { 
    latitude = position.coords.latitude; 
    longitude = position.coords.longitude; 
    latlong = latitude + "," + longitude; 
    myCentre = new google.maps.LatLng(latitude,longitude); 
    directionsService = new google.maps.DirectionsService; 
    directionsDisplay = new google.maps.DirectionsRenderer; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 14, 
     center: {lat: latitude, lng: longitude}, 
     mapTypeId:google.maps.MapTypeId.ROADMAP 
    }); 
    marker = new google.maps.Marker({ 
     position: myCentre, 
     title: 'Your current position' 
    }); 

    directionsDisplay.setMap(map); 
    var panel = document.getElementById('dirs'); 
    directionsDisplay.setPanel(panel);  
    marker.setMap(map); 

    var control = document.getElementById('floating-panel'); 
    control.style.display = 'block'; 
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(control); 




} 
var onChangeHandler = function() { 
    var end = document.getElementById('end').value; 
    calculateAndDisplayRoute(directionsService, directionsDisplay, myCentre, marker, end); 

}; 
document.getElementById('end').addEventListener('change', onChangeHandler); 
function calculateAndDisplayRoute(directionsService, directionsDisplay, myStart, marker, end) { 
    marker.setMap(null); 
    directionsService.route({ 
     origin: myStart, 
     destination: end, 
     travelMode: google.maps.TravelMode.DRIVING 
    }, function(response, status) { 

     if (status === google.maps.DirectionsStatus.OK) { 

      directionsDisplay.setDirections(response); 
     } else { 
      window.alert('Directions request failed due to ' + status); 
     } 
    }); 
} 

はまだ少しその場しのぎのように感じるが、私は少しそれを整理することができshoudl。