• ​Choose your provider​

• ​Zoom and center the Map​

• ​Style the Map

  • ​Edit Map size​

  • ​Add spacing​

  • ​Add marker​

  • ​Add polyline​

  • ​Add polygon​

  • ​Clear map​

• ​Map Events​

  • ​On Map Ready​

  • ​On User Location Change​

  • ​On Press​

  • ​On Long Press​

  • ​On Marker Press​

Choose Your Provider

For iOS, you have the option to choose between Apple Maps or Google Maps. On Android, only Google Maps is available. Google Maps provides more custom style options from different map types to coloring and exposing or hiding map features.

Zoom and Center the Map

To auto-center your map, you can pair the Map component with a Location Sensor

Style the Map

To style the Map like the picture above, set Prover to google, Shows Traffic to true, Map Type to standard and Custom Map Style String to:

[ { "elementType": "geometry", "stylers": [ { "color": "#f5f5f5" } ] }, { "elementType": "geometry.fill", "stylers": [ { "color": "#ffffff" } ] }, { "elementType": "labels.icon", "stylers": [ { "visibility": "off" } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color": "#000000" } ] }, { "featureType": "administrative.land_parcel", "elementType": "labels.text.fill", "stylers": [ { "color": "#bdbdbd" } ] }, { "featureType": "poi", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#ffffff" } ] }, { "featureType": "road", "elementType": "geometry.fill", "stylers": [ { "color": "#d8d8d8" } ] }, { "featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [ { "color": "#757575" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#dadada" } ] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "color": "#616161" } ] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] }, { "featureType": "transit.line", "elementType": "geometry", "stylers": [ { "color": "#e5e5e5" } ] }, { "featureType": "transit.station", "elementType": "geometry", "stylers": [ { "color": "#eeeeee" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#e4e4e4" } ] }, { "featureType": "water", "elementType": "geometry.fill", "stylers": [ { "color": "#f3f3f3" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#9e9e9e" } ] } ]

There are a number of Advanced properties available to help you add custom styling to your map. Below are the most popular.

Edit Map size

For more information on sizing in your app, please see our introduction here​​

Add Spacing

For more information on adding spacing in your app, please see our introduction here​

To find the spacing properties, you'll have to select the Advanced tab

Add Marker

You can add a standard default marker to your map with the blocks below. The Map component does not yet supply its own latitude and longitude so we currently recommend using the Location Sensor component

Add Polyline

To add a polyline, you can use the blocks below where coordinates need to be in a list of latitude and longitude objects, stroke Width is an integer and stroke Color is in hex format

Add Polygon

To add a polygon, you can use the blocks below where coordinates need to be in a list of latitude and longitude objects, stroke Width is an integer, stroke Color is in hex format, and fill Color is in hex format

​

Clear Map

Sometimes it's helpful to clear all of the markers, polylines and polygons from the map, e.g. when you are trying to update your location in real-time which requires adding a marker and deleting existing markers.

The deleteAllMarkers block will clear all data from the map. This includes markers, polylines, and polygons.

Map Events

The map has several events. You can trigger actions to happen when these events occur.

Some of these blocks return position and coordinate outputs. These are objects which can be used with object blocks.​

Position and coordinate will both return an object with the following properties:

target: Numeric ID for your app coordinate:{ latitude: latitude of point selected longitude: longitude of point selected } position:{ x: x-position of selected point on the Map component y: x-position of selected point on the Map component }

On Map Ready

This event happens when the Map has loaded in your app. This is a good time to add any markers, polylines or polygons to your app that you want the user to see as soon as your app opens.

On User Location Change

This event happens when the location of the user changes. It returns the coordinate object.

On Press

This event happens when the user taps on the Map. It returns the coordinate and position objects.

On Long Press

This event happens when the user presses on the map for a longer period of time. It returns the coordinate and position objects.

On Marker Press

This event happens when the user clicks on a Marker that is on the Map.

The On Marker Press block returns an event object. This is an object which can be used with object blocks. The event block has the following properties:

latitude: returns the latitude of the selected Marker longitude: returns the longitude of the selected Marker