How do I clear the old pinned marker location and place it on new location? Am using Google Javascript API map with autocomplete search. When I search for a location the marker will pin on the location in map, if I type new location it will add another marker, but I don't want it that way, I want it to add marker to new location and clear the old pinned location.
Sample image
From the above image, I want only one green marker on current typed location, if location changes it will be placed only on new one not create multiple markers.
var autocomplete;
var countryRestrict = {'country': 'us'};
var MARKER_PATH = 'https://developers.google.com/maps/documentation/javascript/images/marker_green';
var componentForm = {
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name'
};
var initOptions = {
'current': {
center: {lat: 2.9248795999999997, lng: 101.63688289999999},
zoom: 15,
country: 'MY',
componentRestrictions: {'country': 'us'}
}
};
var customLabel = {
restaurant: {
label: 'R'
},
bar: {
label: 'B'
}
};
function initGoogleMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: initOptions['current'].zoom,
center: initOptions['current'].center,
mapTypeControl: false,
panControl: false,
zoomControl: false,
streetViewControl: false,
clickableIcons: false,
fullscreenControl: false
});
var input = document.getElementById('SeachLOcationToBuy');
autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
/*map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);*/
autocomplete.setComponentRestrictions({'country': initOptions['current'].country});
var markerLetter = String.fromCharCode('A'.charCodeAt(0) + (1 % 26));
var markerIcon = MARKER_PATH + markerLetter + '.png';
var infoWindow = new google.maps.InfoWindow;
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
var point = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());
var marker = new google.maps.Marker({
map: map,
position: point,
icon: markerIcon,
label: 'P'
});
fillInAddress(place);
document.getElementById('UpdateFoodAddress').disabled = false;
document.getElementById('full_address').value = input.value;
/*Set the position of the marker using the place ID and location.*/
marker.setPlace({
placeId: place.place_id,
location: place.geometry.location
});
marker.setVisible(true);
});
downloadUrl("_api/setGeoXmlLocation.php?geolocate=true", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
var counts = xml.documentElement.getElementsByTagName('counter')[0].childNodes[0];
Array.prototype.forEach.call(markers, function(markerElem) {
var id = markerElem.getAttribute('id');
var name = markerElem.getAttribute('name');
var logo = markerElem.getAttribute('logo');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var page = markerElem.getAttribute('page');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng'))
);
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
var img = document.createElement('img');
var imgbox = document.createElement('div');
var br = document.createElement('br');
var span = document.createElement('span');
var text = document.createElement('text');
/*WINDOW*/
infowincontent.setAttribute("class", "app-map-info-window");
text.textContent = address;
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
function fillInAddress(place) {
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing(){
}
initGoogleMap();<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkkzv-gkVsQSAUDOjUdEBmXVqmaDphVjc&libraries=places&callback=initMap"></script>
<input id="SeachLOcationToBuy" class="map-form-control form-control" type="text" name="setMyNewAddress" placeholder="Enter your address" onFocus="geolocate()" value=""/>
<div class="PageBodyContainerMap">
<span class="container">
<span class="GeoMap">
<div id="map"></div>
<div id="infowindow-content">
<span id="place-name" class="title"></span><br>
Place ID <span id="place-id"></span><br>
<span id="place-address"></span>
</div>
</span>
</span>
</div>
