Cách thêm bản đồ tương tác (Interactive Map) vào website WordPress [NEW]

By admin 11/07/2022 Blog 0 Comments

Interactive Map is becoming more and more popular on the internet. Integrating Interactive Map into the website, businesses will get a lot of competitive advantages. So what is an interactive map? And how to add interactive map to WordPress website? The answer will be right in the next article of the Hawk. Let’s find out together!

Contents

0.1 Table of contents

1 1. What is Interactive Map?
2 2. Why should you attach an interactive map to your website?
3 3. How to add interactive maps to your website

1. What is Interactive Map?
2. Why should you attach an interactive map to your website?
3. How to add interactive maps to your website
1. Method 1: Use Google My Maps
2. Method 2: Use the free tool Snazzy Maps
  1. How to generate Google Maps API Key
  2. How to create interactive maps with Snazzy Maps
3. Bonus: Popular free interactive map making tools

1. What is Interactive Map?

Interactive Map (Interactive Map) is a type of map using GIS – Geographic Information Systems (Global Geographic Information System). Therefore, the data on the interactive map is updated quite accurately in real time.

Interactive Map allows users to navigate, perform operations such as zoom in – zoom out, rotate, tilt, determine specific geographical locations, find travel routes, …. In addition, in some cases, users can also query data, view statistical reports (for example, economic and social situation, traffic jam, …) from Interactive Map.

2. Why should you attach an interactive map to your website?

Adding an interactive map to your website will give your business a lot of competitive advantages. It will be especially useful for a retailer or travel agency site.

Here are some typical benefits of interactive maps:

Retain users on the website longer: Interactive Map is an element that attracts, stimulates users to interact and stay on the page longer. This means that it will help increase the time to visit the site and reduce the bounce rate of the website.
Reach new customers: Using interactive maps, you will be able to reach your local customers more easily.
Increase ranking on Google: Interactive maps are one of the factors that help Google trust your website more. From there, the ranking results of the page will be significantly improved.
Create trust and convenience for customers: With interactive maps, customers will know the basic information of the company, the address and how to go to the store when they need to buy your products/services.

3. How to add interactive maps to your website

There are many ways to add interactive maps to your website. In particular, the simplest and most common way is to use Google My Map. In addition, you can also use other tools (free or paid) to create your own maps.

Here are the detailed instructions:

Method 1: Use Google My Maps

The steps are as follows:

Step 1: Visit the Google My Maps website with your Google account.

Step 2: Click the “Create a new map” button.

Click the “Create a new map” button to create a new map — Click the “Create a new map” button to create your own new map

Step 3: The system will redirect to the map editing page. Here you can create your own map by selecting a base map (e.g. Hanoi Area Map) and adding the company/store location.

All markers are saved as layers. You can add, delete, edit, write description, add photos/videos or rename the place as you like.

You can add locations, write descriptions on the map as you like

In addition, Google My Maps also provides a toolbar to help you add routes, markers, measure distances, and more. — Toolbars to customize routes, measure distances, etc.

Toolbars to customize routes, measure distances, etc. Step 4:

After editing the map, go to — Select “Public: everyone on the internet can find and access” to share the map with everyone

Select “Public: everyone on the internet can find and access” to share the map with everyone

Step 5:

On the map edit menu, click the 3 dots and select “Embed on my site” to get the Google Map embed code. — Select “Embed on my site” to get the embed code

Select “Embed on my site” to get the embed code

At this point, a dialog box will appear. You just need to copy the code. — Copy the code to paste it on the website

Copy the code to paste it on the website Step 6:

Go to the WordPress site where you want to add the interactive map. Then, on the block editor interface, you just need to select the — Select the block “Shortcode”

Select the block “Shortcode” — Paste the previously copied embed code

Paste the previously copied embed code

Once done, your interactive map will be displayed like the image below: — Map display results

Map display results

Method 2: Use the free tool Snazzy Maps

Embedding Google My Maps on your website is easy and convenient. However, adding an interactive map in this way has some drawbacks, including limited functionality and a rather monotonous map design.

Therefore, to increase customization, you can think about using other interactive map creation tools. In the framework of this article, Hawk will show you how to create a map with Snazzy Maps – a fairly simple and completely free tool.

