This question already has answers here:
GoogleMaps v3 API Create only 1 marker on click
(5 answers)
Closed 5 years ago.
I want the user to place a marker on a Google Map on a page. If the user clicks again, the first marker should disappear, and be replaced by the new one. How would I do this, starting from this code, as provided by Google:
function myMap() {
var mapCanvas = document.getElementById("map");
var mapOptions = {
center: new google.maps.LatLng(51.7, 5), zoom: 6
};
var map = new google.maps.Map(mapCanvas, mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
My first attempt was to add marker.remove(); at the start of the addListener function, this did not work for me.
Thanks in advance for any help!
Found the answer myself. Replacing the AddListener with the below worked great:
GoogleMaps v3 API Create only 1 marker on click
var marker;
function placeMarker(location) {
if ( marker ) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
position: location,
map: map
});
}
}
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
The following code helps you in placing the marker when the user clicks. If user clicks again the earlier marker is removed and the new position is marked. My answer aims at rectifying your mistakes in the first try you did. Try this.
var flag=0,marker;
map.addListener('click', function(e) {
if(flag)
marker.setMap(null);
else
flag=1;
marker = new google.maps.Marker({
position: e.latLng,
map: map});
});
Related
This is my code
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
//map.on('click', function(){});
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latlng,
map: map
});
map.setCenter(event.latlng);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
when I click on the map nothing happens. So, I tried to make alter like this:
google.maps.event.addListener(map, 'click', function(event) {
alter("here");
var marker = new google.maps.Marker({
position: event.latlng,
map: map
});
map.setCenter(event.latlng);
});
The alter works. so the function is being executed but the marker is not being added, could you help please? many thanks
Edit
I tried to do this:
alert(event.latlng);
and I got undefined
I think you are using incorrect variable. It should be event.latLng instead of event.latlng. Note the uppercase L in variable name.
Demo: http://jsfiddle.net/lotusgodkk/x8dSP/3578/
position: event.latLng,
I've got an issue, I can't make the marker clickable for my project. I've tried with google.com but nothing works. Can some one help me ?
var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
<!--Add markers to map using previously specified locations-->
var marker = new google.maps.Marker({
position: myLatlng,
url:'http://www.google.com',
title: 'Tobermory Distillery',
map: map,
});
Thanks
you can bind onclick to markers like this:
google.maps.event.addListener(marker, 'click', function() {
location.href = 'http://www.google.com';
});
I have a html form for adding new places in my data ,
I want the user add marker and delete last marker ,
I found this code but it is added more than one marker
How can make it delete the last one?
because I need just one marker? this is the demo of form http://saudi-hotels.info/add_hotel.php
<script type="text/javascript">
var map;
function mapa()
{
var opts = {'center': new google.maps.LatLng(26.12295, -80.17122),
'zoom':11, 'mapTypeId': google.maps.MapTypeId.ROADMAP }
map = new google.maps.Map(document.getElementById('mapdiv'),opts);
google.maps.event.addListener(map,'click',function(event) {
document.getElementById('long').value = event.latLng.lng();
document.getElementById('lat').value = event.latLng.lat();
marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(event.latLng.lat(),event.latLng.lng()),
});
}
);
}
</script>
please help me ,
You can create a global variable that tracks the last created marker:
var lastMarker;
And then, whenever you create a new marker, set lastMarker to the newly created marker:
lastMarker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(26.12295, -80.17122)
});
Then, whenever you want to remove the last created marker, you can use the lastMarker variable:
lastMarker.setMap(null);
I have a google map set up to find the user's current location, and center the map at that closest marker to their location. The markers, when clicked, open up an infobox (note this is a little different than an infoWindow - http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html). What I want to do, however, is automatically open up the nearest marker without the user actually clicking. Here's the code to trigger a marker opening:
//loop through all locations to add a marker:
addMarker = function(loc) {
var markerLoc = new google.maps.LatLng(loc.Lat, loc.Long);
var marker = new google.maps.Marker({
map: map,
position: markerLoc
});
google.maps.event.addListener(marker, "mousedown", function() {
var infoOpts = {
content: loc.markerText,
boxStyle: { background: "none transparent", width: "180px"},
pixelOffset: new google.maps.Size(-90, 0),
closeBoxMargin: "5px"
};
var ib = new InfoBox(infoOpts);
ib.open(map, marker);
});
markers.push(marker);
};
So somehow I have to trigger the mouseDown function of the appropriate marker, but it has to be done in a function outside of this one. I will have a reference to the appropriate marker in the array (markers[closestmarker]).
I see that this question has been sitting for quite awhile, but, just in case, this answer may be helpful:
trigger google maps marker click
The code would look like this:
var marker = new google.maps.Marker({});
new google.maps.event.trigger( marker, 'click' );
I found I needed to attach a click event to the marker like so
var marker = new google.maps.Marker({});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
new google.maps.event.trigger( marker, 'click' );
I had code that was working for map V2 but have since upgraded to V3 and the constructors are different. I want to limit my map to 1 marker only. Here's the code to add a marker:
myListener = google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
....
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map,
draggable: true
});
map.setCenter(location);
I need code that will remove myListener once a marker is placed. Thanks for any help you can provide.
try google.maps.event.addListenerOnce() method instead
I used this code and it did the trick:
myListener = google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng), google.maps.event.removeListener(myListener);
});