I have a createMarker() function that is used to place multiple markers on the google map. The following is the code:
function createMarker(point,custid,streetadd,city,state,zip,address,phone,website,co)
{
var infowindowHover,infowindowClick;
var marker = new google.maps.Marker({
position: point,
map: map,
icon: image,
});
var boxClickText = document.createElement("div");
boxClickText.className = "infoBackground";
var markerMarkup = "<div id='infobox'><TABLE class='test'><TR><TD colspan='2'><B class='title'>";
markerMarkup = markerMarkup + co + "</B></TD></TR><TR><TD colspan='2'>";
markerMarkup = markerMarkup + streetadd + "</TD></TR><TR><TD colspan='2'>";
markerMarkup = markerMarkup + city + "," + state + " " + zip + "</TD></TR><TR><TD colspan='2'>";
markerMarkup = markerMarkup + phone + "</TD></TR><TR><TD colspan='2'>";
if(website.indexOf("http://")>0) { markerMarkup = markerMarkup +"<a href="; }
else{ markerMarkup = markerMarkup +"<a href=http://"; }
markerMarkup = markerMarkup + website + " target=_blank>" + website + "</a></TD></TR><TR><TD class='availableStyle'>";
markerMarkup = markerMarkup +'<a href="javascript:;" onclick="setstyles('+ custid +',\'' + streetadd + '\'' + ',\'' + city + '\'' + ',\'' + state + '\'' + ',\'' + zip + '\'' + ',\'' + address + '\''+ ',\'' + phone + '\''+ ',\'' + website + '\''+ ',\'' + co + '\'' + ')";">see available styles</a>';
//markerMarkup = markerMarkup + '<input type="button" value="see available styles" onclick="setstyles('+ custid +',\'' + streetadd + '\'' + ',\'' + city + '\'' + ',\'' + state + '\'' + ',\'' + zip + '\'' + ',\'' + address + '\''+ ',\'' + phone + '\''+ ',\'' + website + '\''+ ',\'' + co + '\'' + ')" />';
markerMarkup = markerMarkup + "</TD></TR></TABLE></div>";
boxClickText.innerHTML = markerMarkup;
var myOptions_click = {
content: boxClickText
//,disableAutoPan: true
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
//opacity: 0.75
//,width: "280px"
margin:"-58px 0px 0px 148px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://mansi:2525/pc-new/images/mapclosebutton.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,id: "infoWindowClick"
,enableEventPropagation: false
};
var ib = new InfoBox();
google.maps.event.addListener(marker, "click", function (e) {
ib.close();
ib.setOptions(myOptions_click);
ib.open(map, this);
});
return marker;
}
I have referred similar question from Google Map V3 - Allow only one infobox to be displayed at a time and applied the code in the same way but I am not getting the desired result.
Google Map V3 - Allow only one infobox to be displayed at a time