A jQuery plugin for changing the appearance of info windows and pins on a Google map.
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
images
README.md
jquery.bubbles.js
jquery.bubbles.min.js

README.md

jQuery Google Bubbles

Demo: http://timmywillison.com/samples/bubbles/
Github: http://github.com/timmywil/jquery-google-bubbles
Source: http://github.com/timmywil/jquery-google-bubbles/raw/master/jquery.bubbles.js ( 11 kb )
(minified): http://github.com/timmywil/jquery-google-bubbles/raw/master/jquery.bubbles.min.js ( 4.0 kb )

Version: 0.7, Last updated: 10/23/2010

This is a jQuery plugin for changing the look of Google maps pins and info windows. SDG

About: Release History

0.7 : Polished and tested ( 10/23/10 )
0.1 : First release ( 5/2/10 )

Usage

$('#google-map').bubbles();
$('#another-map').bubbles({
  
    // If you wish to use the default map, 
    // but just want to change the center
    // ****NOTE: This gets overwritten if a map is passed in (see next).
    center: { lat: 36.915, lng: -95.225 },
  
    // Your own map that you created with the Google V3 API
    map: myGoogleMap,
  
    // An unlimited number of markers may be put on the map.
    // Add latitudes and longitudes for where they should be placed,
    // a title for each marker,
    // and a content string for their corresponding info window.
    // ex: [ { lat : 35.289, lng : -94.756, title : 'woot', content : '<div class="iw-content"><p>Hello World!!</p></div>' }, 
    //   { lat : 35.289, lng : -94.756, title : 'woot', content : '<div class="iw-content"><p>Hello World!!</p></div>' } ]
    markers: [ { lat : 35.289, 
                 lng : -94.756, 
                 title: 'woot', 
                 content : '<div class="iw-content"><p>Hello World!!</p></div>' } ],
  
    // Custom image for the marker
    markerIcon: 'images/google-maps-icon.png',
  
    // The shadow for the marker image
    markerShadow: 'images/google-maps-shadow.png',
              
    // The info window background image (includes its own shadow if one is needed)
    windowImage: 'images/google-maps-infobox.png',
  
    // The close image/button that goes on the info window
    closeImage: 'images/google-maps-close.png',
  
    // Offsets for the position of the info window
    // relative to the marker
    offsetVertical: -226,
    offsetHorizontal: -20,
  
    // Width and Height of the info window background image
    iwWidth: 208,
    iwHeight: 165
});

TIP: If all you need is a custom pin and no custom info window, don't use this plugin. That is too easy with the normal Google API (see my attachInfo function).