I’m implementing a new feature for Weheartplaces, where you will be able to embed a map in your own webpage, that shows where you are and what is nearby to you. In doing so - I wanted to center the map around your current location (gathered from fireeagle, twitter or the google geo extensions) and show places nearby.
Because I’m working in an iframe - space is at a premium - so I wanted a more compact way of displaying information than the standard infowindow. This post tells you how I went about it, using jquery and the google maps api.
Step 1 - Prototype the infowindow in Photoshop
As with all fun projects - start in photoshop. First I took a screenshot of the map with apple-shift-4, then loaded it into photoshop and made a template for my infowindow. In this case I used a rounded rectangle with an arrow composited onto it, and added a dropshadow and a stroke to the layer.

This is the window template that I’ll be using.

The photoshop layers settings I used.
Step 2 - Use the slices feature of photoshop to cut up the infowindow
My infowindow is going to be fixed width, but I do want it to be able to grow in length to accomodate the amount of text I put in it. To do this I’ll disable the background in photoshop - so that the infowindow is over a transparent background, then use the Slice Tool (K) to cut the image into two parts - one which contains just the top rounded border - and a larger part which will be the rest of the image. This technique of resizing images is called ‘sliding doors‘.
The image with background removed and ready for export
I then save for web, put the two files (infow-top.png and infow-bottom.png) in my /images/ directory.
Step 3 - Adapt the google rectangle overlay to create the Infowin class
The overlays reference on the google maps documentation details how to create a generic ‘rectangle’ overlay. We will adapt this code, with some use of jquery - to create our infowindow.
The important things that I needed to change were:
- Use jquery to create and set the css to make the code more compact.
- Use jquerys .height() function to work out the size of the html inserted into the infowindow and make the infowindow stretch appropriately.
- Create an update() method that sets the html of the infowindow.
Source code of infowin.js:
// Infowin class for displaying a miniature info window. Does not
// respond to any events - so you should show and remove the
// overlay yourself as necessary.
function Infowin(latlng, html) {
this.latlng_ = latlng;
this.html_ = html;
this.prototype = new GOverlay();
// Creates the DIV representing the infowindow
this.initialize = function(map) {
var div = $('<div />');
div.css({
position : 'absolute',
width : 234
}).appendTo(map.getPane(G_MAP_FLOAT_PANE))
this.map_ = map;
this.div_ = div;
this.update(html);
}
this.update = function(html){
this.html_ = html;
this.div_.empty();
$('<div />').css({
'background-image' : 'url(/images/infow-top.png)',
height : 14,
padding: '0 0 0 0'
}).appendTo(this.div_);
var content = $('<div/>').addClass('infowin-content').css({
'position' : 'relative',
'overflow' : 'hidden',
'max-height' : 100,
'top' : -5
}).html(html);
$('<div />').css({
'background-image' : 'url(/images/infow-bottom.png)',
'background-position' : 'bottom left',
'padding' : '0 10px 30px 10px'
}).append(content).appendTo(this.div_);
this.redraw(true);
}
// Remove the main DIV from the map pane
this.remove = function() {
this.div_.remove();
}
// Copy our data to a new instance
this.copy = function() {
return new Infowin(this.latlng_, this.html_);
}
// Redraw based on the current projection and zoom level
this.redraw = function(force) {
if (!force) return;
var point = this.map_.fromLatLngToDivPixel(this.latlng_);
// Now position our DIV based on the DIV coordinates of our bounds
this.div_.css({
left : point.x - 108,
top : point.y - this.div_.height() - 22
});
}
}
This class is undergoing refinement, so you should check infowin.js for the latest version from weheartplaces.com.
Step 4 - Using the Infowin class
Now we can use the infowin class in our google maps application. Here I’m just displaying some lorem ipsum text at a predefined latlng.
var info = new Infowin(latlng, 'Lorem ipsum dolor sit amet, consectetur....');
map.addOverlay(info);
Future steps for this class would be to respond to events so that the infowindow automatically disappeared when the user clicked on the map, or extend the GMarker prototype so you could call marker.openInfowin(’some html’).
Our infowindow working in google maps.
Compared to the bigger google maps infowindow.
Conclusion
This article shows how using jquery and the innards of the google maps GOverlay class you can easily create custom overlays that behave like native gmaps components - without too much work or hassle. It always worth doing the setup time in photoshop too - using slices is really handy because it makes it easy to go back and tweak the infowindow if you decide the stroke is too thick, the shadow too dark.
You can only go so far making google maps look like your own site - if you want full customisation you have to go to someone like
cloudmade and use open street map data, but you do have a lot of control over your overlays and markers, so if you feel the need - you can build your own ui on top of google maps so it matches your site better.
Weheartplaces
We heart places is my site for bookmarking places in the world and sharing them so that your friends can see what you recommend all around the world. See the places described in this article at the
Adelaide page.