Map Tool

Press on the Map icon from the toolbar, then click anywhere on the page or canvas or just click and drag until you’ll reach the perfect size.

Map options

There are several options and properties in the Inspector panel. This includes options for: positioning, changing the width and height, stretching, setting opacity, adjusting rotation and corner radius, choosing map type (standard or directions), setting predefined location, enabling or disabling map options, filling custom JSON map styles and/or adding a drop shadow.

Refer to the image above to identify map properties panels.

1. Width and height
2. Stretch to Width
3. Opacity
4. Rotation, corner radius
5. Map Type
6. Set Location
7. Map Options
8. Custom Styles
9. Launch Maps Wizard
10. Drop Shadow

Learn more about how to use map properties below.

Width and height

Those properties allow changing the size of the map, once hovering on the letter W (width) or H (height) should appear a left-right arrow which allows dragging to the desired size, just click and drag, and release after the perfect size was reached.

Alternatively pressing on the number close to W or H letters will allow entering the desired size in px (pixel).

Once the lock icon is pressed it will change to a locked one, this means that when the map property will change size it will change proportionally.

Stretch to Width

Clicking this property will set the map to 100% which is equal to the width of the browser window.

Opacity

Once dragging or typing another value, map transparency will change accordingly, it could be from 0 to 100.

Rotation, corner radius

Once hovering on the angle icon should appear a left-right arrow that allows dragging to the desired radius, just click and drag, and release after the ideal angle was reached.

Right drag - the map will rotate in the right (positive value) direction, left drag - it will rotate to the left (negative value).

Alternatively pressing on the number will allow typing the exact degree amount.

The corner radius works in the same way as the angle, but once the action performs it will change the radius.

It could be combined with rotation.

Pressing the icon that indicates corners on the right side just close to the corner radius will allow changing the radius per corner.

The order is:

• Top right corner

• Bottom right corner

• Bottom left corner

• Top left corner

Map Type

There are 2 types of map: Standard (applied by default) and Directions.

Directions will show the best route between 2 destinations allowing you to choose between driving (default), walking or cycling.

Set Location

This property allows setting desired location even the exact address which indicates the home or office address. 

Press the Set Location button and just right on the map will appear a search field, fill in the address, and once ready press the Done button.

Hint: For a clear view of the search field set map width at least to 360px width, once done switch it back to a smaller size, if needed.

For Directions, there will be 2 addresses, the first one for point A and the second for the B map point.

Don’t forget to press the Done button.

For previewing the result, place the map inside the page and press the preview (eye) icon in the top right corner.

Map Options

Choose what kind of functionality need to be displayed on the map, by default Controls are displayed (enlarge to full screen, zoom in, zoom out) and Zoom on scroll is off.

Toggle off Controls will remove all additional controls from the map.

Custom Styles

This input field is designated for allowing changing the style of the map, just paste or write JSON (JavaScript Object Notation) syntax.

This is how map style changes, try to copy and put this syntax in the field and see what happens.

[ { "elementType": "geometry", "stylers": [ { "color": "#242f3e" } ] }, { "elementType": "labels.text.fill", "stylers": [ { "color": "#746855" } ] }, { "elementType": "labels.text.stroke", "stylers": [ { "color": "#242f3e" } ] }, { "featureType": "administrative.locality", "elementType": "labels.text.fill", "stylers": [ { "color": "#d59563" } ] }, { "featureType": "poi", "elementType": "labels.text.fill", "stylers": [ { "color": "#d59563" } ] }, { "featureType": "poi.park", "elementType": "geometry", "stylers": [ { "color": "#263c3f" } ] }, { "featureType": "poi.park", "elementType": "labels.text.fill", "stylers": [ { "color": "#6b9a76" } ] }, { "featureType": "road", "elementType": "geometry", "stylers": [ { "color": "#38414e" } ] }, { "featureType": "road", "elementType": "geometry.stroke", "stylers": [ { "color": "#212a37" } ] }, { "featureType": "road", "elementType": "labels.text.fill", "stylers": [ { "color": "#9ca5b3" } ] }, { "featureType": "road.highway", "elementType": "geometry", "stylers": [ { "color": "#746855" } ] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [ { "color": "#1f2835" } ] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [ { "color": "#f3d19c" } ] }, { "featureType": "transit", "elementType": "geometry", "stylers": [ { "color": "#2f3948" } ] }, { "featureType": "transit.station", "elementType": "labels.text.fill", "stylers": [ { "color": "#d59563" } ] }, { "featureType": "water", "elementType": "geometry", "stylers": [ { "color": "#17263c" } ] }, { "featureType": "water", "elementType": "labels.text.fill", "stylers": [ { "color": "#515c6d" } ] }, { "featureType": "water", "elementType": "labels.text.stroke", "stylers": [ { "color": "#17263c" } ] } ]

Launch Maps Wizard

This button redirects to https://mapstyle.withgoogle.com/ which allows playing around with map styles.

Choose one from the predefined Google Maps style or create your own.

Drop Shadow

This property is usually used for giving the impression that the object is raised above the objects behind it.
Just press on the plus icon to add it.

By default, it will be assigned a black color (#000000) with 25% of opacity, with the X (right) and Y (down) axis to 1px, and with the blurriness to 3px.

Drop Shadow could be hidden or unhidden, just pressing on the eye icon, also it could be totally removed by pressing on the minus icon.

Drop Shadow property could be adjusted to your needs, just click on the icon close to the first number in the row and the additional panel will appear immediately.

Play around with all the options, once happy just click anywhere on the canvas or proceed straight to any other property or element.