Radzen Professional is now 20% off until January 4th 2019! Learn more

GoogleMap

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

GoogleMap Properties

Name Type Default Description
Name string ‘googlemap’ + index suffix Unique name of the map.
ApiKey string empty string Your Google Maps API key.
Center object with Lat and Lng properties 0, 0 The coordinates of the center of the map.
Markers array of marker objects empty The collection of markers displayed on the map.
Zoom integer 1 Zoom level of the map.

GoogleMap Events

Name Event Argument Description
MapClick position - the lat (latitude) and lng (longtitude) of the clicked location. Fires when the user click on the map.
MarkerClick marker - the clicked marker. Fires when the user click a marker.

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};

We are here for you

Making our users happy is always a priority for us.