Integrating Google Maps with Backbase

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 Google Maps 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.

<head>

        <meta http-equiv="Content-Type" content="text/xhtml; charset=UTF-8"/>

        <script src="http://maps.google.com/maps?file=api&amp;v=1&amp;key=[YOUR KEY HERE]" type="text/javascript"></script>

</head>

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 Maps 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.

<div style="width: 680px;height: 280px; border: 1px solid #333;">

        <e:handler event="construct" type="text/javascript">

                window.googleMap = new GMap2(this.viewNode);

                window.googleMap.addControl(new GSmallMapControl());

                window.googleMap.enableScrollWheelZoom();

                window.googleMap.setCenter(new GLatLng(40, -30), 2);

        </e:handler>

        <e:handler event="DOMNodeInsertedIntoDocument" type="text/javascript">

                window.googleMap.checkResize();

        </e:handler>

</div>

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

Select the prefered city from the list:

<b:comboBox readonly="true">

        <b:comboBoxOption value="40,-30,2" />

        <b:comboBoxOption value="52.350913,4.920394,13">Amsterdam (The Netherlands)</b:comboBoxOption>

        <b:comboBoxOption value="37.564783,-122.284428,13">San Mateo (California)</b:comboBoxOption>

        <b:comboBoxOption value="51.513483,-0.090100,13">London  (United Kingdom)</b:comboBoxOption>

        <b:comboBoxOption value="43.798668,-79.396155,13">Toronto (Canada)</b:comboBoxOption>

        <b:comboBoxOption value="48.870262,2.31000,13">Paris (France)</b:comboBoxOption>

        <b:comboBoxOption value="50.885969,4.447937,13">Diegem (Belgium)</b:comboBoxOption>

        <b:comboBoxOption value="59.370019,18.026333,13">Stockholm (Sweden)</b:comboBoxOption>

        <e:handler event="change" type="text/javascript">

                var value = this.getProperty('value').split(',');

                window.googleMap.setCenter(new GLatLng(value[0], value[1]), parseInt(value[2],10));

        </e:handler>

</b:comboBox>

Download

You can download a zipped version of the example provided on this page to try it out for yourself.

Note: Make sure to extract the content of this zip file to the root folder of your web server or application server (for example, htdocs), and then run it from your local development environment.

Additional Resources

For more information on integrating other third-party widgets with Backbase, refer to the following documentation:

Client Framework