Web Hosting

How to Add Interactive Travel Maps to Your WordPress Site?3 min read

Interactive Maps are helpful to make travel plans, explore routes, and itineraries by hovering over the map and clicking on markets in this map.

Are you looking for the best educational theme for your institution? Choose Academix for WordPress.

Method 1 – Using Google My Maps

You don’t have to install any plugin on your WordPress site in this method.

  • First of all, go to Google My Maps and click “create new map” button.
  • On Edit Map page, choose base map to create maps by adding layers, points of interest, etc. You can also draw lines on map, use rulers, add routes, and choose items. It will save all the map items created by you in layers. You can rename, add, edit or delete layers.
  • Click on any item to change title, add description, or add videos/photos. Once done, make it public to use on your website.
  • Click on share button. Under the section “Who has access”, click on “Change”.
  • Select “On – Public on the web” and click Save. Close the sharing center by clicking on “Done”.
  • Click on menu icon along with map name on edit panel, choose “Embed on my site”. Now, you will see embed code which can be copied.
  • Now, go to page or post where you can add Interactive Map. Switch to text editor and paste embed code on post edit screen. Save changes and preview to see it in action.

Method 2 – Using Maps Marker Pro Plugin

Though you can add interactive maps yourself with Google Maps, it is still limited to Google Maps standards and lacks some features. This method will work if you want to use Bing, Open Street Maps or other services.

Are you looking to create responsive slideshow? Download ModuloBox lightbox plugin for WordPress.

First of all, install Maps Marker Pro plugin and activate this plugin. Maps Marker Pro is very effective and has a lot of features, such as custom markers, multi-layer maps, GPX support, directions, export maps in several formats. It can make maps even more innovative.

  • Visit Maps Marker Pro page and click on “Add New Layer” to create your interactive map.
  • Rename your layer and click on “Publish” button
  • After creating layer, you can add markers. To add first marker, go to Add New Marker under Maps Marker Pro.
  • Enter title for marker and look for location and choose it.
  • You may also want to put marker on your desired layer. Type the name of layer and choose it.
  • Be sure to click “Publish” button to save marker.
  • Add other markers with same process.
  • Edit any page or post where you can add map after adding markers.
  • Click “Add Map” button on post edit screen.
  • It will show up the popup which features all the markers and layer created before. You can choose layer and click ‘Insert Map’ button.
  • In Post Editor, add the shortcode. Save or Publish post and preview to see your map.
  • You can also adjust dimensions and map size on main layer.

You may also like our step-by-step guide that can help you add Mega Menu to your website.

(Visited 11 times, 1 visits today)

Leave a Reply