How to display a Google map in a pop-up window?

JavaScript
1

Hello,

I am displaying multiple listings on my site, and for each listing I would like the user to be able to click a link and display a map in a little js pop-up window (example: http://www.simplyhired.com/index.php?ds=sr&q=software+engineer&l=90245&sl=save). So not a separate browser window, but a hidden CSS div or whatever.

Can anyone point me in the right direction?

Thanks,

Dave

2

OK, first take a look at the Google API.

You’ll need to create a map element in your pages, e.g. <div id=“map”></div>. Size it accordingly and ensure it’s set to an position:absolute and visibility:hidden in your CSS.

To create the GoogleMap, use JS such as:


// global variables
var map = document.getElementById("map");
var mapControl = new GMap2(map);

// add pan/zoom controls to map
mapControl.addControl(new GLargeMapControl());
mapControl.addControl(new GScaleControl());

When the link is clicked, you need to centre the map to the appropriate latitude and longitude then show the DIV in the right place on the page, e.g.


function MapLinkClicked(lat, lng) {
  mapControl.setCenter(new GLatLng(lat,lng), 13); // uses a zoom of 13
  map.style.top = "100px";
  map.style.left = "100px";
  map.style.visibility = "visible";

Hope that helps.

3

This worked great! Thanks so much.

A followup question – how can I get the x,y coordinates of the link that the user clicked on, so I can popup the window at that location?

Thanks!

4

You can find the absolute X and Y page co-ordinates of your link using something like:


<p><a href="#" onclick="ShowMap(this)">map</a></p>

<script type="text/javascript">
function ShowMap(e) {
	var xpos = AbsoluteX(e);
	var ypos = AbsoluteY(e);
	alert(xpos+", "+ypos);
	// now move map to location xpos, ypos
}


// find absolute x co-ordinate of element
function AbsoluteX(element) {
	var pos = 0;
	if (element && typeof element.offsetLeft != 'undefined') {
		pos = element.offsetLeft;
		while ((element = element.offsetParent)) pos += element.offsetLeft;
	}
	return pos;
}


// find absolute y co-ordinate of element
function AbsoluteY(element) {
	var pos = 0;
	if (element && typeof element.offsetTop != 'undefined') {
		pos = element.offsetTop;
		while ((element = element.offsetParent)) pos += element.offsetTop;
	}
	return pos;
}
</script>

That will return the absolute co-ordinates of the link on the page. Remember when you’re positioning your absolute “map” DIV, the co-ordinates you set are relative to any parent element that is set to relative or absolute.

But, if your map DIV is the last element on the page and it’s not inside any other elements, you’ll be fine using the co-ordinates generated above.