open infbox on div hover outside map - google-maps-api-3

Question

I want to display infobox outside the googlemap after hover div out the map. In this code mastercluster and infobox working properly but problem in to display only outside div.
var pop = document.getElementById('example1');
var locations = <?php echo json_encode($jsArray); ?>;
var image = 'images/mapmarker.png';
var myLatlng = new google.maps.LatLng(locations[0][0], locations[0][1]);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDoubleClickZoom: false,
disableDefaultUI: true,
visibleInfoWindow: null,
zoomControlOptions: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
}
};
var mcOptions = {styles: [{
opt_textColor: 'white',
textColor: 'white',
height:34,
url: image,
width:34
}],
description: ' tracks: click to show'
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var markers = [];
for(var i=0;i<locations.length;i++)
{
var latlng=new google.maps.LatLng(locations[i][0], locations[i][1]);
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image
});
boxText = document.createElement("div");
infoboxOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(18, -60),
zIndex: null,
boxStyle: {
opacity: 0.75,
width: "250px"
},
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
markers.push(marker);
boxText.style.cssText = "border: 1px solid black; margin-top:3px; background:#333; color:#FFF; font-family:Arial; font-size:12px; padding: 3px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;";
boxText.innerHTML = "<b>Hotel Name</b>: "+locations[i][2] + "<br/><br/>" + "<b>Rating</b>: "+locations[i][3]+"<br/><br/>"+"<b>Price:</b> € "+locations[i][4];
markers[i].infobox = new InfoBox(infoboxOptions);
pop.onmouseout = generateTriggerCallback(marker[i], 'mouseout');
pop.onmouseover = generateTriggerCallback(marker[i], 'mouseover');
$(".popup_slide").hover(function(){
$(this).addClass("resulthover");
},
function () {
$(this).removeClass("resulthover");
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
markers[i].infobox.open(map, this);
}
})(marker, i));
google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
return function() {
markers[i].infobox.close(map, this);
}
})(marker, i));
}
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
function generateTriggerCallback(object, eventType) {
return function() {
google.maps.event.trigger(object, eventType);
};
}

Answer 1

Finally i got solution and my problem is solved. My Problem was i have a set on location and we have to show that locations on the google map and at same time it will show as result outside of map. The enhanced functionality is on hover outside of the result map location will show on the google map.
var locations = <?php echo json_encode($jsArray); ?>;
var foo2 = document.getElementById('foo2');
var generateLink = document.getElementById('generateLink');
var image = 'images/mapmarker.png';
var image_hover = 'images/mapmarker_hover.png';
var img29 = 'images/29cluster.png';
var img34 = 'images/34cluster.png';
var img47 = 'images/47cluster.png';
var img56 = 'images/56cluster.png';
var clusterStyles = [
{
opt_textColor: 'white',
textColor: 'white',
url: img29,
height: 29,
width: 29
},
{
opt_textColor: 'white',
textColor: 'white',
url: img34,
height: 34,
width: 34
},
{
opt_textColor: 'white',
textColor: 'white',
url: img47,
height: 47,
width: 47
},
{
opt_textColor: 'white',
textColor: 'white',
url: img56,
height: 56,
width: 56
}
];
var visibleInfoWindow = null;
var myLatlng = new google.maps.LatLng(locations[0][0], locations[0][1]);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDoubleClickZoom: false,
disableDefaultUI: true,
visibleInfoWindow: null,
zoomControlOptions: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
}
};
var mcOptions = { styles: clusterStyles,
zoomOnClick: true
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var markers = [];
function generateTriggerCallback(object, eventType) {
return function() {
google.maps.event.trigger(object, eventType);
};
}
function clearMarkers() {
for (var n = 0, marker; marker =markers[n]; n++) {
marker.setVisible(false);
}
}
var div = foo2;
clearMarkers();
var example = [];
for(var i=0;i<locations.length;i++)
{
var latlng=new google.maps.LatLng(locations[i][0], locations[i][1]);
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image
});
boxText = document.createElement("div");
infoboxOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(16, -40),
zIndex: null,
boxStyle: {
opacity: 0.75,
width: "250px"
},
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
markers.push(marker);
var rate = locations[i][3];
if(rate == 1)
{
var rateimg = "<img src='images/rating.png' alt=''/><img src='images/unactiverating.png' alt=''/><img src='images/unactiverating.png' alt=''/><img src='images/unactiverating.png' alt=''/><img src='images/unactiverating.png' alt=''/>";
}else if(rate == 2)
{
var rateimg = "<img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/unactiverating.png' alt=''/><img src='images/unactiverating.png' alt=''/><img src='images/unactiverating.png' alt=''/>";
}
else if(rate == 3)
{
var rateimg = "<img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/unactiverating.png' alt=''/><img src='images/unactiverating.png' alt=''/>";
}else if(rate == 4)
{
var rateimg = "<img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/unactiverating.png' alt=''/>";
}
else if(rate == 5)
{
var rateimg = "<img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/><img src='images/rating.png' alt=''/>";
}
//define the text and style for all infoboxes
boxText.style.cssText = "border: 1px solid black;background:#333; padding:3px;color:#FFF; font-family:Arial; font-size:12px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;";
boxText.innerHTML = "<div class='marker11'>&nbsp</div><b>Hotel Name</b>: "+locations[i][2] + "<br/>" + "<b>Rating</b>: "+rateimg+"<br/>"+"<b>Price:</b> € "+locations[i][4];
//Define the infobox
markers[i].infobox = new InfoBox(infoboxOptions);
$(".popup_slide").hover(function(){
$(this).addClass("resulthover");
},
function () {
$(this).removeClass("resulthover");
});
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
markers[i].infobox.open(map, this);
marker.setIcon(image_hover);
}
})(marker, i));
google.maps.event.addListener(marker, 'mouseout', (function(marker, i) {
return function() {
markers[i].infobox.close(map, this);
marker.setIcon(image);
}
})(marker, i));
example[i] = document.getElementById('example' + i);
example[i].onmouseover = generateTriggerCallback(marker, 'mouseover');
example[i].onmouseout = generateTriggerCallback(marker, 'mouseout');
}//end of for loop
var markerCluster = new MarkerClusterer(map, markers, mcOptions);
//globalMarker = markers.slice();
google.maps.event.addListener(markerCluster, "mouseover", function (c) {
var totalcluster = c.getSize();
var centercluster = c.getCenter();
var m = c.getMarkers();
var p = [];
for (var j = 0; j < m.length; j++ ){
p.push(m[j].getPosition());
}
//alert(p);
});
google.maps.event.addListener(markerCluster, "mouseout", function (c) {
});