paronne edited this page Nov 28, 2014 · 18 revisions

Introduction

The GoogleMaps component allows to use google maps within Servoy Smart Client and Web Client.

The GoogleMaps component is implemented on top of the google maps Javascript API v3. The component has similar API ( not all GMaps API are implemented ) which allows to display maps on Servoy forms and interact with them.

Requirements

A Google API key is not required, but is advised to use. Read the Google Maps API Key section for details on how to use the API key.

When using Google Maps in a non-free and non-publicly accessible environment, the Google Maps for Business version should be used. Read the google API usage limits and Terms which apply to the Google maps API as well to the GoogleMaps component.

On the Smart Clients this component depends on the availability of JavaFX, which must be made available in Smart Clients by setting the property servoy.client.javafx to true through the Servoy Admin pages

JavaFX comes pre-installed with Java 7 update 6 or higher.

On Java 7 < update 6 the user gets prompted when starting the Smart Client to install JavaFX if JavaFX is not yet installed

On Java 6 JavaFX must be manually installed and is only available on Windows

In development, make sure that Servoy Developer is also running on Java 7. See Running Servoy Developer on Java 7 on MAC OSX for instructions how to run Servoy Developer on Java 7 on OSX

Using the component

To display the GoogleMaps component on a form, place an empty tabpanel on the form. In the onLoad method of the form, instantiate the GoogleMaps component using the following code, where elements.container is a reference to the tabpanel:

var options = {zoom: 8, center: new gmaps.LatLng(-34.397, 150.644)};
var map = new scopes.svyGoogleMaps.Map(elements.container, options);

the options object contains the MapOptions properties. Zoom and center are the only required properties, everything else is optional.

Interacting with the map

The component offers methods to interact with the map and the possibility to add eventListeners for capturing events such as click, rightClick, doubleClick, zoomChanged and more. Add an eventListener to the map object returned by the constructor:

map.addClickListener(onClickCallback);

function onClickCallback(GMEvent) {
    var map = GMEvent.getSource();         // get the Map object
    var position = GMEvent.getPosition();  // get the position. Only mouse event such as click and right click returns a defined position object
    var data = GMEvent.data;               // returned data definition depends on eventType
    map.setCenter(position);               // center the map on the clicked position
}

Using Markers

A Marker is an icon placed on the map which identifies a specific location. By default, a marker uses a standard image. Markers can display custom images. Set the custom icon within the marker constructor or using the method setIcon() of the marker object.

Instanciate a marker using the contructor:

var marker = new scopes.svyGoogleMaps.Marker({
	position: new gmaps.LatLng(52.16, 5.44),
	draggable: true,
	title: 'Servoy HQ'
});

call the method setMap() of the marker to add it on a map.

marker.setMap(map);

to remove the marker from the map call the setMap() method by giving null as argument:

marker.setMap(null);

Add an eventListener to the marker:

marker.addClickListener(onMarkerClickHandler);

Displaying Info Windows

An InfoWindow displays content (usually text or images) in a popup window above the map, at a given location. The InfoWindow can also be attached to a marker to be displayed on top of it.

The infoWindow has a content area which can be HTML or a plain-text string and has position which will be overridden if it is attached to a marker:

var info = new scopes.svyGoogleMaps.InfoWindow({
	content: scopes.svyWebClientUtils.XHTML2Text(<div>
        <b>Servoy BV</b>
        <a href="http://www.servoy.com" target="new">more information</a>
        <p>De Brand 65 3823 LJ Amersfoort</p>
        </div>
});

info.open(map, marker);

Google Maps API Key

Read the tutorial to obtain a Google API Key. Set the apiKey using the method setAPIKey(key) of the GoogleMaps component:

scopes.svyGoogleMaps.setAPIKey(key)

The Google Maps for Business comes with a clientId to be included when communicating with the Maps API.

scopes.svyGoogleMaps.setClientId(id)
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.