infoBox - close/hide custom infowindow when clicking on a new marker

[Jan Sangill]

Hi,

I am having issues with custom infowindows - using infobox.

I cant seem to figure out how I should close the previous opened
infowindows, without clicking on the X (close button).

When a new marker is clicked, and a infowindow is already opon, I need
that infowindow to close.

So I only have on infowindow open at a time.

Sample code:

<script type="text/javascript" language="javascript">

//map variables
var map;
var adUnit;
var url = "THE URL";

//The function that holds the map
function initgmap() {

//Add marker function
function addMarker(response){

var json = JSON.decode(response);

//Loop though markers only and add them
json.markers.each(function(item){
var latlng = new google.maps.LatLng(item.lat,item.lng);
var icon = new google.maps.MarkerImage("ICON");

var marker = new google.maps.Marker({
position: latlng,
icon: icon,
title: item.label,
map: map,
visible: true
});

var myOptions = {
content: item.html
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140,
0)
,zIndex: null
,boxStyle: {
background: "url('http://www.garylittle.ca/map/artwork/
tipbox.gif') no-repeat"
,opacity: 0.75
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/
close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};


var ib = new InfoBox(myOptions);

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

ib.open(map, marker);

});

$("loadtext").setStyle("visibility", "hidden");

});
}

//Ajax function to get all markers
function ajaxGet(url){
$("loadtext").setStyle("visibility", "visible");
var myAjax = new Request({
method: "get",
url: url,
onComplete: addMarker ,
onCancel: function() {
$("loadtext").setStyle("visibility", "hidden");
}
}).send();
}



var latLng = new google.maps.LatLng(56,9);


//The map options
var map = new google.maps.Map(document.getElementById("gmap"), {
zoom: 7,
center: latLng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},

scaleControl: 1,
panControl: 1,
streetViewControl: 1,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
//The infowindow options
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150,50)
});

//Ajax call to get all markers
ajaxGet(url);

}

// Onload handler to fire off the app.
google.maps.event.addDomListener(window, "load", initgmap);


</script>





Hope you can help.

regards
Jan

[Esa]

Whether a custom infowindow or standard, basically you should have
just a single instance of InfoWindow() and set its contents by the
'click' handler function.

[Jan Sangill]

Thank you for the response. Helped a lot.

I am now down to one issue left.

I am trying to do this:

ib.setOptions(myOptions);
ib.setContent(item.html);
ib.open(map, marker);

Where the myOptions is this for instance:

var myOptions = {
boxClass: "red"
};

However, this does not seem to have any effect at all.

The class does not seem to be added.

Perhaps you would know why?

[Esa]

Too much guesswork without a link to your page.

[Jan Sangill]

Nevermind esa,

I got it all working now.

Thank you for your help.

It is much appreciated.

Regards