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:

javascript
< view plain text >
  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. }

Related Content:

Posted by Dion Almaer at 5:11 am
2 Comments

+++--
3.2 rating from 53 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

Leave a comment

You must be logged in to post a comment.