Google Maps

svyGMaps

This guide provides comprehensive documentation for using the svyGMaps web-component, which allows you to display a location using the Google Maps API within Servoy's NGClient. To see a live sample of the component you can go here.

Table of contents

• Getting Started

• Example Usage

• svyGMaps Properties

• svyGMaps API

• svyGMaps Events

• Custom types

Getting Started

First import the component using one of the release binaries or via Servoy's Web Package Manager.

If you would like to see the component in an example install the included solution, googleMapsExample.servoy.

Most importantly the component requires a Google Map API key to function properly. You can get one here for free. Make sure to enable the GeoCoding API in addition to the Javascript Map API options.

Example Usage

First add the component to a form and setup the apiKey. Next you can add one or multiple markers to the component. This can be done by adding markers in the property panel or from code. You can add additional styling to the component using the styleClass property. For more information check out the example solution.

svyGMaps Properties

svyGMaps properties can be found here.

svyGMaps API

svyGMaps API methods can be found here. The component offers the following API methods:

createMarker

Creates a new, empty marker:

var servoyMarker = elements.map.createMarker('svyMarker', 'Fred. Roeskestraat 97, 1076 EC Amsterdam', 'Servoy B.V.');
servoyMarker.iconMedia = 'media:///servoy_marker.png';
elements.map.addMarker(servoyMarker);

addMarker

Adds the given marker at the optional index.

var servoyMarker = elements.map.createMarker('svyMarker', 'Fred. Roeskestraat 97, 1076 EC Amsterdam', 'Servoy B.V.');
servoyMarker.iconMedia = 'media:///servoy_marker.png';
elements.map.addMarker(servoyMarker);

addMarkers

Adds the given markers at the optional index.

var markers = [];
markers.push(elements.map.createMarker('marker-1', 'Fred. Roeskestraat 97, 1076 EC Amsterdam', 'Servoy'));
markers.push(elements.map.createMarker('marker-2', '1600 Pennsylvania Avenue NW, Washington, DC 20500', 'White House'));
elements.map.addMarkers(markers);

getMarker

Returns the marker at the given index

var marker = elements.map.getMarker(index);

getMarkerById

Returns the marker with the given Id

var marker = elements.map.getMarkerById(markerId);

getMarkers

Returns all markers

removeMarker

Api to remove markers at given index.

elements.map.removeMarker(5);

removeAllMarkers

Api to remove all markers

elements.map.removeAllMarkers();

refresh

Api to force refresh google maps

elements.map.refresh();

centerAtAddress

Api to center the map at given address

elements.map.centerAtAddress(shipaddress + ' ' + shipcity + ' ' + shipcountry);

centerAtLatLng

Api to center the map at given lat long location

elements.map.centerAtLatLng(33,-111);

getBounds

Returns the lat/lng bounds of the current viewport as a latLngBounds object. If more than one copy of the world is visible, the bounds range in longitude from -180 to 180 degrees inclusive. If the map is not yet initialized (i.e. the mapType is still null), or center and zoom have not been set then the result is null or undefined.

getCenter

Returns the position displayed at the center of the map as a latLng object.

fitBounds

Sets the viewport to contain the given bounds (as latLngBounds object).

setOptions

Sets Google Maps options. See here: https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions the list of available options.

svyGMaps Events

svyGMaps events can be found here.

onMapEvent

Callback method for any events assigned in the mapEvents property.

To listen for map events, use the mapEvents property to assign the events you want to listen for (e.g. "click"). The callback method will be fired whenever one of the events in the mapEvents list is detected and receives the event and an optional latLng object (Mouse events like "click" only).

onMarkerEvent

Callback method for any events assigned in the markerEvents property.

To listen for marker events, use the markerEvents property to assign the events you want to listen for (e.g. "click"). The callback method will be fired whenever one of the events in the markerEvents list is detected and receives the event, the marker index and an optional latLng object (Mouse events like "click" only).

onMarkerGeocoded

Callback method that fires whenever an address from a marker has successfully been geocoded.

onRouteChanged

Function call when the route is changed.

Custom types

svyGMaps custom types can be found here.

marker

When using in code you can define this type by using:

    /** @type {CustomType<googlemaps-svy-G-Maps.marker>} */
    var marker = {}

or by calling

var marker = elements.map.createMarker(...)

routeSettings

Settings for the route calculation, set on the directionsSettings property.

routeResult

A route result object provided to the onRouteChanged handler holding all legs of the route and the total number of meters and the total number of seconds of the route calculated.

leg

A single leg of a route result

latLng

A latLng is a point in geographical coordinates: latitude and longitude.

latLngBounds

A latLngBounds instance represents a rectangle in geographical coordinates, including one that crosses the 180 degrees longitudinal meridian.