how to close a infowindow on googlemap - google-maps

I am trying to find how to autoclose or/and to close a infowindow of a marker (google map).
I worked on that code but I do not understand why the close function does not close de infowindow. I have no errors on my Firefox console
Here is the code and your help will be appreciated
//Infowindow
google.maps.event.addListener(markers[i], 'click', function() {
/* the marker's content gets attached to the info-window: */
var info = new google.maps.InfoWindow({
content: this.content
});
info.close(); // IT DOES NOT CLOSE the open infowindow or all open
/* trigger the infobox's open function */
info.open(map,this); //This works
/* keep the handle, in order to close it on next click event */
//infos[0]=info;
});
Thank a lot

I have similar code that seems to work when I add infowindow.close(), perhaps you can find the answer in mine:
google.maps.event.addListener(marker, 'click', (function(marker, content) {
return function() {
map.panTo(marker.position);
infowindow.setContent(content);
infowindow.open(map, marker);
map.circle.setCenter(marker.position);
infowindow.close();
}
})(marker, content));

you need to pass two parameters when closing the infowindow. You can try the functions listed below. The close method is called on the click event to close the existing infowindow before opening the new infowindow on the marker.
This code will remove the infowindow as soon as you move your mouse away from the marker and it will open the infowindow when you click on the marker.
Try this out and let me know.
var info = new google.maps.InfoWindow({
content: this.content
});
google.maps.event.addListener(marker, 'click', function() {
info.close(map,marker);
info.open(map,marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
info.close(map,marker);
});

Related

Google maps markers, close infobox when the mouse leaves the marker and infobox

I want the infobox to be closed when the mouse leaves the marker and infobox area.
The problem is that the way I'm trying to check if the mouse is over the infobox doesn't work.
EDIT:
This is the function I'm using know:
google.maps.event.addListener(marker, 'mouseout', (function(marker, contentString) {
return function() {
ib.close();
};
})(marker, contentString));
First of all, your infobox overlaps the marker, so once it opens it will cause a mouseout on the marker, and that will immediately close it.
So you need to also add events to the infobox element.
You can do that on the domready event of the infobox, as it is dynamically added to the DOM.
And then you need to put a delay on the mouseout event of the marker which you will clear if the user mouseenters the infobox.
Something like this
var ibTimeout;
google.maps.event.addListener(marker, "mouseover", function (e) {
ib.open(theMap, this);
});
google.maps.event.addListener(marker, "mouseout", function (e) {
ibTimeout = setTimeout(function(){
ib.close();
}, 50);
});
google.maps.event.addListener(ib, 'domready', function(e){
$('.infobox').on('mouseenter', function(e){
clearTimeout(ibTimeout);
}).on('mouseleave', function(e){
clearTimeout(ibTimeout);
ib.close();
});
});
Demo at http://jsfiddle.net/gaby/t4cPt/39/
google.maps.event.addListener(marker, 'mouseout', (function() {
infowindow.close();
});
google.maps.event.addListener(infowindow, 'mouseout', (function() {
this.close();
});

Google Maps API v3 Multiple Info Boxes not opening on click

Can somebody please explain why my Google Maps info windows are only opening at the bottom left marker?
See here for the fiddle http://jsfiddle.net/Vj3nw/7/
When I click on any of the markers, only the bottom-left one is opened. I would like the marker that is clicked to open.
I believe the problem is due to the loop below, and this question seems to have the same problem Setting onclick to use current value of variable in loop
"The problem you were hitting is that javascript doesn't use block scope. Instead all variables have a lifetime of their containing function. So there was only ever one a captured in all of the onclick functions and they all see it's final value."
I just can't quite translate that solution to mine.
Many thanks.
for (var i = 0; i < 4; i++) {
var marker = new google.maps.Marker({
position: flightPlanCoordinates[i],
icon: Symbol,
map: map
});
infowindow = new google.maps.InfoWindow();
infowindow.setContent("hello");
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
Generating your markers and adding the listeners in their own function, called from the loop like the updated fiddle works.
function create_marker(i,flightPlanCoordinates,Symbol,map){
var marker = new google.maps.Marker({
position: flightPlanCoordinates[i],
icon: Symbol,
map: map
});
infowindow = new google.maps.InfoWindow();
infowindow.setContent("hello" + i);
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}

Google Map V3 - Allow only one infobox to be displayed at a time

I'm moving from infoWindow to infoBox for better looking info windows.
I have a number of markers on the map. What I want to do is when one infoBox is already opened, if the user clicks on other markers, the current infoBox will close automatically and new infoBox will open so that the user does not need to close the current infoBox, and there will always be only one infoBox displayed at a time.
Here's the demo and code of my current solution
http://jsfiddle.net/neo3000ultra/9jhAy/
Thanks in advance!
Change this part:
google.maps.event.addListener(marker, "click", function (e) {
ib.open(map, this);
});
var ib = new InfoBox(myOptions);
google.maps.event.addListener(marker2, "click", function (e) {
ib2.open(map, this);
});
var ib2 = new InfoBox(myOptions2);
to the following:
var ib = new InfoBox();
google.maps.event.addListener(marker, "click", function (e) {
ib.close();
ib.setOptions(myOptions)
ib.open(map, this);
});
google.maps.event.addListener(marker2, "click", function (e) {
ib.close();
ib.setOptions(myOptions2)
ib.open(map, this);
});
Works for me, also in IE9: http://jsfiddle.net/doktormolle/9jhAy/1/
Note the use of ib.close() before opening the infoBox, seems to be the trick.
The usual suggestion for a single infowindow is to only create one, then reuse it for all the markers (changing its content).
Here is an example that does that with the v3 API (I think of it as "v2 infowindow behavior" because the v2 API only allowed a single infowindow)
http://www.geocodezip.com/v3_markers_normal_colored_infowindows.html
Here is another example based off of Mike Williams' v2 tutorial:
http://www.geocodezip.com/v3_MW_example_map1.html
and your example modified:
http://jsfiddle.net/uGnQb/6/

google maps v3 marker info window on mouseover

I have scoured stackoverflow and other forums including the google maps v3 api docs for an answer but I cannot find how to change the event that fires the marker info window from click to mouseover in the files I am working with.
I am working with a demo from the google library that includes a fusion table layer.
You zoom into the clusters and see the small red circle markers for locations.
You have to click to reveal an info window. I wish to rollover to reveal the info window.
My demo is here:
http://www.pretravelvideo.com/gmap2/
The functions.js file does most of the work here:
http://www.pretravelvideo.com/gmap2/functions.js
Here's an example:
http://duncan99.wordpress.com/2011/10/08/google-maps-api-infowindows/
marker.addListener('mouseover', function() {
infowindow.open(map, this);
});
// assuming you also want to hide the infowindow when user mouses-out
marker.addListener('mouseout', function() {
infowindow.close();
});
var icon1 = "imageA.png";
var icon2 = "imageB.png";
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: icon1,
title: "some marker"
});
google.maps.event.addListener(marker, 'mouseover', function() {
marker.setIcon(icon2);
});
google.maps.event.addListener(marker, 'mouseout', function() {
marker.setIcon(icon1);
});
Thanks to duncan answer, I end up with this:
marker.addListener('mouseover', () => infoWindow.open(map, marker))
marker.addListener('mouseout', () => infoWindow.close())

Updating Maps V3 with 'idle' Listener. Opening InfowWindow triggers this and hides the marker

This loads the map, gets new results and removes the old ones:
google.maps.event.addListener(map, 'idle', function() {
updateMap();
});
That part works great.
My trouble comes when I click on a marker to open it's InfoWindow. Opening an InfoWindow re-centers the map around the marker, which triggers the Listener from above, which then resets the map, hiding the InfoWindow.
Here is how I am creating the markers/InfoWindow:
var infowindow = new google.maps.InfoWindow({});
function makeMarker(LatLong, markerName) { //this is called from a loop
var marker = new google.maps.Marker({
position: LatLong,
map: map,
title:markerName,
content: "html for the infoWindow"
});
//Detect marker click
google.maps.event.addListener(marker, "click", function() {
infowindow.setContent(this.content);
infowindow.open(map, marker);
});
}
Any insights are greatly appreciated.
updateMap might be where the underlying problem is. When you're updating the map you really don't need to be deleting every marker and adding it again; instead you want to remove the ones that you no longer need and add the ones that you do. (Admittedly, the first strategy is much simpler and works well for most use cases.)
Alternatively, there are two approaches I'd explore:
Store a global variable like markerClick and implement something like:
google.maps.event.addListener(map, 'idle', function() {
if(!markerClick){
updateMap();
markerClick = false;
}
});
google.maps.event.addListener(marker, "click", function() {
markerClick = true;
infowindow.setContent(this.content);
infowindow.open(map, marker);
});
The one ceveat being that is really a quick hack, and could definitely cause trouble if a marker is clicked that doesn't trigger the idle event (i.e. one in the center or something).
Don't use idle anymore. Events like dragend and zoom_changed might better capture the specific user interactions you're looking for.
Adding to bamnet's answer and maybe it will be useful for someone. It is not an answer by itself, because it was already answered but I had almost the same problem. In my case, the conflict was between dragging and redrawing.
When the user was dragging and taking the marker too far that the map was being panned. Therefore, the 'idle' would be called somewhere in the middle of the drag and drop process causing the moving marker to be positioned on the starting point. To avoid that, I've employed the same approach proposed by bamnet but using the dragstart and dragend events like following:
markerDrag = false;
google.maps.event.addListener(map, 'idle', function() {
if(!markerDrag) {
updateMap();
}
});
google.maps.event.addListener(marker, 'dragstart', function() {
markerDrag = true;
});
google.maps.event.addListener(marker, 'dragend', function() {
// do stuff here, send new position to the server, etc.
// ...
markerDrag = false;
});
I hope it will be helpful for someone.