MapSVG 2.x tutorial

Creating a map of USA with office locations

Watch a video

Let's start with a simple example: we will add a map of USA with office locations to your WordPress website.

Go to MapSVG, click on "Choose SVG file..." and type in "usa". You'll get suggestions with file names containing "usa" string. Choose /geo-calibrated/usa.svg file.

Now in main tab "Settings" set map title to "Our offices", then go to "Colors" tab and set background, base and strokes colors.

Now go to "Markers" tab. You're working with "geo-calibrated" map which means that you can add markers simply by entering an address. Start typing your office location and choose it from drop-down list.

Add some information about your office into tooltip or popover. You can use HTML markup. Click "Save" when you're done.

Now that you have ready MapSVG map you can go to "Pages" section in WordPress menu on the left. Add new page, set title and then click on button in Visual Editor.

You'll see pop-up window with your MapSVG maps. Click on the map you've just created.

And it will be inserted into your page as a shortcode. Shortcode includes map title just for informational purposes so if you would have multiple maps on the page it would be easier for you to distinguish them.

Click "Save" and see the new fancy map on your WordPress website!