Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

73 lines (54 sloc) 2.904 kb

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).

Jump to Line
Something went wrong with that request. Please try again.