The Map component creates a full-width map with custom location markers, including the option for the map to follow you as you scroll down the post. Only one map is allowed per story.
Height – The height of the map component. By default this is set to
500. Avoid using percentages here.
Sticky – Enabling this option will enable the map to be “fixed” to a position on your screen that you determine here (left, right, top, or bottom). When you choose a sticky position, a new Map Marker component will be revealed. The map will stop at the locations where you put these in your story.
MAP MARKER OPTIONS
Title – When you put a Map Marker component into the post, it will display an H2 heading. This is the text that should be displayed for the title.
Hidden – Don’t need a heading but still want the map to stop in a part in your story, just set this to hidden and the H2 heading will be invisible.
Adding Maps & Map Markers
The Map component is pretty versatile when it comes to adding markers and even custom map tiles using filters. The location markers are added by clicking on the Map in your post edit screen. Clicking on a map will add a marker. Clicking the marker, will allow you to add a tile to that marker. Clicking the “update” button will update the marker text, and clicking “delete” will delete the marker. You can additionally click and drag the markers to more fine-tune the location.
Additionally, you can set the zoom level, and general map position. Be sure to update the post when ready, and all of this information will be saved and reflected onto the map on the front of your site (and within admin in that post).
When ready, use the component generator and add a map to your post! Oh also, if you’re using sticky mode, then the location of the map in the post won’t matter until the screen gets small. So on mobile and tablets, the map will go back to a “normal” map shown wherever you place the component in the story. Easy peasy!
Google Map API Key
The Map Editor relies on Google Map API to allow you to enter and edit locations. Google Map API allows you to type in the name of the cities and places and have Google pull up the locations for your map. While using the default key provided by Aesop should be fine for most of the time, it is recommended that you get your own API key for your website/project. You can get your ID free from Google.
You can also opt for their paid premium plan if you wish.
Change Map Tiles
1.3 introduces a new filter to allow you to change the map provider per post. More information including a sample piece of code can be found here.