This project is no longer actively maintained

You can view the original code on Github.

We’ve added a new project, Locator, to our Map site templates that showcases a new, easy way to quickly create and share locations using MapBox Maps. Locator is a simple HTML + JavaScript web application that allows a user to place a marker on a map and then use an HTML embed code to share it. It’s designed as a template application, you can fork it and use it as-is or customize it to your needs.

One of the neat things about Locator is that it does not require any backend storage for saving the map - all configuration and markers are stashed in the embed code. As there is no need for storing data, there is also no need to authenticate for creating a map. Locator could be used for instance to allow anybody on your team to create quick simple maps without the need to log in to a MapBox account.

Here is a screenshot showing Locator’s user interface for creating a map:

On the receiving end, the embed.js file parses the generated HTML block:

<div class="mapbox-map" data-mapid="mapbox.streets" data-lon="-77.0298390674591" data-lat="38.91358140204996" data-zoom="17" data-width="100%" data-height="400px">

    <div class="marker" data-name="pin-m" data-symbol="star" data-color="3178b5" data-lon="-77.0326500225067" data-lat="38.913230783255834" data-tooltip="MapBox%20HQ"></div>

    <div class="marker" data-name="pin-m" data-symbol="circle-stroked" data-color="000000" data-lon="-77.03177025794982" data-lat="38.91457063859569" data-tooltip="%3Cstrong%3EBlack%20Cat%3C%2Fstrong%3E"></div>

    <div class="marker" data-name="pin-m" data-symbol="" data-color="5ea154" data-lon="-77.02702811241149" data-lat="38.91259215171586" data-tooltip="Intersection%20of%20two%20roads"></div>


and converts it into a fully-functional MapBox map:

Create your own Locator app

Locator is open-source, so you’re welcome to copy, modify or just lift useful code from it. We encourage you to fork it on Github and start building your own version of embeddable maps. If Locator is not exactly what you’re looking for, take a look at one of the other MapBox Map Site Templates.