I have this code that if the user clicks any part of the map all infowindows should close. But I have no idea why it's not working.
How I open my infowindow:
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content);
infowindow.open(map, marker);
});
What I have to close all upon map click:
google.maps.event.addListener(map, 'click', function() {
infowindow.close(map, marker);
});
EDIT: Having a hard time finding a solution. Most threads that show are about close icon if one is open.
If you have only one marker on your map, named "marker", this should work:
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
As long as the function is run where both the "map" variable and the "infowindow" variable are in scope.
Related
I'm creating a Google map with multiple markers. At the moment each marker has an infowindow, how can I only have one infowindow open at a time?
At the moment it closes all windows on clicking the map.
I know this question has been asked a few times but the code seems vastly different to mine.
// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'click', function() {
infowindow.open( map, marker );
});
google.maps.event.addListener(map, 'click', function(event) {
if (infowindow) {
infowindow.close(); }
});
}
Try this: declare just one infowindow (global to the map, not one by marker).
var infoWindow;
...
if( $marker.html() ){
google.maps.event.addListener(marker, 'click', function() {
if (infoWindow) infoWindow.close();
infoWindow = new google.maps.InfoWindow({
content : $marker.html()
});
infoWindow.open( map, marker );
});
}
How I can get maker ID when click it?
google.maps.event.addListener(marker, 'click', function() {
var locationTitle=marker;
infowindow.setContent(contentString);
infowindow.open(map, marker);});
Try this one
google.maps.event.addListener(marker, 'click', function() {
window.location = "www.cickstart.com/" + marker.id;
});
I am trying to alert the value in the marker so that I can submit a form and pass the value to my servlet to do some processing. I am new to google maps, i am so confused to get this working. infoWindow works fine, when I hover over, it shows the location name and little description and when i mouseout the infowindow closes. I am not able to alert the clicked marker value. Can anyone guide me.
for (i = 0; i < location.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(location[i][2], location[i][3]),
map: map
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
var content = contentString + location[i][0] + " - " + location[i][1] + "</DIV>";
return function() {
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker, i));
google.maps.event.addListener(marker, 'mouseout', function() {
infowindow.close();
});
google.maps.event.addListener(marker, 'click', function() {
alert(location[i][0].trim());
});
}
You can solve in similar way as for mouseover event listener:
(function(i) {
google.maps.event.addListener(marker, 'click', function() {
alert(location[i][0].trim());
});
})(i);
Otherwise error
Uncaught TypeError: Cannot read property '0' of undefined
is reported because i is set past last entry of location array.
I'm looking for a way to re-center the map marker after closing the infowindow. This is what I have and it's not working.
google.maps.event.addListener(infoWindow, 'closeclick', function() {
map.panTo(marker.getPosition());
});
I got it to work. Here's the code:
google.maps.event.addListener(infowindow, 'closeclick', function() {
map.panTo(marker.getPosition());
});
I have set up my makers to dynamically call up an info window AND redirect through to a URL on mouseover thus:
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
location.href='/places/'+locations[i][3];
}
})(marker, i));
How would i modify this so that the info window part happens on mouseover, but the location.href part only happens on click? I've been playing with some permutations and i cant get it to work.
Thanks!
EDIT:
I found the answer: i think i'd missed a semicolon or something:
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
location.href='/spots/'+locations[i][3];
}
})(marker, i));