{"id":16065,"date":"2020-11-16T15:00:59","date_gmt":"2020-11-16T14:00:59","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=16065"},"modified":"2021-04-22T10:34:54","modified_gmt":"2021-04-22T08:34:54","slug":"how-to-create-interactive-map-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-interactive-map-in-wordpress\/","title":{"rendered":"How to Create an Interactive Map in WordPress"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]Although digital presence has become a must for most businesses, it goes without saying that a map to your brick-and-mortar location is still more than useful. To make the best of it, you can even style your Google map<\/a> to fit your website\u2019s overall design. With an interactive map<\/a>, though, you\u2019re going one step further: you allow your users more freedom to discover their own ways of reaching you and planning their trips at their convenience. Not to mention that interaction makes for a more satisfying user experience, drawing your visitors in for longer user sessions. In this article, we will show you two ways of adding an interactive map to your WordPress website – using Google My Maps and using a specialized plugin.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Add an Interactive Map in WordPress Using Google My Maps<\/h2>\n

[\/vc_column_text][vc_column_text]The simplest way to install an interactive map is using Google\u2019s My Maps service. The first thing you need to do is go to Google My Maps<\/a> and click on the +Create a New Map<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Create <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]This will take you to the map editor. Using the menu at the top, you can add routes, markers, lines, directions and measure distances. Each map may have up to 10,000 lines, shapes, or places. The main section on the left lets you add layers (with up to 2,000 lines, shapes or places per layer), choose a Base map<\/strong> mode between nine options, and, finally, name your map.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Create <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]We will name our map \u201cHow to reach us\u201d and add a short description, after which we will save our changes.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Map <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Next, we will stick a pin to mark our location. We will name it \u201cOur location\u201d and add a short description. You can use the menu to change the style of the pin, as we have, into a star, or the colour, which we didn\u2019t. You can also add images or video to your location.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Map <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Next, we will draw some lines from the local bus stop and train station, just to show how to get there from the nearest public transport stops, using black for the train and red for the bus stop.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Map <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Finally, we need to embed it into our website. For that, we first need to make our map public. Entering the sharing menu from the main command panel, we will set the access control from Restricted<\/strong> to Anyone with the link<\/strong>. This makes the map public.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Sharing <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Next, you need to access the embed code from the main editing panel. Click on the three dots<\/strong> next to your map name, select Embed to my website<\/strong>, and copy the HTML you get.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Embed <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]To embed it into your website, if you are using Gutenberg, access the page you want to add the map to (or create a new one), simply click the +<\/strong> sign to add a block, then select the Custom HTML<\/strong> block, and paste the code into the block\u2019s field.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"HTML <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you are working with Elementor<\/strong>, you need to drag the Custom HTML<\/strong> widget and then paste the code into its field. If you are using the WPBakery Page Builder<\/strong>, you need to use the Raw HTML<\/strong> element and supply it with the code you pasted. For the Classic<\/strong> editor, simply make sure your editor is set on the Text<\/strong> tab and simply paste the code to where you want it.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]And your map is ready, just as you have configured it.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Map <\/div>\n<\/div>[vc_empty_space height=”78px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Add an Interactive Map in WordPress Using a Plugin<\/h2>\n

[\/vc_column_text][vc_column_text]You can also use a plugin to create an interactive map. There are plenty of WordPress plugins with this or similar functionality, many of which we have discussed in our article on best Google Maps plugins<\/a>. For this demonstration, we’re going to use WP Google Maps<\/a>, but you can pick any one you like.Once you have installed and activated the plugin, find the plugin settings on your list of Installed Plugins<\/strong> and find the Map Editor<\/strong> to create a map.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"WP <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Once there, you will find the single editable map the plugin allows you. You will need to Edit<\/strong> it.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"My <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You can change the Map Name<\/strong>, as we have, to Where we are. We will also move the Zoom Level<\/strong> control quite a bit to the right, zooming in to make our map useful for people seeking directions. We will not be using the remainder of the options for the purposes of this demonstration, but we will draw your attention to the Width<\/strong> control. If you want your map to be responsive, you ought to leave it at 100%<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Creating <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Next, we will scroll down to the Your Markers section and delete the default marker. You can do that by selecting it from the menu and clicking the dustbin icon. Then we will set up our own marker centered on Bridge Street in Saint Matthews, South Carolina by finding the location and right-clicking the map. Finally, we will Save<\/strong> both our Marker<\/strong> and our Map<\/strong>, in that order.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Mark <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Scrolling back up to the Create your map<\/strong> section again, you will find the shortcode for your map in the General Settings<\/strong> tab. Click to copy it to your clipboard and use it in a post.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Once you have your shortcode ready to paste, open a post or page in which you wish to embed your map. We will show you how to do it in a post, using Gutenberg. First, click the +<\/strong> sign to add a shortcode block, and then paste your map shortcode into the block\u2019s field.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Paste <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]And your map will appear in your post, as configured.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Map <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Note that the WP Google Maps plugin has a multitude of options we have barely touched upon in this demonstration, which we encourage you to explore in order to fully customize your map according to your needs. The same, and even more, goes for the Pro version.
\n[\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”new-top-picks-banner”][vc_empty_space height=”81px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

In Conclusion<\/h2>\n

[\/vc_column_text][vc_column_text]If you want to let your visitors know where you are in the physical world, you can do that easily by adding an interactive map to your website using either of the methods we have demonstrated. An interactive map will let them scroll around and zoom in order to find the best route to reach you, but with just a few clicks, you can make it even easier by pointing them in the right direction. If you have any kind of a brick-and-mortar location, why not make it super easy for your visitors to find it?
\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Need an easy way for your visitors to find you? How about an interactive map for your WordPress website?<\/p>\n","protected":false},"author":16990,"featured_media":16235,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[58,15,4,13],"class_list":["post-16065","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-maps","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/16065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=16065"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/16065\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/16235"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=16065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=16065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=16065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}