Custom info windows with jQuery and Google Maps

Fri, Mar 13, 2009

Metabloging, Programming, Technology, web 2.0

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:

  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. function Infowin(latlng, html) {
  5. this.latlng_ = latlng;
  6. this.html_ = html;
  7. this.prototype = new GOverlay();
  8. // Creates the DIV representing the infowindow
  9. this.initialize = function(map) {
  10. var div = $(‘<div />’);
  11. div.css({
  12. position : ‘absolute’,
  13. width : 234
  14. }).appendTo(map.getPane(G_MAP_FLOAT_PANE))
  15. this.map_ = map;
  16. this.div_ = div;
  17. this.update(html);
  18. }
  19. this.update = function(html){
  20. this.html_ = html;
  21. this.div_.empty();
  22. $(‘<div />’).css({
  23. ‘background-image’ : ‘url(/images/infow-top.png)’,
  24. height : 14,
  25. padding: ’0 0 0 0′
  26. }).appendTo(this.div_);
  27. var content = $(‘<div />’).addClass(‘infowin-content’).css({
  28. ‘position’ : ‘relative’,
  29. ‘overflow’ : ‘hidden’,
  30. ‘max-height’ : 100,
  31. ‘top’ : -5
  32. }).html(html);
  33. $(‘<div />’).css({
  34. ‘background-image’ : ‘url(/images/infow-bottom.png)’,
  35. ‘background-position’ : ‘bottom left’,
  36. ‘padding’ : ’0 10px 30px 10px’
  37. }).append(content).appendTo(this.div_);
  38. this.redraw(true);
  39. }
  40. // Remove the main DIV from the map pane
  41. this.remove = function() {
  42. this.div_.remove();
  43. }
  44. // Copy our data to a new instance
  45. this.copy = function() {
  46. return new Infowin(this.latlng_, this.html_);
  47. }
  48. // Redraw based on the current projection and zoom level
  49. this.redraw = function(force) {
  50. if (!force) return;
  51. var point = this.map_.fromLatLngToDivPixel(this.latlng_);
  52. // Now position our DIV based on the DIV coordinates of our bounds
  53. this.div_.css({
  54. left : point.x108,
  55. top : point.ythis.div_.height()22
  56. });
  57. }
  58. }
Share
, , , ,

This post was written by:

- who has written 196 posts on ropox.net.

Software Engineer and Web Developer, keen on new technologies and has passion for web engineering.... Internet is my job and i love it...!!! Founded Baldpixel (baldpixel.com) on 2008 which is specialized on enginnering custom web projects while cooperating with top advertising agencies on the net.

Contact the author