removing previous marker before adding new marker in google maps
Add code to remove the marker from the map if it exists and has a .setMap method (assumes the existing marker is available in the current scope or is global):
if (marker && marker.setMap) {
marker.setMap(null);
}
complete function:
google.maps.event.addListener(map, "click", function (e) {
latLng = e.latLng;
console.log(e.latLng.lat());
console.log(e.latLng.lng());
image = clientURL + "/common/images/markers/red.png";
console.log("Marker");
// if marker exists and has a .setMap method, hide it
if (marker && marker.setMap) {
marker.setMap(null);
}
marker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
});
proof of concept fiddle
code snippet:
var geocoder;
var map;
var marker;
function initialize() {
var 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(e) {
latLng = e.latLng;
console.log(e.latLng.lat());
console.log(e.latLng.lng());
console.log("Marker");
// if marker exists and has a .setMap method, hide it
if (marker && marker.setMap) {
marker.setMap(null);
}
marker = new google.maps.Marker({
position: latLng,
map: map
});
});
}
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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
Similar to the answer you linked in your question you need to maintain a global reference to the last marker added to the map (the previous marker to be removed).
var map;
var previousMarker; // global variable to store previous marker
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
map.addListener('click', function(e) {
// if the previousMarker exists, remove it
if (previousMarker)
previousMarker.setMap(null);
latLng = e.latLng;
console.log(e.latLng.lat());
console.log(e.latLng.lng());
//image = clientURL + "/common/images/markers/red.png";
console.log("Marker");
previousMarker = new google.maps.Marker({
position: latLng,
map: map
});
}
);
}