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 );
});
}
Related
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 want to open two infowindows on the same marker. On 'click' event first infowindow should close (which I am showing already on map) and open the second infowindow. On closing the second infowindow, I'd like to open the first window.
Here is my code:
var infowindow = new google.maps.InfoWindow({
content: content,
marker:marker,
maxWidth: 300,
image:image,
id:vehicleNo
});
var openinfowindow = new google.maps.InfoWindow({
content: contentone,
marker:marker,
maxWidth: 300,
image:image,
id:vehicleNo
});
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
openinfowindow.close();
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
google.maps.event.addListener(infowindow,'closeclick',function(){
openinfowindow.setContent(contentone);
openinfowindow.open(map,marker);
});
As the only difference between the infowindows is the desired content, you may use a single infowindow and simply toggle the content:
var infowindow = new google.maps.InfoWindow({
contents:[content,contentOne],
marker:marker,
maxWidth: 300,
image:image,
id:vehicleNo
});
google.maps.event.addListener(marker,'click', (function(marker,
contents,
infowindow){
return function() {
infowindow.contents=[contents[0],contents[1]];
infowindow.setContent(contents[0]);
infowindow.open(map,marker);
};
})(marker,infowindow.contents,infowindow));
google.maps.event.addListener(infowindow,'closeclick',function(){
var that=this;
that.contents.reverse();
that.setContent(this.contents[0]);
setTimeout(function(){
that.open(map,marker);},
100);
});
http://jsfiddle.net/doktormolle/affgpsvt/
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 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.
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());
});