Develop Reference

Google Maps Javascript API: infowindow opens at same position, although multiple markers

I set up a map with multiple markers using Google Maps Javascript API. If a marker is clicked, an infowindow opens. However, while the content is correct (different for each marker), the infowindow opens above one and the same marker, no matter which one is clicked.
To fix this, I tried to explicitly set the correct position (long/lat) in the eventlistener function. According to console log output, the values for long and lat are correct. But the infowindows still opens at the wrong, identical position.
Here is the code; placeMarker is called from within a loop through all locations:
var activeInfoWindow;
function placeMarker(map, lat, lng, markerurl, title, contentString) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
icon: markerurl,
map: map,
title: title,
});
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
// close other active infowindows
if (activeInfoWindow) {
activeInfoWindow.set("marker", null);
activeInfoWindow.close();
}
// added to explicitly set new position:
infowindow.setPosition(new google.maps.LatLng(lat, lng));
// check: console log shows on click: lat and long correct (different for each clicked marker)
console.log(lat+' '+lng+' '+title);
infowindow.open(map, marker);
activeInfoWindow = infowindow;
});
}
Any idea what I am missing?
Thanks!

Solved. Simply needed to add "var" before "marker":
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
icon: markerurl,
map: map,
title: title,
});

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

Google Map Markers With Url

I really cant understand javascript, i know it should be a very easy question but i stucked..
I have a google map with multiple markers and i added every marker and work perfect but i wanted to give them links. My locations array is like;
['http://website.com',36.598900,35.202094,'1']
i use [1] and [2] as lat long but i wanted to use [0] as link. My loop works perfect but every marker's link going to last item's link
Here is my loop
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: image,
url: locations[i][0],
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
}
Where did i make the mistake?

1/ You need to add var before marker = new google.maps.Marker({ ,
Because , you use now marker as Global variable which is overridden for each iteration.
2/ Anyway, best practices are to save all markers as object attributes . Let's call this Object: mk , then your markers will be mk.marker0,mk.marker1,...so on.
var mk={}; // this is nameSpace to save all markers
locations.map((loc,i)=>{
mk['marker'+i] = new google.maps.Marker({
position: new google.maps.LatLng(loc[1], loc[2]),
map: map,
icon: image,
url: loc[0],
});
return mk['marker'+i];
}).forEach((marker)=>{
google.maps.event.addListener(marker, 'click', function() {
window.location.href = marker.url;
});
})

Google maps Marker link failure

My google marker link refuses to function. i click it will not open the link.
// Let's also add a marker while we're at it
var image = 'images/icons/mapicon.png';
var beachMarker = new google.maps.Marker({
position: new google.maps.LatLng(39.419659, -77.4126419),
map: map,
icon: image,
url: 'https://www.google.com'
});
google.maps.event.addListener(marker, 'click', function() {
window.open(marker.url);
});

Your addListener is pointing to marker variable, but your marker is defined as beachMarker.

how can remove the last marker google maps v3

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