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
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:
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);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);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);Returns the marker at the given index
var marker = elements.map.getMarker(index);Returns the marker with the given Id
var marker = elements.map.getMarkerById(markerId);Returns all markers
Api to remove markers at given index.
elements.map.removeMarker(5);Api to remove all markers
elements.map.removeAllMarkers();Api to force refresh google maps
elements.map.refresh();Api to center the map at given address
elements.map.centerAtAddress(shipaddress + ' ' + shipcity + ' ' + shipcountry);Api to center the map at given lat long location
elements.map.centerAtLatLng(33,-111);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.
Returns the position displayed at the center of the map as a latLng object.
Sets the viewport to contain the given bounds (as latLngBounds object).
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.
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).
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).
Callback method that fires whenever an address from a marker has successfully been geocoded.
Function call when the route is changed.
Custom types
svyGMaps custom types can be found here.
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(...)Settings for the route calculation, set on the directionsSettings property.
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.
A single leg of a route result
A latLng is a point in geographical coordinates: latitude and longitude.
A latLngBounds instance represents a rectangle in geographical coordinates, including one that crosses the 180 degrees longitudinal meridian.
Last updated
Was this helpful?