MAPSVG - HOW TO MAKE INTERACTIVE MAP IN WORDPRESS

• SHARE
• Share
• Tweet
• Share
• Pin
• Share
• Share
• Share

When you want to display an interactive map on your website to display the locations of business branches spread across different cities, regions, provinces and countries with a more attractive map view then you can create interactive maps easily by using MapSVG.

MapSVG Interactive Map

MapSVG is a WordPress plugin that you can use to create interactive maps easily. Not only that, MapSVG also lets you create a variety of interactive images such as maps, diagrams, infographics, anatomies, house plans, and more by uploading your own SVG files that will be customized with MapSVG to be interactive images that can be added areas, colors, markers, tooltips, popovers and more. Besides can be used for WordPress, MapSVG can also be used for other types of websites or your own because this has two types of plugins that are specific to WordPress plugins and jQuery plugins for websites other than WordPress.

So, with this MapSVG plugin you can display maps as well as various vector images in the form of SVG files that are uploaded and converted to be more cool and interactive on your website so that your site users more easily understand the map than you just display the still image.

In this article I will cover more details about MapSVG features, how to use MapSVG plugin, create interactive maps and also create interactive layout images of SVG files that are uploaded and converted into interactive floor plans.

MAPSVG MAINTAINING FEATURES

MapSVG Features

MapSVG has more than 100 calibrated geo maps comprising major countries from around the world.
MapSVG allows you to add area markers with latitude / longitude coordinates or you can enter an address and MapSVG will get the coordinates for you.
MapSVG gives you more flexibility as you can edit SVG files.
MapSVG allows you to upload your own custom SVG files so you can create a variety of interactive images like floor plans, village plans, body anatomical maps, infographics and more.
MapSVG has an easy-to-use dashboard page, complete and there's a Live Preview that makes it easier for you to create maps.
MapSVG allows you to edit your existing SVG files in Adobe Illustrator or InkScape, delete areas or add new ones, change everything you need, or create your own maps in the form of SVG vector files to display in MapSVG.
MapSVG supports javaScript, so you can add custom event handlers like onClick, mouseOver, mouseOut, beofreLoad, afterLoad etc.
MapSVG already supports responsive displays, so maps are displayed perfectly on a variety of devices with different screen sizes.
MapSVG allows you to display a variety of objects on the map, and MapSVG is already integrated with the database.
MapSVG has a form builder that allows you to create various forms with different fields and then the input data will be stored in the database.

MAPSVG PRICE
MapSVG is a paid interactive map builder plugin, this plugin has been purchased by thousands of users and gets a great rating 4.5. MapSVG plugin you can buy in Codecanyon with a very affordable price that is:
WordPress Plugin: Price $ 35 which includes support and updates for 6 months. And you can add a $ 11.63 fee for support and a longer update of 12 months.
jQuery Plugin: Price $ 25 for support and updates for 6 months. And you can add a $ 8.63 fee for support and updates for 12 months.

BUY MAPSVG

HOW TO USE PLUGIN MAPSVG
To use the MapSVG plugin the first thing you need to do is purchase a MapSVG plugin and download the plugin on your computer.

Next please install the MapSVG plugin via your WordPress dashboard in the Plugins menu »Add New. Upload the plugin in the form of a zip file you have downloaded on your computer.

Once your plugin is installed and activated, there will be a new menu in your WordPress admin sidebar with the name "MapSVG". Please click on the menu and you will be faced with a page to start creating your first map.

Use the dropdown menu and you'll see a list of all the maps from different countries included by the plugin, there's a map for each country and a world map you can choose from. And in this example I will try to create an interactive map of "Indonesia" country.

MapSVG Interactive Map 1

After selecting the map you choose, you will be taken on a new page with the map you selected displayed on the left side and on the right is the map settings section with a variety of map settings menu.

On the "Settings" menu you can set various things such as naming maps, adjusting width and height, locking aspect ratios, setting the starting position, enabling or disabling responsive maps, allowing scrolling, zooming, popovers and mouse cursor settings, and a variety of navigation settings that you can choose to enable or in non- aktfikan.MapSVG Map IndonesiaIn the "Colors" menu you can adjust the color of the map.

Many Color maps you need to customize like you can also change the background color, the base color of the map, the border, the hover color and the brightness.MapSVG Color SettingsIn the "Regions" menu you can set individual options for each region defined on the map, each region has its own section where you can define custom colors on parts of the region and can also add tooltip text, popover text and add links.

And you can add a variety of additional fields in this section.MapSVG Map RegionsIn the "Database" menu you can add various fields that later this data will be stored in the WordPress database. Here you can also add a special marker pin to the map, you can enter the zip code and the plugin will display an address you can click on or you can enter the lattitude / longitude coordinates directly. In addition you also have the option of pin image to use with the name "Marker" and you can re-enter the text tooltip or popover text and HTML that will be displayed in the box when the marker is clicked.

In this example I create a text filed for the name, address, phone and marker. If you have please click the "+" button to save the field.MapSVG Database Map After the database fields I created as above, I tried to enter one information in the database which will be displayed on the tooltip on the interactive map.MapSVG Map Database 2Selanjutnya I go directly on section template to create code to display the contents of the database list. In this part of the template you have to understand a bit about html.

And I enter the field names in the template tags that are inserted in the {{}} sign in the "DB Object (Marker) Tooltip" option. When you are done you can save all these interactive map settings by clicking the "Save" button On the right on. And see your map results live on the left on the "Perview" tab menu. MAPSVG Map Marker If the map you created is done, please post a map on the post or page you want by copying the shortcode from the map at the top and put it on page or post or you can simply take a shortcode directly through the MapSVG menu added to the WYSIWYG menu.

Then paste the shortcode to the page or post and please click the publish button. Now you can see your interactive map is properly installed. If you are adept at Javascript, you can add your own custom JavaScript for maps with actions like onClick, mouseover, mouseout, beforeload and afterload. And also you add custom CSS to CSS menu to make map view more interesting. You can see the complete guide from MapSVG directly on tutorial page at MapSVG official website here »MapSVG Tutorial.

MAKE AN INTERACTIVE MAP OF SILK FILE SVG
In addition to creating a cool interactive map as above, MapSVG can also make SVG vector images into interactive images for various needs such as creating charts for home plans, city plans, infographics and other types of graphs. Please create vector images first using tools such as Adobe Illustrator, InkScape, Corel Draw, etc. After that export into the .svg file and upload the file into your WordPress via the MapSVG menu »Upload SVG file.MapSVG Vector Image

Here I try to convert the vector image file .eps a simple city plan and make the file into .svg file and then I upload it to MapSVG to be processed into interactive map. After SVG file uploaded, you can search the map on the dropdown menu and after that the illustrations will open in the SVG map editor. Now I will try to add region and tooltip to be like an interactive map.MapSVG Custom SVG

MapSVG is a great interactive map builder plugin with cool, full-featured animations that you can buy at a very affordable price of $ 35 only. But for the latest version it feels more difficult than the MapSVG version 2 plugin. But if you learn the plugin very well, then you will be able to produce an amazing interactive map.

see video related to this post, sourced from youtube.com

And that's a full review of MapSVG interactive maps and how to create interactive maps. Hopefully this article useful for you and good luck