Last updated
Was this helpful?
Last updated
Was this helpful?
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 .
Table of contents
First import the component using one of the release or via Servoy's Web Package Manager.
If you would like to see the component in an example install the included solution, .
Most importantly the component requires a Google Map API key to function properly. You can get one for free. Make sure to enable the GeoCoding API in addition to the Javascript Map API options.
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.
Creates a new, empty marker:
Adds the given marker at the optional index.
Adds the given markers at the optional index.
Returns the marker at the given index
Returns the marker with the given Id
Returns all markers
Api to remove markers at given index.
Api to remove all markers
Api to force refresh google maps
Api to center the map at given address
Api to center the map at given lat long location
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.
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.
When using in code you can define this type by using:
or by calling
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.
svyGMaps properties can be found .
svyGMaps API methods can be found . The component offers the following API methods:
svyGMaps events can be found .
svyGMaps custom types can be found .