Question

All,
I have the following code to add a marker:

function addPoints( points )
{   
for ( var p = 0; p < points.length; ++p )
{
    var pointData = points[p];
    if ( pointData == null ) return; 
    var point = new GLatLng( pointData.latitude, pointData.longitude );
var marker = createMarker( point, icon0, pointData.html );
map.addOverlay( marker );
}
}

function createMarker(point, icon, popuphtml) {
//alert("the create marker is: "+point);
var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(popuphtml);
});
return marker;
}

I have some PHP/Javascript to pass the information to this function:

$lat = $resultset_vendors['vendor_latitude'];
$long = $resultset_vendors['vendor_longitude'];
$name = $resultset_vendors['vendor_name']. "<br/>" . $resultset_vendors['vendor_address1']
. "<br/>" . $resultset_vendors['vendor_city'] . ", " . $resultset_vendors['vendor_state'] . " " . $rs['vendor_zip'];
$jsData = $jsData . "    new Store( $lat, $long, '$name' ),\n";


function Store( lat, long, text )
{
this.latitude = lat;
this.longitude = long;
this.html = text;
}

var myStores = [<?php echo $jsData;?>, null];

My data gets passed successfully and everything looks good except the pop up box opens up inside of the Maps div. How can it be open up outside of the maps div? A great example can be found on yelp. If you hover over a marker in their map it opens up outside of the maps div.

Answer 1

The Google Maps info window are open inside the div, I just checked on Yelp, they also open inside the map. If you want an external popup, you probably would need a to code a function that crates a popup that’s appended outside the map and then position absolutely at the point. The problem is that the overflow of the div containing the map is set to hidden.