WordPress Map Addons - GreenGeeks https://www.greengeeks.com/tutorials/category/wordpress-map-addons/ How-to Website Tutorials Wed, 20 Oct 2021 11:13:57 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.3 How to Use WP Google Maps in WordPress and Show Locations https://www.greengeeks.com/tutorials/wp-google-maps-wordpress/ https://www.greengeeks.com/tutorials/wp-google-maps-wordpress/#comments Wed, 08 Jul 2020 19:39:10 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=35730 Adding maps to a website has become a very popular practice these days. Maps provide directions and location information for all sorts of things. There […]

The post How to Use WP Google Maps in WordPress and Show Locations appeared first on GreenGeeks.

]]>
Adding maps to a website has become a very popular practice these days. Maps provide directions and location information for all sorts of things. There are several ways you can add a Google map to your website. If you want to add maps and show locations, then using a plugin like WP Google Maps is a fantastic option.

There are actually several really good plugins that allow you to work with Google Maps in several different ways. There is an extra step you have to take now in order to use Google Maps to its fullest potential.

Nowadays, Google makes you get an API and tracks more map usage. It is not difficult, but it is an extra step you need to take. That being said, the particular WordPress Google Map plugin that we are using today also allows you to use something called “Open Layers.”

This is basically an option that gives you much more limited functionality, but allows you to use Google Maps with having to get an API.

Since there are so many people wondering how to add Google Maps to WordPress, we decided to write an article about it. Let’s take a look at the WP Google Maps plugin and then go over how to get it up and running on your WordPress website.

WP Google Maps

WP Google Maps plugin

WP Google Maps is a very easy-to-use WordPress map plugin that allows you to easily add customized Google Maps to any post or page using a shortcode. You will not have to deal with any iFrames at all.

The plugin allows you to build just about any type of map you need. It is perfect for contact maps, routes, directions, and maps showing delivery areas. Of course, you can make any sort of map you want, including one that shows specific locations.

The plugin comes with a wide assortment of features and a ton of functionality. Some of these include:

  • Easy to Use, No Coding Required
  • Unlimited Map Markers
  • Responsive Maps
  • Click Button Marker Edits
  • 9 Map Themes
  • Create Your Own Map Theme
  • Drag and Drop Markers to Exact Locations
  • Map Block Ability
  • Google Street View Supported
  • Map Widgets
  • Full-Screen Functionality
  • Compatible with Caching Plugins
  • Cloudfare Compatible
  • Latest Google Maps API
  • Latest OpenLayers API

And that is just the tip of the iceberg. The WordPress Google Map plugin basically gives you everything you need to incorporate a fully functional map system with locations on your website.

Let’s take a look at how to get the plugin installed and then go over setting it up.

Note: The WP Google Maps plugin also has a pro version. This will extend functionality even further. However, the tutorial below is based on the free version of the plugin. It gives you all the tools you need to build smooth, clean, website ready maps.

Install and Activate Plugin

Before you can start adding WordPress Google Maps and locations, you first need to install and activate the plugin. You can do this by going to the Plugins page inside your WordPress admin dashboard.

Simply go and search for the plug by name and install it right from there.

Install and activate wp google maps

Once the plugin has been installed and activated, you will automatically be taken to a “welcome” page for the plugin.

Welcome page for wordpress maps plugin

From here, you can click on the “Skip Intro and Create a Map” button to create a map. However, before you do that, we need to adjust the settings together.

Click on Maps > Settings to get to the main configuration and settings options for the plugin. You will find this in the left menu area of your dashboard once the plugin has been activated.

Click maps then settings

Let’s go over these settings together.

WP Google Maps Settings

At this point, you are sitting on the settings page for the WP Google Maps plugin. At the very top, you will see the following notification informing you that you need to go get a Google API first in order to make the maps work to their fullest potential.

Google maps api notification

You are presented with several links to go get your API. There are detailed instructions on how to do it. Simply follow the links and complete the process. Once you have your Google Maps API you can come back and plug it into the required field and save it.

Note: If you do not want to plug in a Google Maps API, then you are more than welcome to try using the OpenLayers Map Engine that the plugin supports. If this is enough functionality for you, then try it out.

Now that your API is in place, you can scroll down some and you will see six tabs on the settings page. These include:

Let’s take a look at these together.

Maps

This is where you will select all your map settings, including the Map Engine you want to use (Google Maps or Open Layers).

Map settings tab

