Friday, March 13th, 2009
Custom info windows with jQuery and Google Maps
Ben Nolan has a writeup on a new feature in his Weheartplaces application that tweaks the info popup that comes with Google Maps by using a custom overlay. He walks us through an example that ends up with an Infowin class like this:
JAVASCRIPT:
-
-
// 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
-
});
-
}
-
}
-
3.2 rating from 45 votes
Neat feature, but kinda useless. I’m not gonna paste an extra 75 lines of code to waste my bandwith for something I can do with a the normal google maps API. Sure it’s not a nice look, but it’s something.
Also, why is “padding: ‘0 0 0 0′” not turned into “padding: ‘0′”
?