5 Steps to create a map with pins

Visualize multiple locations on a map with beautiful and interactive pins. It’s very simple with Mapifator Map Story! In this article, we tell you how to create maps with attractive markers and multiple locations with ease and no coding only in 5 Steps.


You need to register in Mapifator and create a new map. You may have a question if it’s free or not. So the answer is “Yes! It’s free for small map stories! Even for commercial use!” We have a freemium model, so start creating a map for free and extend when you need it.

Step 1. Prepare places data

Mapifator Map Story allows creating maps and visualizing places on it. Place in Mapifator is not only a location but also interesting and useful information, attached media and even actions. To make a map quick and easy we recommend to prepare some data before you start.

Here is an example of data we prepared for the “Top 10 most popular National Parks in the USA” map story:

NameLocationDescriptionYoutube videosExternal links
Great Smoky MountainsGreat Smoky Mountains National Park, United States of AmericaRecreation Visits in 2018: 11,421,200
As a part of the Appalachian Mountains, Great Smoky Mountains contain more than 850 miles (1,370 km) of hiking trails…
Grand CanyonGrand Canyon, United States of AmericaRecreation Visits in 2018: 6,380,495
Grand Canyon is a steep-sided canyon carved by the Colorado River…
Images for the map with pins

If you place to add some pictures to the map, it’s better to prepare them as well. A place in the Mapifator can have a few images attached. We recommend adapting picture sizes to the web and having pictures with the same aspect ratio. We use 450px width pictures for our map stories.

Moreover, Mapifator allows adding some general information and pictures (logos) about the map, prepare it as well. You can prepare this data as well. For example like that:

Top 10 most popular National Parks in the USAThere are 61 protected areas in the United States knows as National Parks. More than 85 Million people visited Parks in 2018. You can find 10 the most popular ones in this Map Storyhttps://en.wikipedia.org/wiki/

Step 2. Create markers and tags

With Mapifator you can create very beautiful markers for your places. You can use default one or create a set of markers for the places you want to visualize.

Markers and tags for the map
Map Story markers

To add new Markers and Tags go to the “Settings” menu. You can always change the design of your markers and tags later, so all pins on a map will be automatically redrawn.

Mapifator tags help you to provide information about a place in a compact and informative form. For example, you can add tags like “Fishing”, “Walking”, “Swimming” and show their icons when providing the place description. In addition, tags are used as filters on a map. So your customers could have quick access to places with the tag feature.

Tags and tag filters

With Mapifator you can add text and icons to tags and specify a color.

Furthermore, some tags could be added to the map description and appear as the main place filters for your map.

Step 3. Add places and map information to the map

When the main job is done, it takes only a few moments to get a map with pins and integrate it into your website or application.

Add places data in the “Places” menu. You can specify also an order of the places there.

In the Place Editor, you can add prepared data and media, specify tags for each place.

Similarly, add map information and define tag filters.

In addition, you can add information about the map owner and an external link as the main action for the map. This could be, for example, a link to your website or another resource.

If you use some media that requires attribution, in Mapifator you can add all required labels and links to make your map compatible with the license conditions.

Step 4. Define a design for your map

Mapifator allows you to choose between several layouts for your map story.

Define a design for the Map Story by selecting one for the Map Information, List Item and Place view.

Map layouts

In addition, you can choose colors for your map story, that fill the best to your website or application design.

Note! Mapifator maps are already prepared for the mobile view, so the chosen layouts could look different on small devices. With the help of preview buttons, you can check how the map adjusts to different screen sizes.

Step 5. Share or embed your Map Story

Congratulations! Your map is ready for your customers!

Just click the “Share / Embed” button to get the share link or embed code.

Mapifator provides Map Stories as maps and articles. Choose the view you like the most!

Quickstart quide

Free map icons for markers

Markers are used to visualize a location on a map. Beautiful and different marker map icons make the map more informative and attractive. The most of map SDKs allow you to add custom icons to markers. And here comes the question: where to get icons? To create by yourself? To buy an existing icon set?

In this article, we would like to advise you a few free to use and proved by time icon sets. You can use them as icons for map markers or as a base for your custom marker icons.

Standard map icons

Map standard  pin icons
Standard map markers

All existing frameworks offer default icons for markers. The icons could have different colors and sometimes a text. Standard map icons are great when you just want to show where the location is. However, you need to make map markers more essential to provide more information on your map. For example, you want to make restaurants look different from hotels on your map.

What should you consider by using free map icons sets?

There are tons of icons sets on the internet. They could be free, partially free or cost some money. However, always check licenses before you integrate this or another library into your project. But sometimes it’s really tricky to find out what a license allows and doesn’t, do you need attribution and where to put them. Anyway, be careful and check it twice by adding 3d party icon set to your commercial application!

The two icons set we would like to highlight are open source, free, and proved by many users and time. In other words, their licenses allow you to use them in commercial applications or website without any restrictions.

Material Design icons

Material Design Free Icons
Material Design icons

Google designed a nice icon set for us. The icon set is distributed under Apache license version 2.0. The license allows to use the icons for any projects, but not to sell them. You can download icons as pictures (png), SVG or integrate as icon font into your project. Read more about Material Design icons…

Font Awesome

Font Awesome free icons
Font Awesome free icons

And it’s really awesome! Contains more than 1500 icons. The icons are free for commercial use as well. You can extend the set to the PRO version, which has a very affordable price and contains more than 5000 icons. The free version is available under MIT, SIL OFL, and CC-BY licenses. However, icon files already contain the required attribution as comments. You can use icons as a font or download as SVG. Read more about Awesome Font icons…

Using an icon as a map marker

You can use the listed icon sets as map markers without restrictions. In addition, you can make custom icons. For example, combine icon with a pin, or create an HTML version of an icon and customize it with poor CSS.

Read our next article about map marker icons. We tell you how to create SVG/PNG icons and HTML based icons for your map and add it to the map with Leaflet mapping library.

Geoapify offers map tiles of different styles as well as API to enrich you map with features. Sign up for free and start developing your custom map.