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

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

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

How to keep single Info window open at the same time in Google map V3?

aI know that this one is repeated question,
I am using google map v3 on my Django web based applicaiton. Where i am using Markers, Infowindow and polyline. Everything works fine, except the one when i click on a marker to show the content by Info window, the previous opened info window didn't closed.
I am posting the my map code(only the script part or which are the useful):
var marker = add_marker(flightPlanCoordinates[i][0], flightPlanCoordinates[i][1],"Event Detail",myHtml);
Here myHtml is a variable which contains the Info window content. I didn't define the variable here. SO ignore it.
marker.setMap(map);
}
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinatesSet,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
function add_marker(lat,lng,title,box_html) {
var infowindow = new google.maps.InfoWindow({
content: box_html
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
title: title
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,this);
});
return marker;
}

Instead of multiple infoWindows use only one instance.
When clicking on a marker, first close the infoWindow, then set the new content and open the infoWindow.
function add_marker(lat,lng,title,box_html)
{
//create the global instance of infoWindow
if(!window.infowindow)
{
window.infowindow=new google.maps.InfoWindow();
}
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
map: map,
title: title
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
infowindow.setContent(box_html);
infowindow.open(map,this)
});
return marker;
}

trigger google maps marker click

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