Ajaxian

Friday, March 13th, 2009

Custom info windows with jQuery and Google Maps

Category: JavaScript, Mapping

<p>

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:

PLAIN TEXT

JAVASCRIPT:

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

Related Content:

• GMaps4JSF with Facelets
  In this article, I will show how the GMaps4JSF and Facelets can be used together to construct and customize maps easily using few lines of...
• Examining the state of PaaS in the year of ‘big data’
  Either more vendors are offering ‘big data’ capabilities or they have creative marketing teams. Which PaaS provider’s big data cloud is the real...
• Business intelligence vendors, users embrace location-based analysis
  Location-based intelligence, which lets users analyze demographic and other map-based data, is catching on with business intelligence vendors thanks...
• Adding custom fields for retail product comparisons in SAP BW
  Need to analyze and compare product sales, product cost and suggested retail price etc? This tip shows you how to customize the R/3 BW...
• Vodafone and Google team up on mobile Google Maps
  Vodafone and Google have teamed up to announce joint development of a location-based version of Google Maps for mobile...

Posted by Dion Almaer at 5:11 am
2 Comments

3.2 rating from 48 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