Google Maps API Tutorial

© 2007, 2008, 2009 Mike Williams

 
Translate this page:

 

Using the EBubble extension

The EBubble extension provides an alternative to custom info windows.

You can use EBubbles in a similar manner to info windows, but the technology is completely different, and causes significant differences in the behaviour.

  1. The background of an EBubble is fixed-size image file. That allows you to make the graphic as fancy as you like, but it's obviously only suitable in situations where your contents conform to a standard size.
     
  2. The EBubble is not attached to the map, it's attached directly to the <body>. This has the advantage that the EBubble can lie partly outside the map, but has the disadvantage that it doesn't move when the map moves.
     
  3. In order not to look silly when the map moved from under it, the EBubble closes when the map moves.
     
  4. In order to minimise strange click-through behaviour, by default the EBubble closes when clicked.
     
Here's an example

The background image for that EBubble was created in PaintShopPro using a simple speech bubble object. I applied the Inner Bevel effect to make it look a little 3D, added a central drop shadow, and gave the whole image partial transparency.

The basic procedure for using an EBubble is:

  1. Download ebubble.js and place it on your web site.
     
  2. Load the Javascript code like this <script type="text/javascript" src="ebubble.js"></script>
     
  3. Create one or more EBubble instances.
     
  4. Open the EBubble with bubble.openOnMarker(marker,html) or bubble.openOnMap(point, html, offset)
     

EBubble Constructor

The parameters for new EBubble() are:
 
mapThe map on which the EBubble is to appear.
imageURL of the background image
imageSizeGSize() specifying the size of that image
contentSizeGSize() specifying the size of the inner area when the contents can be written.
contentOffsetGPoint() specifying the offset of top left corner of the inner area from the top left corner of the background image
anchorGPoint() specifying the anchor point of the image
noCloseOnClick Optional: set to true to not close the EBubble when it is clicked
The content is not actually constrained by the contentSize parameter. If you put more content into it, then the contens will overflow.

Specifying noCloseOnClick may sometimes cause strange click-through behaviour, but it might improve things if you're experiencing problems with clickable elements inside your EBubble contents.

Opening an EBubble

There are two methods provided for opening an EBubble

bubble.openOnMap

This opens the EBubble on the map that you specified in the EBubble constructor.
 
pointA GLatLng() or GPoint() specifying the geographical location
htmlA string containing the HTML to be displayed.
offset(optional) A GPoint() specifying a pixel offset.

bubble.openOnMarker

This opens the EBubble on the map that you specified in the EBubble constructor, with a location derived from the specified marker.

This call uses the infoWindowAnchor parameter of the icon that is being used by the marker.
 
markerThe marker on which the EBubble is to be opened.
htmlA string containing the HTML to be displayed.

Multiple EBubbles

You can have as many EBubbles as you like on the same map.

You can use different background images for different EBubbles.

Closing an EBubble

Use bubble.hide()

The EBubble wil also close automatically if the map moves or if the user clicks on the EBubble.

I provide a bubble.show() method, but I don't recommend using it, because it doesn't track map movements. If you want to re-open the bubble, use .openOnMap() or .openOnMarker() again.

Events

When an EBubble is clicked, it throws a "click" event.

More About The Parameters

Consider this bubble image:

While creating the image, I recorded the following information:

The total size of the image is (297,243), which makes the 3rd parameter new GSize(297,243)

The contents go in the rectangular area marked by the black box. The size of the box is (224,126), which makes the 4th parameter new GSize(224,126)

The green dot indicates the position of the black box. It is located at (36,28), which makes the 5th parameter new GPoint(36,28)

The red dot at the tip of the stem is the point which will be anchored to the map location. It is located at (175,238), which makes the 6th parameter new GPoint(175,238)

Here's an example which uses that image.

Credits

Inspired by the Radio Shack Store Locator: www.radioshack.com/storeLocator3 (but not using any of their code) (I couldn't understand it).

Back to Mike's Homepage
Up to the start of this tutorial