Back to Controls

The GoogleMap control presents a Google map interface in a Bungee Connect control.

Contents 1 Overview 2 Capablilities 2.1 Limitations 3 Requirements 4 Examples 4.1 Example 1: Displaying Pins on a Map (Ex1_Simple) 4.1.1 Providing Pin Locations 4.2 Example 2: Displaying Images Based on a Pin Click (Ex2_PinClick) 4.2.1 Displaying the Images 4.3 Example Helper Class School 5 Reference 5.1 Supported Types 5.2 Adapters 5.3 Associated Properties 5.3.1 Specialized Properties 5.3.2 Unique Properties

Overview

The GoogleMap control displays the map of a specified location (based on latitude and longitude) in one of three modes: Map, Satellite, or Hybrid. For each of these modes, the specified location is pointed out by a small, orange icon called a "pin."

Capablilities

Use the GoogleMap control to:

• Display one or more pins on a map (Example 1).
• Associate specific functionality with clicking a pin (Example 2), such as calling a function or displaying a popup window. You can add any data you like (for example, images, text, clickable links, etc.) in the popup.
• Get directions between two points (example pending).
• Set boundaries on the area displayed in the map (example pending).
• Zoom in and out programmatically (example pending).
• Draw polylines on a map (example pending).
• Create overlays on a map (example pending).

Limitations

Requirements

The GoogleMap control requires you to use both interfaces and adapters. Three interfaces are provided by default through the properties available on the Interface tab of the Property Editor. You add the adapters to classes in your project as needed. In order to make the GoogleMap control functional on the most basic level, you must do three things:

• Obtain a GoogleMap key from Google. Be sure to use bungeeconnect.com for the web site URL. Google requires separate keys for HTTP and HTTPS URLs. The Builder uses https, but you may also want a key to use for building applications that you will deploy outside the Builder using HTTP. Even with the key, your map cannot yet display any data.
  

  Important You will need to obtain a separate key at the time you deploy your application. Because deployed applications run in a different space than the Builder, you need one key to simulate your application and another key to deploy the same application.

• Add two doubles to a class in your project. These data types can hold the latitude and longitude values used by the control. The control does not directly plot actual street addresses. In your project, you can simulate plotting street addresses by using a RESTful web service such as Google's or Yahoo's.
• Add an adapter to bind the GoogleMap control to the two doubles so you can pass latitude and longitude values to the control.

To see how to use the control, import the examples into the Builder and inspect the GoogleMap project. You should then be able to see the types of things you need to do in your own solution to achieve the various functionalities available with this control.

Examples

The following examples are intended to be used with sample code that you can import from the Design page's Home tab into your Bungee Builder DesignGroup. Each example is intended to build upon the previous example in order to provide you with a solid understanding of how to use this control.

Example 1: Displaying Pins on a Map (Ex1_Simple)

Example 1 provides a pre-populated collection of addresses of various Ivy League universities. These are displayed in a MultiColumnList control with a column each for the School and the City. Clicking on any school or city causes the address to be displayed on the map with a pin displaying the exact location of the school.

Providing Pin Locations

In this example, the GoogleMap control is bound to the schoolList collection, which is a collection of the School helper class below. The schoolList collection has been pre-populated with a list of schools using the Default Value property, which acts as a sort of constructor for the collection. Expand the dialogs in the Default Value property for the schoolList collection to see how the various elements in the collection are instantiated.

Also notice that the GoogleMap control's Element property is set to GoogleMapElementInterface by default. This interface provides a generic interface to the control, which can be implemented by an adapter. Because the elements of the schoolList collection are what drive the control interactions, to understand how this example works, you should inspect the School helper class carefully. The GoogleMapElementAdapter has been added to the School class in this example to implement the interface provided by the GoogleMapElementInterface and create the runtime binding between the elements in the schoolList collection and the GoogleMap control.

If in the School class, you double-click the GoogleMapElementAdapter, you can see that the adapter implements an interface that assigns the latitude and longitude elements of the adapter interface to the elements of the same name in the School class.

The adapter provides a way to bind the GoogleMap control's ability to place pins bases on latitude and longitude to the latitude and longitude fields in the schoolList collection (in Ex1_Simple class) that is a member instance of the helper class (School) so that the map can display the proper map coordinates.

Example 2: Displaying Images Based on a Pin Click (Ex2_PinClick)

Example 2 inherits from Example 1, and adds the ability to provide functionality to a user clicking the pin icon. This is provided through the displayNote function. Although in this example, the function is used to popup a window and display an image, in your own use of the control, you could call any kind of function you want or add any data you like to a window (for example, text, clickable links, etc.).

Displaying the Images

To achieve the functionality that displays the images for the universities, a function interface (PinClicked) has been added to the GoogleMap project. The interface allows the displayNote function to be called when a user double-clicks a pin. The Pin Notify Function property is where the assignment of the PinClicked interface is made to the control. The same PinClicked interface has been assigned to the displayNote function using the Interface List property.

If you double-click the function and select the open dialog statement, you can see that the Target property has been set to the argument of the function which takes an input of the School type.

The images to display for each school displayed in the MultiColumnList control are specified in the Default Value property, on the schoolList collection that is a member of the Ex1_Simple example class. The dialog used to display the images is provided in the School helper class.

Example Helper Class School

This class defines the School type, used in examples 1 and 2. The class defines two fields of type string (city and schoolname) as well as two fields of type double (latitude and longitude) and a field of type Image, called Image (used in Ex2_PinClick).

The fields available in the School determine the means by which a school location gets displayed in the examples. For instance, street addresses are not used, rather geo-location is provided through the latitude and longitude fields.

Reference

Supported Types

Type

Summary

Complex types (Object, Collection<Object>)

Complex Object type fields within application objects that are connected to the GoogleMap control where the field is a collection (the field's Collection property is set to true). Collections of type Object include any subclass of Object as well. For example, Collection<schoolList> can be tied to the GoogleMap, where schoolList subclasses (or inherits) from School which inherits from Object and represents any application object in your project.

Adapters

Type	Summary
GoogleMapAdapter	Use the GoogleMapAdapter to specify the parameters for obtaining a Google map.
GoogleMapDirectionsAdapter	Use the GoogleMapDirectionsAdapter to specify the geocodes for waypoints.
GoogleMapElementAdapter	The GoogleMapElementAdapter is required for the GoogleMap control to be minimally functional. In order for the map to display any pins or plot specific locations, you must provide adapters to the latitude and longitude variables of this adapter.

Associated Properties

Common Properties Index

Specialized Properties

• Element

Unique Properties

• Center On Selected Pin
• Directions
• Map Key
• Pin Clicked Type
• Pin Hover Notification Type
• Pin Hover Function
• Pin Info Window
• Pin Notify Function
• Track Center