Google Maps InfoWindow open on Click outside of Map

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.

score 2 · Accepted Answer · answered Dec 01 '11 at 16:17

2

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.

answered Dec 01 '11 at 16:17

jValdron

3,408
1
28
44

yes, `overflow: hidden` is a problem and it must probably be kept set so that the tiles outside of the map are not visible. – Tomas Dec 01 '11 at 16:27
I agree that it must be set. That is why OP will have to create a popup outside the map's div DOM. The link you provided will surely be of great help. – jValdron Dec 01 '11 at 16:30
@TomasT. I don't need an external pop up. I'm just looking for the same end result as Yelp has. I didn't realize it opened up inside the div since it looks outside of it. Are you saying set the overflow:hidden of the div? – user1048676 Dec 01 '11 at 17:18
@user1048676, `overflow:hidden` is already set. *"I don't need an external pop up"* - we just came to conclusion here that you will have to, if you don't want your infoWindow being cropped by the map div boundary. – Tomas Dec 01 '11 at 17:24

score 1 · Answer 2 · answered Dec 01 '11 at 16:25

You can construct your own infoWindow like they are doing it here for the static map: http://www.appelsiini.net/projects/php_google_maps/controls.html?center=58.37917285%2C26.74759984&infowindow=&zoom=14

I think you could also adapt it to use with dynamic (javascript) map... If you handled the events (like bounds_changed etc.) properly.

Google Maps InfoWindow open on Click outside of Map

2 Answers2