Ajaxian

Friday, March 13th, 2009

Custom info windows with jQuery and Google Maps

Category: JavaScript, Mapping

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:

< View plain text >

javascript

1. // Infowin class for displaying a miniature info window. Does not
2. // respond to any events - so you should show and remove the
3. // overlay yourself as necessary.
4.  
5. function Infowin(latlng, html) {
6.     this.latlng_ = latlng;
7.     this.html_ = html;
8.     this.prototype = new GOverlay();
9.  
10.     // Creates the DIV representing the infowindow
11.     this.initialize = function(map) {
12.         var div = $('<div />');
13.         div.css({
14.             position : 'absolute',
15.             width : 234
16.         }).appendTo(map.getPane(G_MAP_FLOAT_PANE))
17.  
18.         this.map_ = map;
19.         this.div_ = div;
20.  
21.         this.update(html);
22.     }
23.  
24.     this.update = function(html){
25.         this.html_ = html;
26.  
27.         this.div_.empty();
28.  
29.         $('<div />').css({
30.             'background-image' : 'url(/images/infow-top.png)',
31.             height : 14,
32.             padding: '0 0 0 0'
33.         }).appendTo(this.div_);
34.  
35.         var content = $('<div />').addClass('infowin-content').css({
36.             'position' : 'relative',
37.             'overflow' : 'hidden',
38.             'max-height' : 100,
39.             'top' : -5
40.         }).html(html);
41.  
42.         $('<div />').css({
43.             'background-image' : 'url(/images/infow-bottom.png)',
44.             'background-position' : 'bottom left',
45.             'padding' : '0 10px 30px 10px'
46.         }).append(content).appendTo(this.div_);
47.  
48.         this.redraw(true);
49.     }
50.  
51.     // Remove the main DIV from the map pane
52.     this.remove = function() {
53.       this.div_.remove();
54.     }
55.  
56.     // Copy our data to a new instance
57.     this.copy = function() {
58.       return new Infowin(this.latlng_, this.html_);
59.     }
60.  
61.     // Redraw based on the current projection and zoom level
62.     this.redraw = function(force) {
63.         if (!force) return;
64.  
65.         var point = this.map_.fromLatLngToDivPixel(this.latlng_);
66.  
67.         // Now position our DIV based on the DIV coordinates of our bounds
68.         this.div_.css({
69.             left : point.x - 108,
70.             top : point.y - this.div_.height() - 22
71.         });
72.     }
73. }

Posted by Dion Almaer at 5:11 am
2 Comments

3.2 rating from 54 votes

2 Comments »

Comments feed TrackBack URI

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’”

?

Comment by Vordreller — March 13, 2009

updated with api 3.2

function Infowin_API_3_2(bounds, html) {

this.prototype = new google.maps.OverlayView();

this.prototype.bounds_ = bounds;
this.prototype.html_ = html;
this.prototype.map_ = map;
this.prototype.div_ = null;

this.prototype.setMap(map);

this.prototype.onAdd = function() {

// Note: an overlay’s receipt of onAdd() indicates that
// the map’s panes are now available for attaching
// the overlay to the map via the DOM.

// Create the DIV and set some basic attributes.
var div = document.createElement(‘DIV’);
div.style.borderStyle = “none”;
div.style.borderWidth = “0px”;
div.style.position = “absolute”;
//div.style.width = “150px”;
//div.style.height = “80px”;

div.className=”customInfo”;

div.innerHTML =this.html_;

// Set the overlay’s div_ property to this DIV
this.div_ = div;

// We add an overlay to a map via one of the map’s panes.
// We’ll add this overlay to the overlayImage pane.
var panes = this.getPanes();
panes.overlayImage.appendChild(div);

}

this.prototype.draw = function() {

// Size and position the overlay. We use a southwest and northeast
// position of the overlay to peg it to the correct position and size.
// We need to retrieve the projection from this overlay to do this.
var overlayProjection = this.getProjection();

// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We’ll use these coordinates to resize the DIV.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

// Resize the image’s DIV to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + ‘px’;
div.style.top = ne.y + ‘px’;
//div.style.width = (ne.x – sw.x) + ‘px’;
//div.style.height = (sw.y – ne.y) + ‘px’;

}

this.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}

}

Comment by nunyourbiz — September 15, 2010