Remove info window when clicked outside

[Peter]

Does anyone have a complete code sample on how to remove the info
window for the current marker when I click outside it, or click
another info window?

I now have:
google.maps.event.addListener(marker, 'click', function () {
// where I have added .html to the marker object.
infowindow.setContent(this.content);
infowindow.open(map, this);
});

And I think I need to add something to this listener for the info
window for this marker to be closed...

Thanks!

[Esa]

This is one example
http://koti.mbnet.fi/ojalesa/boundsbox/makemarker.htm

[Peter]

Ok,

I have it in my function now, but it doesnt work. What could be wrong?


function ShowMarkers(sDataArray, zoom) {
//lat & lng format=-34.397, 150.644

//center window on center of Netherlands
var latlng = new google.maps.LatLng(sDataArray[0][0], sDataArray[0]
[1]);
var myOptions = {
zoom: zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

var markersArray = [];


for (i=0;i<sDataArray.length;i++){

latlng = new google.maps.LatLng(sDataArray[i][0], sDataArray[i]
[1]);
var contentString = '<div id="content">' + sDataArray[i][3] +
'</div>';

//var infowindow = new google.maps.InfoWindow({ content:
contentString });

var marker = new google.maps.Marker({
position: latlng,
title: sDataArray[i][2],
map: map,
content: contentString,
icon: '/images/locationmarker.png'
});
markersArray.push(marker);
}

for (var i = 0; i < markersArray.length; i++) {
var marker = markersArray[i];
var infowindow = new google.maps.InfoWindow({
content: "holding..."
});

google.maps.event.addListener(marker, 'click', function () {
// where I have added .html to the marker object.
infowindow.setContent(this.content);
infowindow.open(map, this);
});
}

//THESE 3 LINES IS WHAT I ADDED...DOESNT WORK. ALSO TRIED ADDING IT IN
THE ABOVE FOR FUNCTION (2ND)
google.maps.event.addListener(map, "click", function () {
infoWindow.close();
});


AutoCenter(markersArray);

} //ShowMarkers

On Oct 15, 9:06 pm, Esa <esa.ilm...@gmail.com> wrote:
> This is one examplehttp://koti.mbnet.fi/ojalesa/boundsbox/makemarker.htm

[Peter]

No, handt seen that indeed :)

Ok, tried implementing that, but it seems that ugly tab on top is
required? And it shows an infowindow, but when I click another marker
the window for that marker doesnt show, and when I click outside the
infowindow or somewhere else on the map, the infowindow doesnt
disappear.

here's my code, if you could look at it, that would be great! :)

for (var i = 0; i < markersArray.length; i++) {
var marker = markersArray[i];

infoBubble = new InfoBubble({
maxWidth: 300
});


infoBubble2 = new InfoBubble({
map: map,
content: '<div class="phoneytext">Some label</div>',
position: new google.maps.LatLng(-35, 151),
shadowStyle: 1,
padding: 0,
backgroundColor: 'rgb(57,57,57)',
borderRadius: 4,
arrowSize: 10,
borderWidth: 1,
borderColor: '#2c2c2c',
disableAutoPan: true,
hideCloseButton: true,
arrowPosition: 30,
backgroundClassName: 'phoney',
arrowStyle: 2
});
infoBubble2.open();

var div = document.createElement('DIV');
div.innerHTML = 'Hello';

google.maps.event.addListener(marker, 'click', function () {

if (!infoBubble.isOpen()) {
infoBubble.open(map, marker);
}
});



// var infowindow = new google.maps.InfoWindow({
// content: "holding..."
// });
// google.maps.event.addListener(marker, 'click', function () {
// // where I have added .html to the marker object.
// infowindow.setContent(this.content);
// infowindow.open(map, this);
// });

[Esa]

The idea in my example is to use a single instance of InfoWindow. It
looks like you are creating an InfoWindow instance for each marker.

[Peter]

You are correct, I though that each marker SHOULD have its own
infowindow, so this is new to me :)

So now I've moved the code outstide the for loop, but no markers show
at all!

My new code:

/*

var infowindow = new google.maps.InfoWindow({
content: "holding..."
});
google.maps.event.addListener(marker, 'click', function () {
// where I have added .html to the marker object.
infowindow.setContent(this.content);
infowindow.open(map, this);
});

*/

}//end for loop

infoBubble = new InfoBubble({
maxWidth: 300
});


infoBubble2 = new InfoBubble({
map: map,
content: '<div class="phoneytext">Some label</div>',
position: new google.maps.LatLng(-35, 151),
shadowStyle: 1,
padding: 0,
backgroundColor: 'rgb(57,57,57)',
borderRadius: 4,
arrowSize: 10,
borderWidth: 1,
borderColor: '#2c2c2c',
disableAutoPan: true,
hideCloseButton: true,
arrowPosition: 30,
backgroundClassName: 'phoney',
arrowStyle: 2
});
infoBubble2.open();

var div = document.createElement('DIV');
div.innerHTML = 'Hello';

google.maps.event.addListener(marker, 'click', function () {

if (!infoBubble.isOpen()) {
infoBubble.open(map, marker);
}
});

google.maps.event.addListener(map, "click", function () {
infoWindow.close();
});


AutoCenter(markersArray);

} //ShowMarkers

[blob]

Hello,

first I must say that Esa's example is really nice!

I have another suggestion using multiple instances of InfoWindows (one
for each marker), using a global variable to keep record of the
current displayed info window.

code snippet:

// global var to keep record of the currently displayd info
window
var currentInfoWindow = null;

// (...) other code

// create marker (markers are numbered marker0, marker1,
marker2 ...)
var markerLatLng = new google.maps.LatLng(52.02235, 8.54339);
var marker0 = new google.maps.Marker({
position: markerLatLng,
title: 'Ravensberger Spinnerei',
icon: 'http://google-maps-icons.googlecode.com/files/museum-
historical.png',
map: map
});

// create instance of InfoWindow (numbered infowindow0,
infowindow1, infowindow2 ...)
var infowindow0 = new google.maps.InfoWindow({
content: 'Ravensberger Spinnerei'
});

// create event listener for the marker
google.maps.event.addListener (marker0, 'click', function() {
// and here it comes:
// check if there is already an InfoWindow displayed
(currentInfoWindow is not null). if yes, close it
if (currentInfoWindow != null) { currentInfoWindow.close(); }
// show new info window
infowindow0.open(map, marker0);
// store the now displayed info window in global var
currentInfoWindow
currentInfoWindow = infowindow0;
});


If you want to remove the currently displayed info window when you
click somewhere on the map ("click outside") too you have to add an
event listener for the map

google.maps.event.addListener(map, 'click', function() { if
(currentInfoWindow != null) { currentInfoWindow.close(); } });


Hope this helps