I found this excellent plugin ThickBox which is able to display images, iframes, inline and ajax content. So I decided to modify this plugin to support displaying a Google map in a modal window.
I’ve created an additional anchor value which triggers the displaying of the map. Additionally you pass in some querystring parameters with the anchor and from that we draw the map and add any markers required, simple really.
Important
To generate the modal dialog the html page must have a valid DTD defined.
You'll also need to create a Google Maps API key and include a reference to the Google Map Javascript library.
Display a Simple Map
I’ve been playing around with
jQuery in a recent project and wanted to display a Google map when clicking on a hyperlink. However I wanted to display the map in a modal style over the top of the current page.
- Create a hyperlink element (<a>)
- Add the class attribute thickbox (class=”thickbox”)
- In the href attribute add the anchor #TB_googleMap
- In the href attribute after the #TB_googleMap add ?height=300&width=400&lat=37.784792&lng=-122.40911&zoom=15
height defines the height in pixels of the map.
width defines the width in pixels of the map.
lat defines the latitude of the centre of the map and also the marker pin
lng defines the longitude of the center of the map and also the marker pin
zoom defines the zoom level of the map, if this value is emitted then the code will zoom to fit the pin(s) in the map.
There is also an optional parameter of markerText which allows you to define some text to display when clicking on the marker pin.
<a href="#TB_googleMap?height=300&width=300&lat=37.784792&lng=-122.40911&zoom=15"
class="thickbox">
google map modal</a>
View the demo
Displaying a Map with Multiple Markers
In addition to displaying a single marker point on the map it also possible to display many marker points on the maps.
The map will be centred based on the values defined in lat and lng parameters of the querystring.
To create a map with multiple marks follow the steps in Display a Simple Map then simple append lngN=x&latN=y&markerTextN=z for each additional mark.
markerTextN is an optional field which is only required if you want to display some text when clicking on the marker.
<a href="#TB_googleMap?height=400&width=600&lat=37.80235&lng=-122.405843&zoom=13&
markerText=Colt%20Tower%3cbr%2f%3eSan%20Francisco&lat1=37.784792&lng1=-122.40911&
lat2=37.808741&lng2=-122.409807&markerText2=Pier%2039" class="thickbox">
Three Marker Pins</a>
View the demo
Displaying an Auto Zooming Map with Multiple Markers
To enable auto zooming simply don't supply a zoom parameter in the querystring.
<a href="#TB_googleMap?height=400&width=600&lat=37.80235&lng=-122.405843&
markerText=Colt%20Tower%3cbr%2f%3eSan%20Francisco&lat1=37.784792&lng1=-122.40911&
lat2=37.808741&lng2=-122.409807&markerText2=Pier%2039" class="thickbox">
Three Marker Pins</a>
View the demo
Download
Download a zip containing all the source files and a simple demo html page.
Download source code