Here are detailed instructions:

How to generate Google Maps API Key

To create an interactive map with Snazzy Maps, you first need to generate a Google Maps API Key. If you already have an API before, you can skip this section and go to the next section.

Steps to generate Google Maps API Key: Step 1:

Access the Google Cloud Platform page with your Google account. Step 2:

On the left menu bar, select “API & Services” -> “Library”.” width=”1170″ height=”729″ srcset=”https://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_10.png 1170w, https://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_10-300×187.png 300w, https://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_10-1024×638.png 1024w, https://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_10-768×479.png 768w, https://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_10-750×467.png 750w, https://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_10-1140×710.png 1140w” data-lazy-sizes=”(max-width: 1170px) 100vw, 1170px” src=”http://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_10.png”><noscript><img class= — Select “APIs & Services” -> “Library”

Select “APIs & Services” -> “Library” Step 4:

The system will switch to the API library page. Here, you find “Maps JavaScript API”, then click “Enable” to activate. — Select Maps JavaScript API

Select Maps JavaScript API — Click “Enable” to enable Maps JavaScript API

Click “Enable” to enable Maps JavaScript API Step 5:

After activation, the system will automatically switch to the “Google Maps Platform” page. At this point, select “Credentials” -> “Create Credentials” -> “API Key” to create a new API Key.” width=”1355″ height=”627″ srcset=”https://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_13.jpg 1355w, https://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_13-300×139.jpg 300w, https://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_13-1024×474.jpg 1024w, https://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_13-768×355.jpg 768w, https://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_13-750×347.jpg 750w, https://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_13-1140×528.jpg 1140w” data-lazy-sizes=”(max-width: 1355px) 100vw, 1355px” src=”http://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_13.jpg”><noscript><img loading= — Generate new API Key code

Generate new API Key code

Google will automatically generate an API Key. At this point, you just need to copy the provided API code to use. — Google’s API Key

Google’s API Key

How to create interactive maps with Snazzy Maps Step 1:

Go to snazzymaps.com homepage -> Register to create an account.” width=”1615″ height=”878″ srcset=”https://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_15.png 1615w, https://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_15-300×163.png 300w, https://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_15-1024×557.png 1024w, https://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_15-768×418.png 768w, https://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_15-1536×835.png 1536w, https://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_15-750×408.png 750w, https://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_15-1140×620.png 1140w” data-lazy-sizes=”(max-width: 1615px) 100vw, 1615px” src=”http://dieuhau.com/wp-content/uploads/2021/09/Ban-do-tuong-tac_15.png”><noscript><img loading= — Sign up for an account Snazzy map

Sign up for an account Snazzy map Step 2:

Login and select “Build a map” to start creating the map. — Select “Build a map” to create an interactive map

Select “Build a map” to create an interactive map

In addition, you can select the “Create a Style” item on the menu bar of the Snazzy Maps homepage to create your own map template to your liking. Check out the video below for more detailed instructions:

https://www.youtube.com/watch?v=8yXB3udpQ-CODE

Step 3:
The system will display the map editing page. Here, you can optionally edit all the information you want such as:
How the map looks (Snazzy Maps currently has hundreds of map templates in its library. You can choose from the templates provided or design your own.)
Map size and address location to mark.
The image, color, and size of the icon mark the location.
Display language of the map, map type.

Gestures, interactions allow implementation on the map. — Snazzy Maps allows easy map editing with high customizability

Snazzy Maps allows easy map editing with high customizability Snazzy Maps allows easy map editing with high customizability

Step 4: — Paste the generated API Key on Google

Paste the generated API Key on Google Paste the generated API Key on Google

Step 5: — Copy the embed code to paste it on your website

Copy the embed code to paste it on your website Copy the embed code to paste it on your website

Step 6:

Finally, paste the embed code on the website you want to add the interactive map to.

Bonus: Popular free interactive map making tools
In addition to Snazzy Maps, there are many other free tools that can help create interactive maps quickly and efficiently. Here is a list for your reference:
Map Chart
Scribble Maps

ZeeMaps

Visme Hopefully with the above article, you have a better understanding of interactive maps and know how to add maps to your WordPress website quickly. Good luck!