Home

Welcome to the svyGMaps wiki!

This wiki 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.

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.

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.

Component Properties

Type	Name	Summary	Required	default
String	apiKey	Google Map API Key	Required
Boolean	fullscreenControl	hide fullscreen button		false
String	mapType	type of mape to show, supported values ["ROADMAP", "SATELLITE","HYBRID","TERRAIN"]		ROADMAP
Boolean	mapTypeControl	hide maptype control button		false
markers[]	markers	marker properties
Boolean	streetViewControl	hide streetView control button		false
Boolean	zoomControl	hide zoom control button		false
dataprovider	zoomLevel	Setting the zoomlevel of the map based on a dataprovider type integer. When no dataprovider the default zoomlevel will be used		7
Boolean	useGoogleMapCluster	Use google maps in combination with clusterview		false
Boolean	useGoogleMapDirections	Use google maps in combination with directions		false
String	gestureHandling	Setup or Disable gestureHandling for google maps, supported values ["auto", "greedy","cooperative","none"]		auto
routeSettings	directionsSettings	Set route specific settings for calculating the route

markers[] Properties

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

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

Type	Name	Summary	default
dataprovider	addressDataprovider	Dataprovider returning a string formated like: "Fred. Roeskestraat 97, Amsterdam, NL".
String	addressString	String formated like: "Fred. Roeskestraat 97, Amsterdam, NL". This property will only work when no dataprovider is set.
number	latitude	Latitude cordinates. This property will only work when no dataprovider & addressString is set.	0.0
number	longitude	Longitude cordinates. This property will only work when no dataprovider & addressString is set.	0.0
String	iconLabel	Label to display inside the marker or radius
String	tooltip	Tooltip to show when hovering over a marker or radius
String	iconUrl	Url for a marker label to display samples: https://sites.google.com/site/gmapsdevelopment
tagstring	infoWindowString	Text or html to show in a popup when clicking on a marker or radius
Boolean	drawRadius	Enable when you want to have a radius, will only work when iconUrl is empty	false
Integer	radiusMeters	Radius size to show, default in googlemaps is meters	2000
Color	radiusColor	Radius color	"AA0000"

RouteSettings Property

Type	Name	Summary	default
Boolean	optimize	Let google maps optimize the waypoints order	true
String	travelMode	specifies what mode of transport to use when calculating directions, options: ["driving", "walking","bicycling","transit"]	driving
Boolean	avoidFerries	when set to true indicates that the calculated route(s) should avoid ferries, if possible	false
Boolean	avoidHighways	when set to true indicates that the calculated route(s) should avoid major highways, if possible.	false
Boolean	avoidTolls	when set to true indicates that the calculated route(s) should avoid toll roads, if possible.	false

API

newMarkers

Api to add dynamic markers to google maps. Type should be an array with google maps markers.

/**@type {Array<CustomType<googlemaps-svy-G-Maps.googleMarkers>>} */
var marker = [{addressString: "Fred. Roeskestraat 97, Amsterdam, NL"}];
elements.map.newMarkers(marker);

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();

getCalculatedRoute

Api to get the calculated route back as an object into Servoy

var routeJson = elements.map.getCalculatedRoute();
application.output(JSON.stringify(routeJson))

This will return an object:

{
    legs: [{
        start_address: String,
        end_address: String,
        distance: String,
        distance_meters: Number,
        duration: String,
        duration_seconds: Number,
    }],
    total_distance: Number,
    total_duration: Number
}