InfoWindows

These are the settings that will display for the info windows of your open markers on the maps you build.

InfoWindows tab

Marker Listing

These are all the marker listing layout and display options. Fill these in how you want them to display on your site.

Marker listing tab for WP google maps

Store Locator

Insert the store locator numbers you see fit in this area.

Store locator tab

Advanced

Here you will find some more advanced settings for the plugin. Fill these in how you want. You also have the ability to add custom scripts from this tab.

Advanced tab

GDPR Compliance

The WP Google Maps plugin includes a tab for you to make sure that your site is GDPR compliant in this aspect. If you want to require consent from a user before showing the map, you’ll need to check this box.

Wp google maps gdpr compliance tab

That’s it. Make sure you save all your settings and you are good to go. Now you are ready to add your first map and get the shortcode to display it.

Add a WordPress Google Map

To access your maps, click on “Maps” in the left menu area of your dashboard. This will take you to all your maps. There will be one map displayed ready for you to name and edit how you want.

Note: Remember, with the free version you can create as many markers and locations on a map that you want. However, to create unlimited maps, you will need the pro version of the plugin.

Click edit button

Go ahead and click the “Edit” button to open it up.

When the map opens up, you will see three main areas all with multiple tabs. The top part was the map settings we just went over together. However, you can also create a map right from here and fix all the settings how you want.

Create map section

Once you create the map, click on the “Save Map” button and scroll down some.

Here you see the “Markers” section. This section allows you to build your map markers and see how they will display. Use this section to build the markers how you want.

Markers section

You can build different markers to use and apply them to certain locations that you build next. Go ahead and add as many as you want.

Finally, scroll down a little more and you come to address and location portion of the markers section. This is where you will build and create all your locations and apply markers to them. These locations will display on the map that you have built.

Addresses and locations

At the bottom of the page, you will see some more options when it comes to extending the plugin by purchasing the pro version. You are more than welcome to check this out and make the purchase if you think it benefits what you are doing.

Pro esrion options for wp google maps

That’s it! At this point, you have built the map, markers, and locations. Simply save it, then take the shortcode provided and put it on any post or page you want.

Final Thoughts

Adding maps to your WordPress site does not have to be difficult. Yes, over the years Google has changed how they allow you to use maps, but with a couple extra steps and an API, you can still access the functionality that Google Maps provides.

The key is finding a solid WordPress map plugin that will allow you to easily build and display maps for your website. WP Google Maps provides you with a ton of options and functionality.

I hope this tutorial has shown you how easy it is to build a display Google Maps on your website.

Have you tried using Google Maps without a plugin and just embedding them? Have you found that this way allows for more functionality?

The post How to Use WP Google Maps in WordPress and Show Locations appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/wp-google-maps-wordpress/feed/ 2
How to Add Bing Maps to WordPress https://www.greengeeks.com/tutorials/how-to-add-bing-maps-to-wordpress/ https://www.greengeeks.com/tutorials/how-to-add-bing-maps-to-wordpress/#respond Tue, 30 Jul 2019 16:37:16 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=28003 Are you looking for a way to add Bing Maps to WordPress? While the majority of people use Google Maps, due to it being preinstalled on […]

The post How to Add Bing Maps to WordPress appeared first on GreenGeeks.

]]>
Are you looking for a way to add Bing Maps to WordPress? While the majority of people use Google Maps, due to it being preinstalled on most smartphones, there is absolutely nothing wrong with Bing Maps.

In fact, they are almost identical from a user perspective and completely free to use.

Today, I will demonstrate how to add Bing Maps to WordPress using two methods.

Why Add Maps in WordPress

Almost every business regardless of the type or size has a website. On that website, it is extremely common to find the business hours, telephone number, and an address.

These are all critical pieces of information.

However, when you take a minute to consider the majority of your visitors will be using a smartphone, it makes sense to go a step further and add a map.

There is no better alternative when it comes to navigational help.

Method 1: No Plugin

You can embed most things without additional plugins in WordPress, and Bing Maps are no exception.

This method is ideal for websites that want to display a single location. While it can certainly be used to add multiple maps, it is less work to use a plugin in that case.

First, visit the Bing Maps website.

Enter the location you want to display on your website in the search box.

Bing Maps

Under the More option, click on Embed a map.

Embed a map

A new tab will open on your web browser. Here you can select the various settings of your map including the size, type (static or draggable), style (road or aerial view), and link options.

