Develop Reference

Allow only a single marker on a Google Map [duplicate]

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});
});

Adding an Infobox to GoogleMaps?

I'm trying to add an infobox to a number of pins on a Google map.
I've got the infobox to work previous - JSfiddle.
But i've now altered the code to include a dropdown menu. I've tried to add the infoboxes again but it doesn't work and i don't understand why it doesn't. JSfiddle.
I've copied and pasted the code for the infoboxes, checked that the variable names still match up, and that the code is in the same order.
The following code is where the marker is added to the map and i'm trying to add an infobox. The function addMarker is sat within my initialisation function. And var infowindow is sat beneath the initialisation function.
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: feature.icon,
map: map,
size: 20,
title: name,
draggable: false,
//animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', (function (marker) {return function () {
var Infocontent = feature.desc;
infowindow.setContent(Infocontent);
infowindow.open(map, marker); //'mouseover'
}
})(marker));
}
var infowindow = new google.maps.InfoWindow();
May someone please tell me where i've gone wrong?

I just updated your code by creating a new fiddle and now it is showing infowindow. I just moved your infowindow code within listener definintion.
Please check
google.maps.event.addListener(marker, 'click', (function (marker) {return function () {
console.log('called');
var Infocontent = feature.desc;
infowindow = new google.maps.InfoWindow();
infowindow.setContent(Infocontent);
infowindow.open(map, marker); //'mouseover'
}
})(marker));
JSFiddle

google maps add marker on click javascript v3

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,

Markers within Google Api

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';
});

Google markers click do function

I got an google maps on my site which are great at the moment, except i would like to call an function for javascript when the marker is clicked. this is the google code for the marker:
var marker = new google.maps.Marker({
position: latingZee,
map: map,
title:"Hello World!",
icon: ZeeImg,
})
And i would to start the next action to be used when the marker is clicked
$('.toggler').live('click',function(){
$(this).parent().children().toggle();
});
Is this possible?

You could try:
google.maps.event.addListener(marker, 'click', function() {
$('.toggler').click();
});
but I'm not sure about mixing jQuery and Google API code in the same place.

Simple marker click like this:
google.maps.event.addListener(marker, 'click', function() {
$('.toggler').parent().children().toggle();
});