Get new jQuery plugins just once a week

×

google bubbles

April 24, 2014

Google Bubbles is a simple jQuery plugin for changing the appearance of info windows and pins on a Google map.

Example Code and Options :-

$('#another-map').bubbles({

center: { lat: 36.915, lng: -95.225 }, // If you wish to use the default map, but just want to change the center

// 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 : 'Hello World!!' },
// { lat : 35.289, lng : -94.756, title : 'woot', content : 'Hello World!!' } ]
markers: [ { lat : 35.289,
lng : -94.756,
title: 'woot',
content : 'Hello World!!' } ],

// 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
});

Created by Timmy Willison

Download

Example

google bubbles jQuery plugin

pins on gmaps

google bubbles

Related posts:

Blocksit
smart-jQuery-Zoom
StickyStack-js
google bubbles jQuery plugin

http://jquer.in/wp-content/uploads/2014/04/google-bubbles.jpg

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever