https://github.com/timmywil/jquery-google-bubbles

A jQuery plugin for changing the appearance of info windows and pins on a Google map.
https://github.com/timmywil/jquery-google-bubbles

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/timmywil/jquery-google-bubbles
• Owner: timmywil
• Created: 2010-04-03T23:20:28.000Z (over 14 years ago)
• Default Branch: master
• Last Pushed: 2011-02-20T17:04:08.000Z (almost 14 years ago)
• Last Synced: 2024-05-01T18:56:11.942Z (8 months ago)
• Language: JavaScript
• Homepage: http://timmywil.github.com/samples/bubbles/
• Size: 122 KB
• Stars: 15
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

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