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
0.7 : Polished and tested ( 10/23/10 )
0.1 : First release ( 5/2/10 )
$('#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).