Googleマップで移動するマーカーを作成する方法

Question

私のアプリでGoogleマップを使用しています。

ユーザーは、マップ内の任意の場所にマーカーを配置することができることです。

この目的を達成するために、私は次のコードを書いた：

var marker; 

function myMap() { 

    var mapCanvas = document.getElementById("map-canvas"); 
    var myCenter=new google.maps.LatLng(50.833,-12.9167); 
    var mapOptions = {center: myCenter, zoom: 5}; 
    var map = new google.maps.Map(mapCanvas, mapOptions); 

    google.maps.event.addListener(map, 'click', function(event) { 

    //marker.setMap(null); // this line does not work 
    placeMarker(map, event.latLng); 
    }); 
} 

function placeMarker(map, location) { 

    marker = new google.maps.Marker({ 
     position: location, 
     map: map 
    }); 

} 

マーカーは、常にユーザーがクリックした場所に移動することになっています。 ライン

marker.setMap(null); 

は（新しいマーカーが配置される前に）古いマーカーを削除することになっています。 しかし、コードのこの行では、マーカーを置くことはできません。この線を含まないことは、すべてのマーカーが地図にとどまり、削除されないことを意味します（つまり、地図は時間の経過とともにマーカーでいっぱいになります）。

Answer 1

javascriptコンソールを見ると、Uncaught TypeError: Cannot read property 'setMap' of undefinedが表示されます。最初にマーカーがnullの場合、マッププロパティーがすでに存在する場合は、そのマッププロパティーをnullに設定する必要があります。

google.maps.event.addListener(map, 'click', function(event) { 

    if (marker) marker.setMap(null); 
    placeMarker(map, event.latLng); 
}); 

proof of concept fiddle

コードスニペット：

var marker; 
 

 
function myMap() { 
 

 
    var mapCanvas = document.getElementById("map-canvas"); 
 
    var myCenter = new google.maps.LatLng(50.833, -12.9167); 
 
    var mapOptions = { 
 
    center: myCenter, 
 
    zoom: 5 
 
    }; 
 
    var map = new google.maps.Map(mapCanvas, mapOptions); 
 

 
    google.maps.event.addListener(map, 'click', function(event) { 
 

 
    if (marker) marker.setMap(null); 
 
    placeMarker(map, event.latLng); 
 
    }); 
 
} 
 

 
function placeMarker(map, location) { 
 

 
    marker = new google.maps.Marker({ 
 
    position: location, 
 
    map: map 
 
    }); 
 

 
} 
 
google.maps.event.addDomListener(window, "load", myMap);

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>

Answer 2

変数にこのメソッドがない場合、最初のクリック後にメソッドsetMapを使用しようとすると問題が発生することがあります。したがって、最初ににメソッドがあるかどうかを確認し、それを呼び出します。

google.maps.event.addListener(map, 'click', function(event) { 

     // check if setMap is available and call it. 
     if(marker.hasOwnProperty('setMap')){ 
      marker.setMap(null); 
     } 
     placeMarker(map, event.latLng); 

});