Maps by Google and Apple
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.
Property | Description |
Provider | Default ( |
To auto-center your map, you can pair the Map component with a Location Sensor
Property | Description |
Latitude | Default ( |
Longitude | Default ( |
Zoom | Default ( |
Shows User Location | Default ( |
Shows My Location Button (Google Maps only) | Default ( |
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.
Property | Description |
Map Type | Default ( |
Custom Map Style String (Google Maps Only) | Accepts a JSON string imported from the Google Maps API styling wizard. Map Type must be set to |
Shows Traffic | Default ( |
For more information on sizing in your app, please see our introduction here
Property | Description |
Height | Default ( |
Width | Default ( |
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
Property | Description |
Margin | Default ( |
Padding | Default ( |
There are limited styling options for markers at the moment. We are working to add the ability to change colors as well as add custom icons
.png?alt=media&token=8baf902f-dfef-45d0-abfc-79ae35ba2424)
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
.png?alt=media&token=f3c15c8f-5e54-46d7-ab3e-53e2d085b97d)
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
.png?alt=media&token=56c9b05b-41bc-42d1-8645-b6134e9c7c96)
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
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.
