-
Notifications
You must be signed in to change notification settings - Fork 2
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.
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.
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.
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. Zooming the map will also update the dataprovider | 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 | |
dataprovider | KmlLayerURL | Apply a KML file url to the map |
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" |
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 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);
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);
Function call when the route is changed.
Sample function:
/**
* @param {{
legs: Array<{
start_address: String,
end_address: String,
distance: String,
distance_meters: Number,
duration: String,
duration_seconds: Number,
}>,
total_distance: Number,
total_duration: Number
}} route
*
*/
function onRouteChanged(route) {
}