Once you have customized the map settings to your liking, click on the “Generate Code” button.

Generate Code

A popup will appear with an HTML snippet. Copy the code snippet.

Copy HTML Snippet

Open any existing page or post in WordPress. Alternatively, you can create a new one for testing purposes.

Click on the “Add Block” button and locate the Custom HTML block. Add it to your post or page.

Add Block

Paste the HTML code snippet you copied in the previous step.

Paste HTML

Simply click on the Preview option to see your new Bing Map.

Preview Button

Congratulations, you have successfully added a Bing map to your WordPress website.

Method 2: Plugin

While I personally recommend using the first method, you may find yourself adding multiple maps to your website regularly.

If this is the case, you can save a lot of time by using the Ultimate Maps plugin.

Obtaining the API Key

This is a free plugin that will require a Bing API key to set up. Once obtaining the API, you will be able to create Bing Maps on your WordPress website.

Visit the Bing Maps Dev Center page and sign in with your Microsoft account.

Bing Map Dev Center

Once logged in, click on “My account” and select the My Keys option.

My Keys

You will need to fill out the information fields for your website. Click on the “Create” button when you are done.

Create Button

Click on the “Show Key” option to display your API key. Copy this key as you will need it for the WordPress plugin.

Show Key

Return to your website and install the Ultimate Maps plugin.

Once installed, click on Ultimate Maps by Supsystic on the left-hand admin panel and select the Settings option.

Settings

Change the Map Engine to Bing Microsoft and insert the Bing API Key into the appropriate text box. Click on the “Save” button when done.

Enter API Key

You are now ready to create Bing Maps in WordPress.

Creating Maps

Click on the Add Map option.

Add Map

The plugin offers a wide array of customization options. Go down the settings and pick the best choices for you or the business. They can be changed at any time, so feel free to experiment.

Click on the Marker tab. This is where you can add multiple addresses on the same map. This is ideal for small business owners with multiple locations.

All the changes made are visible within the preview window.

Once you are satisfied with your map, click on the “Save Map” button.

Save Map

The plugin will now generate a shortcode at the top of the page. Copy the shortcode.

Shortcode

Go to any page or post on your website or create a new one.

Click on the “Add Block” button and add a Shortcode block to your post or page.

Shortcode Block

Insert the shortcode into the Shortcode block.

Insert the Shortcode

Save the changes. Your map will now be viewable on the post or page.

Be Easy to Find

Customers always search for the quickest and easiest options, and this includes directions to a specific location. Being able to view an interactive map on your smartphone has completely changed navigation forever.

This is now the go-to method for finding a location, thus, it is important to have on a website.

Why did you need to add a map on your website? Do you prefer Bing Maps over Google Maps?

The post How to Add Bing Maps to WordPress appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/how-to-add-bing-maps-to-wordpress/feed/ 0
How to Add Bing Maps to WordPress https://www.greengeeks.com/tutorials/add-bing-maps-wordpress/ https://www.greengeeks.com/tutorials/add-bing-maps-wordpress/#respond Mon, 21 May 2018 14:00:19 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=18707 Do you want to add Bing Maps to your WordPress website? Much like Google Maps, Bing Maps is a popular navigation tool to use in […]

The post How to Add Bing Maps to WordPress appeared first on GreenGeeks.

]]>
Do you want to add Bing Maps to your WordPress website? Much like Google Maps, Bing Maps is a popular navigation tool to use in WordPress. Maps are great to put on any website that has a physical location for customers to visit.

Unlike Google Maps, Bing Maps does not have the advantage of being pre-installed on most smartphones. This might sound like a really bad point since it’s likely that more than half of your visitors will come from smartphones, but don’t worry. Bing Maps will work just fine as long as it is embedded correctly on your website. Today, I will demonstrate how to add Bing Maps in WordPress using two methods.

Why Are Navigation Tools Important?

Navigation tools like Google Maps and Bing Maps have revolutionized how people travel in today’s world. The best part about these tools is that they are completely free and are equal to if not better than paid navigation tools. The popularity of smartphones has made them the most popular platform to use navigation tools on. If you combine this with the fact that half of your views will come from smartphone users, it’s no surprise why you would want to add these.

These kinds of navigation tools are especially useful for stores with physical locations. This may mean multiple store locations or restaurants. This is extremely important for restaurants in particular because it allows visitors to know if they are in range for delivery without having to make a phone call. Location is one of the most important aspects of any business and being able to show it on a website makes it easier for everyone.

