Knowledge Base - Advanced bubble design

Introduction

When a user clicks on a marker a bubble is loaded. This bubble is loaded dynamically when it's clicked, and not saved into the page HTML code. The content of this bubble is defined in each markerset for all markers loaded by this markerset.

The set of parameters and how they are displayed is called a "bubble template". You can edit this template on the markerset editor page.

Bubble size

The loaded bubble is generated by Google Maps and is a part of the Google API, therefore, the basic size of the bubble is defined by Google. We included a back-end parameter in the markerset editor to set a width. This value will in some cases overwrite the default width, but ultimate control is with Google and the map specifics. If the map is not wide enough, too wide or if some other non-Geocode Factory factors  come into play, this setting will not be applied.

Template

A simple HTML bubble template example :

templatecode 01

The resultant bubble will be :

 

It is possible to introduce any valid HTML code into this template as well :

templatecode 02

Results in :

Of course you can also add images as shown! Image path need to be the full path to the image file (starting with http://).

Basic placeholders

In Geocode Factory, markers are linked to entries, events or profiles. Geocode Factory offer the opportunity to use placeholders to represent the corresponding value from that data source. Placeholders are always between brackets [ ]. Placeholders are based on supported fields that are available and vary depending on the current component the makerset is using as the data source. There is always a clickable list of available placecholders to make this placement easy! See picture :

For example, the placeholder [city] will be replaced by the value of the field city of the corresponding data. We continue with the same sample :

templatecode 03

And the result :

Of course you can add how many placeholder you want. If you write [firstname][name], the result will be JohnDoe, simply add a space [firstname] [name] or any HTML tag.

Images place holders

If your marker source data (user's profile, entry, ...) contains an image, and if it's supported, you will be able to display it into the bubble. You need to use the images placeholder like [avatar], [icon], [image], [THUMB_xxx], ...

templatecode 4

And the result :

Special placeholders

Common placeholders

The following placeholders can be used with any component source (Sobipro, Jomsocial, ...).

Waysearch (directions)

The [waysearch] placeholder, will be replaced by a Directions finder form. In this form you can enter one address and Geocode Factory will display the direction to get from this address to the current marker. The form also contains a button that will try (if the users allow this, regarding privacy) to locate hes real position (very useful for mobile devices !) :

templatecode 05

And the result :

Please refere to the waysearch and directions article to learn how to use it with the map.

Title

Will be replaced by the title. The field used for title can be select in the markerset editor. Title is write as text, you are reponsilbe to use better formating. See :

templatecode 06

And the result :

Link

Will be replaced by a sef (if enable on Joomla) url pointing on the current entry / profile / event. It will not generate the whole link, you need to create it with the anchor tag. Can be mixed with other placeholders, like the title :

templatecode 7

And the result :

Id

Contains the identificator of the current marker's data source (entry / profile /...). This can be useful to create custom links, or such. See my friends (this is a fake sample).

Distance

Is replaced by the distance to radius center. If no radius, will be -. In this sample [distance] is replaced by 217.04 km.

gf_faq_distance

If a user clicks on the map or uses the radius search option, then when the user bubble is loaded, the distance from the center point is calculated. See the radius concept article to have more infos.

Locate me

Will be replaced by a locate me button, when clicked, move the map to your current position.

Specific placeholders

Some place holders are usable only for one component.

Sobipro links

Sobipro contain a special field type that represents a web link. This field type is supported and can be used as  [LINK_xxx] when xx is the field name. Like : [LINK_fields_shopsite]

Sobipro images

Sobipro contain a special field type that contains images, is possible to have an unlimited number of images in the Sobipro entry. This field type is supported by Geocode Facotry and can be used as [THUMB_xxx], [IMG_xxx] and [ICO_xxx] when xx is the field name. Like : [THUMB_field_main_picture].

Sobi2 images

Sobi2 use 2 types of images : icon, for the entry icon and image for the entry image, both can be include into the bubble with [ICON] and [IMAGE].

Additionnaly in sobi2, there is a free Gallery plugin, this one is already supported with the [GALLERY] placeholder.

Sobi2 meta infos

Geocode Factory provide the following placeholder for the meta : [META_DESC] and [META_KEY], to display the meta infos in the bubble.

Mosets Tree images

There is 3 images sizes, Geocode Factory supports each : [IMG_SMALL], [IMG_MEDIUM] and [IMG_ORIGINAL].

Jomsocial Events images

There is 3 images sizes, Geocode Factory supports each : [IMAGE] and [THUMB].

Jomsocial Status

It's possible to show the user's status into the bubble, simply use the [STATUS] placeholder.

JEvents recurrent dates

In JEvents you can display 'normal' and recurrent dates. The date format to display can be choice into the markerset editor. For the recurring dates, use : [recurrent_total] for displaying the total number of dates, [recurrent_yn] to display if the event is recurrent or not, [recurrent_future] / [recurrent_past] for the next / past event.

Community Builder Gallery plugin

CB provide a gallery plugin, this plugin is supported by Geocode Factory. Enter the [CB_GAL_PLG_1] placeholder to display the last add image. Also use, [CB_GAL_PLG_3], [CB_GAL_PLG_5] and [CB_GAL_PLG_10] to display the 3, 5 or 10 last images. And finaly there it the [CB_GAL_PLG_ALL] placeholder to display all gallery images.

See below the advanced chapter about lightbox in bubble.

Streetview

As you have see there is also a [STREETVIEW] placeholder, this one will be describe below.

User status (online / offline)

You can also set up the 2 mini templates for the online/offline status information in the bubble and setting the '[ONLINE_STATUS]' placeholder in the template. This will display in the bubble a green/red colored text or an custom icon, simply define what code you want in the mini template.

gf_23_online_offline

Advanced bubble template

Tabs

Geocode Factory allowa to use tabs in bubble. That is not a native google maps feature, but work fine. This feature use the JQuery library .

  • Edit the markerset where you want to display the tabs
  • Go on the "Custom bubble" tab
  • Copy the tabbed sample template to your template
  • Edit the map where the markerset is loaded
  • Go on the "Display options" tab
  • Set the "Use tabs in bubble" to YES

gf_faq_tab

Note : If the tabs are display verticaly change the bubble width.

As you can see, the strucure of the template is a little more complex, and some infos cannot be changed. See here the template :

The group can contain an unlimited number of LI,each represents a tab, and the XXX need to be a identifier like #tab1, #tab2 ... #tabn and the LI is the tab title . Next you need to create the same quantity as DIV 

  • id, and text contained into the tab main container.

Streetview

To use the streetview in tabs you need to use the tabbed bubble.

  • Edit the markerset where you want to display the streetview
  • Go on the "Custom bubble" tab
  • Add the [STREETVIEW] placeholder into the DIV position where that represents your tab
  • In the
  • that used for the tab title, you need to add an ID into the title

If no streetview is available at the marker place, then a warning text is displayed (customisable in the language file).

gf_faq_streetview

You can change the size of the streetview area by changing the Geocode Factory css file (see the How to use the Geocode Factory CSS article). Sample : #gf_streetView {width:300px!important;}

Lightbox images in bubble

To use the CB Gallery plugin (see below) or to use the lightbox effect for bubble images, you need to enable the Gallery support. To do this go into the map editor, and select the CB Gallery option to YES. This will load aditional libraries, and it's the reason why this need to be do in map manager.

gf26_gal

For the CB plugin (see above) all is automatic. For other images, like other standard images placeholder, simply embed theses class="gallery" into a DIV. All images into this div will be loaded as lightbox. See the sample code :

templatecode 08

When click on the little image :

gf26_gal1

Applies To

Geocode Factory 3