GoogleMap (Angular)

This guide demonstrates how to use the GoogleMap component which is a wrapper for the Google Maps API

GoogleMap Properties

GoogleMap Events

Configuration

Radzen allows you to visually set the center and zoom of a map. Click the Configure Google Map button in the property grid. You can also search for the location which you want the map to show.

API Key

The Google Maps API is available as a commercial service. While you can use it for free there is a rate limit. Once you reach that limit the GoogleMap component will display a lower resolution map, a watermark and a warning that the API didn’t load correctly. To avoid that you should get a Google API key and set it via the ApiKey property.

Markers

You can define markers in two ways - by data-binding the Markers property to an existing page property or by adding a marker from the property grid.

Data-binding the Markers property

This approach is useful when the marker locations and other data depend on a database or other API call.

1. Add a Set action in the Page load event.
2. Set the Name of the property to markers and set its Value to be an array of objects that have a position property e.g. [{position:{lat: 47.642232, lng: -122.13679100000002}}]
3. Select the map and click the gear icon next to the Markers property. Then set the value to ${markers}.

Add markers from the property grid

You can also add markers from the property grid as with other array properties.

1. Click the plus button.
2. Set the Lat and Lng properties of the marker. You can also the location picker by clicking the compass button.

Add markers from code

Sometimes you need to add a marker after some user action. For example when the user clicks on the map.

1. You need to data-bind the Markers property in order to do that.
2. Handle the MapClick event and use an Execute JavaScript code action. Set Code to ${markers}.push({position: ${event.position}}). This code appends a new marker via the Array.push JavaScript method.

Remove markers from code

You can use a similar approach to remove a marker - remove the corresponding item from the property which Markers is data-bound to.

1. You need to data-bind the Markers property.
2. Handle the MarkerClick event and use an Execute JavaScript code action. Set Code to ${markers}.splice(${markers}.indexOf(${event.marker}), 1); This code removes the clicked marker from the markers property via the Array.splice and Array.indexOf JavaScript methods.

Update existing markers from code

If the markers are data-bound you need to update the corresponding property:

1. Handle the MapClick event.
2. Add Execute JavaScript code action. Set code to ${markers}[0] = {position: ${event.position}};

If the markers are defined from the property grid:

1. Data-bind the Lat and Lng properties of the marker to some page properties created in the Page Load event via Set property actions e.g. lat, lng.
2. Handle the MapClick event.
3. Add Execute JavaScript code action. Set code to ${lat} = ${event.position.lat}; ${lng} = ${event.position.lng};