How to Add Bing Maps in WordPress

Today, I will demonstrate how to add Bing Maps in WordPress using two methods. The first method is to directly embed Bing Maps on your website. This is by far the easiest method and for most websites, especially if they only have one physical location. If you have multiple locations or simply run a website where you may need multiple maps on your website, the first method may be tedious. The second method is using the Leaflet Maps Marker plugin. This plugin works for both Bing Maps and Google Maps.

Embedding Method

Embedding Bing Maps in WordPress is always a great option and is very similar to embedding videos in WordPress. It is extremely quick and easy. Go to Bing Maps and type in the location you want to display. Click on the “Share” button.

Click on the "Share" button.

A small box will appear with the URL. Click on the “Embed” button. A new tab will open up. Select the size of the map you want and click on the “Generate Code” button. A pop-up window will appear with a block of code. Copy the code.

Copy the code.

You can paste this code into the text editor on any Post or Page on your website. You could even add it to your sidebar. Make sure you save your changes to embed Bing Maps on your website.

View your map.

This is the best method for adding Bing Maps, but if you have multiple locations or need multiple maps it can be a bit tedious. For this reason, the plugin method might be a better choice for your website.

Plugin Method

Before you begin, keep in mind you will need the Bing API Key to display a Bing Map. It is very simple to get one. Simply visit the Bings Maps Portal and sign up or log in. Once you have your account set up and linked to your website, an API Key will be generated for you. Copy it for later use.

Let’s begin by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Add New

 

Search for Leaflet Maps Marker in the available search box. This will pull up additional plugins that you may find helpful.

Search for Leaflet Maps Marker in the available search box.

Scroll down until you find the Leaflet Maps Marker plugin and click the “Install Now” button and activate the plugin for use.

click the "Install Now" button

On the left-hand admin panel click on Maps Marker and select the Settings option. This will pull up the main settings page.

click on Maps Marker and select the Settings option.

Click on the Basemaps tab. Select Bing Maps as the default map. You will notice it says API Key required. To input your Bing API Key, click on the Bing Maps option. Paste your Bing API Key into the text box at the top. Make sure to save your changes.

click on the Bing Maps option.

Now that the API Key is in place you are ready to start displaying Bing Maps on your website. On the left-hand admin panel, click on the Add new marker option.

click on the Add new marker option.

Enter the name or the marker you wish to create. For example, Store in City, but make sure you will know what it is if you have multiple markers. Enter the location that you want to display and pick the map size. Once this is done this, click on the “Publish” button. The plugin will now generate a shortcode that you can add to your website. Add the shortcode to any post, page, or sidebar to display the Bing map.

click on the "Publish" button.

Congratulations, you have learned two different ways to add Bing Maps to your WordPress website. Both methods are very easy, but I would recommend the embedding method because it is one less plugin to maintain.

Help Customers Find Your Stores

One of the first things most store owners will consider is location. Being in a popular shopping center or mall will surely have better odds of attracting customers than a store on a backstreet. Of course, with the Internet, finding a store has become much easier than driving around and hoping you find a pizza place. Adding a navigation tool like Bing Maps or Google Maps to your website is the perfect way to help visitors know where you are located.

It was very common for stores to give directions over the phone, but in today’s world, they will usually just provide an address for you. This is because you can just put the address on a navigation tool and use your smartphone to find the store. For these reasons, navigation tools are a great addition to any website that has a physical location associated with it.

Which method have you used to add Bing Maps? Why are you adding a map to your website?

The post How to Add Bing Maps to WordPress appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/add-bing-maps-wordpress/feed/ 0
How to Embed Google Maps in WordPress https://www.greengeeks.com/tutorials/embed-google-maps-wordpress/ https://www.greengeeks.com/tutorials/embed-google-maps-wordpress/#comments Wed, 09 May 2018 14:00:57 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=18563 Do you want to embed Google Maps on your WordPress website? Google Maps is one of the most popular navigation apps available and it’s completely […]

The post How to Embed Google Maps in WordPress appeared first on GreenGeeks.

]]>
Do you want to embed Google Maps on your WordPress website? Google Maps is one of the most popular navigation apps available and it’s completely free. In fact, it is preloaded on most smartphones, whose users make up half of all website visitors. One of the most common reasons visitors look up store and restaurant websites are to get directions.

