Рельсы Google Map JavaScript, показывают только одну точку и удалить одну точку метки, когда другая точка была нажмите

Question

я использовать код в этом примере

var map; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 10, 
 
    center: { lat: 35.687719, lng: 139.702146 } 
 
    }); 
 

 
    map.addListener('click', function(e) { 
 
    window.event = e; 
 
    placeMarkerAndPanTo(e.latLng, map); 
 
}); 
 
} 
 

 
function placeMarkerAndPanTo(latLng, map) { 
 
    var marker = new google.maps.Marker({ 
 
    position: latLng, 
 
    map: map 
 
    }); 
 
    
 
    map.panTo(latLng); 
 
}

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

<div id="map"></div> 
 
<!-- Replace the value of the key parameter with your own API key. --> 
 
<script async defer 
 
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwqIkJwBb6g4KirOaLnNgE1I6MtWnKxac&callback=initMap&language=ja"> 
 
</script>

Теперь я хочу показать только одну точку на карте lng, lat. И когда я нажимаю одну новую точку на карте, я хочу удалить маркер для старой точки на карте, чтобы показать только одну точку. Можете ли вы мне помочь. Благодаря

Answer 1

var map; 
 
var gmarkers = []; 
 

 
function initMap() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 10, 
 
    center: { lat: 35.687719, lng: 139.702146 } 
 
    }); 
 

 
    map.addListener('click', function(e) { 
 
    removeMarkers(); 
 
    window.event = e; 
 
    placeMarkerAndPanTo(e.latLng, map); 
 
}); 
 
} 
 

 
function placeMarkerAndPanTo(latLng, map) { 
 
    
 
    var marker = new google.maps.Marker({ 
 
    position: latLng, 
 
    map: map 
 
    }); 
 
    
 
    map.panTo(latLng); 
 
    gmarkers.push(marker); 
 
} 
 
    
 
function removeMarkers() { 
 
    for (i = 0; i < gmarkers.length; i++) { 
 
    gmarkers[i].setMap(null); 
 
    } 
 
}

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

<div id="map"></div> 
 
<!-- Replace the value of the key parameter with your own API key. --> 
 
<script async defer 
 
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDwqIkJwBb6g4KirOaLnNgE1I6MtWnKxac&callback=initMap&language=ja"> 
 
</script>