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
-
});
-
}
-
}
Related posts:
- Google talking about HTML 5 and the Mobile Web The Google Mobile folks talked about the new Gmail Mobile...
- JQuery wildcard selectors JQuery wildcard selectors on select boxes, how to reset all...
- 25 jQuery image galleries and slideshow plugins For some sites, image galleries are an absolute must. Portfolios...
- Google Acquires Stealth Startup Founded by Ex-Apple Employees Google has acquired Agnilux, a very secretive stealth startup founded...
- Getting the page and viewport dimensions using jQuery Getting the page and viewport dimensions using jQuery is as...
Fri, Mar 13, 2009
Metabloging, Programming, Technology, web 2.0