One of the great advantages of Backbase is that it easily integrates with third-party widgets. In this example, we will demonstrate how you can combine Backbase widgets with the Google Maps API.

Live Example

Integrating with Backbase

The first requirement for having the Google Maps working inside any web application is to include the <script> which loads the Google Maps API. Google requires you to create a key specific to your domain name. You can generate this key for free from the Google website at http://www.google.com/apis/maps/signup.html.

Now, include the Google Maps API using the following code snippet, replacing the "[YOUR KEY HERE]" with the key you generated in the prior step.

Next, we define a div tag which will be the container in which the map is displayed. An XEL handler is added which will register the div with the Google Maps API when the div is constructed. We store the Google Map object in a global variable called window.googleMap, which allows us to update the map at a later stage. Additionally we set some properties and set the map to its default location.

Finally, we have defined a b:comboBox widget, which will update the Google Map based on the user selection. Using only two lines of JavaScript, we update the map defined earlier to set a new position.