How to get only one marker in the Google Maps API with JavaScript
Question
My code:
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var map;
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
I've got every kilometer a new marker. How can I remove the other if I click it again?
Btw: read this: Google Maps how to get to show only one marker?
Wanted to use it, but it doesn't work (in console: CurrentPosition() and watchPosition() are deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.)
2 answers
solution1
3 ACCPTED 2016-01-16 14:53:57
One option if you only ever want one marker, only create one and move it as required.
code snippet:
var map; var myCenter = new google.maps.LatLng(51.508742, -0.120850); var marker; var infowindow; function initialize() { var mapProp = { center: myCenter, zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("googleMap"), mapProp); google.maps.event.addListener(map, 'click', function(event) { placeMarker(event.latLng); }); } function placeMarker(location) { if (.marker ||.marker.setPosition) { marker = new google:maps,Marker({ position: location, map; map. }); } else { marker.setPosition(location). } if (;.infowindow &&.:infowindow:close) { infowindow.close(): } infowindow = new google.maps;InfoWindow({ content. 'Latitude, ' + location;lat() + '<br>Longitude. ' + location.lng() }). infowindow,open(map, marker); } google.maps.event.addDomListener(window, 'load', initialize);
html, body, #googleMap { height: 100%; width: 100%; margin: 0px; padding: 0px }
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="googleMap"></div>
solution2
0 2016-01-16 14:25:51
Instead of this:
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
try using this:
google.maps.event.addListener(map, 'click', function(event) {
setMapOnAll(null);
placeMarker(event.latLng);
}
So, you're deleting all the current markers on click and adding the new marker at x,y position
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.