Having Google Maps on your website will make it extremely convenient for visitors to find your store. Thankfully, adding Google Maps is very easy and there are many different ways to do it. This is a great addition to any website that has a physical location associated with it. Today, I will demonstrate how to embed Google Maps in WordPress using two different methods.

Why Embed Google Maps in WordPress

Google Maps is a great navigation tool that is easily accessible on computers and smartphones alike. Smartphones users make up over half of all Internet visitors and is already a critical component of all website traffic growth. Since most smartphones already have Google Maps pre-loaded, it is a great addition for all of your mobile users.

I know when I search for directions, I always use my smartphone because I can keep looking at the directions while traveling to the location. This approach to directions is very common because dedicated GPS devices are not nearly as popular as smartphones. In many cases, the smartphone will track your position more accurately because of the nearby cell towers.

How to Embed Google Maps in WordPress

Today, I will demonstrate how to embed Google Maps in WordPress using two different methods. The first method involves taking code from Google Maps and pasting it onto your website. This is the easiest method and will not require any additional plugins. If you are not a fan of coding, then the second method is for you. It involves using the MapPress Easy Google Maps plugin. Each method will help you embed Google Maps in your website.

Google Maps Embedding Link Method

Go to Google Maps and type in the address you would post directions for. If you have multiple stores, you will want to do this for each store location. Once you have the location you want, click on the “Menu” button, which is represented by three lines.

click on the "Menu" button, which is represented by 3 lines.

Click on the “Share or embed map” option. A pop-up window will appear with two tabs. The Share link will provide a URL to the map direction. The Embed Map tab is what you want because it will provide the embedding link. You may choose between small, medium, and large map sizes. Copy the embedding link once you have picked the size.

Copy the embedding link once you have picked the size.

Go to the page or post you would like the map to appear on. I would recommend adding it to your homepage. Another good tip is to keep the directions close to the business hours. This will help visitors know if you are open or not before driving there. Paste the embedding link into the text tab of the editor. If you place the code in the visual tab, nothing but the code will be visible.

Paste the embedding link into the text tab of the editor.

Check on the visual tab to make sure the map is correct. Once you are done, click on the Save or Update button to add the Google Maps.

Click on the Save or Update button to add the Google Maps.

Congratulations, you have successfully embedded Google Maps on your WordPress website. This is the easiest method and my personal recommendation. Every plugin you add to your website will slow it down, but sometimes code alternatives are not beginner friendly. This one is and I would recommend using it.

Plugin Method

Begin by clicking on Plugins and selecting the Add New option on the left-hand admin panel.

Add New

Search for MapPress Easy Google Maps in the available search box. This will pull up additional plugins that you may find helpful.

Search for MapPress Easy Google Maps in the available search box.

Scroll down until you find the MapPress Easy Google Maps plugin and click the “Install Now” button and activate the plugin for use.

click the "Install Now" button

On the left-hand admin panel click on MapPress. This will pull up the main settings page. You should notice an error message when you open this page. The message is telling you that you do not have the Google API key. If you already have a Google API key insert it. If not, visit the Developers page from Google and get one.

Click on MapPress.

Insert your Google API key into the appropriate box and click on the “Save Changes” button. You may also change your map size on this page at any time.

click on the "Save Changes" button.

This plugin is great for adding multiple maps to pages or posts throughout your website. Go to the page or post that you want to add a Google map too. Scroll down under the editor and find the MapPress section. Click on the “New Map” button.

Click on the "New Map" button.

Give your map a title and select the location you want to display. Click on the “Save” button to save the map. Hover your mouse under the title of the map and click on the Insert into post option. A shortcode will appear in the editor. Move it wherever you want the map to appear. Make sure to save your work.

Click on the Insert into post option.

Congratulations, you have successfully added Google Maps to your website. This method is more work than the last, but it is a better way to add multiple maps once you have it set up.

Make Your Website Convenient For All Platforms

The days of just worrying about desktop visitors are gone. Over half of all of your visitors will be viewing your website on a smartphone. Adding features like Google Maps will benefit both platforms and help visitors locate your stores. There are no drawbacks to adding this feature, so if you have a physical location, then map it.

If you have a website for a restaurant, then this is an essential addition. This helps visitors determine if they are in delivery range or where to go to pick up food. Trust me when I say it, this is a big deal.

How many Google Maps have you added to your posts or pages? Where on your website have you added your Google Maps?

The post How to Embed Google Maps in WordPress appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/embed-google-maps-wordpress/feed/ 2