Tag - Maps

How to Embed Bing Maps in WordPress (Step by Step)


Do you want to embed Bing Maps on your WordPress website? If you are looking for a Google Maps alternative, then Bing Maps is the right candidate for you.

Similar to Google Maps, you can use Bing Maps to show directions, traffic, routes, and navigation instructions on your WordPress site. Since it is owned by Microsoft, it is a great map application with a ton of useful data.

In this article, we will show you how to easily embed Bing Maps in WordPress, step by step.

How to embed Bing Maps in WordPress

Adding Bing Maps in WordPress (No Plugin Required)

First thing you need to do is go to Bing Maps website and search for the location or map you want to embed.

Once you have found the location, click on the ‘More’ option with three-dots icon, and select ‘Embed a map’ option.

Embed a Map option in Bing Maps

After that, it will open a new tab where you can customize the map to embed in your website.

Customize Bing Map to Embed in WordPress site

You can choose map size, map type (static or draggable map), map style (road or aerial), and map links. Review the customization options and then click on the Generate Code.

After that, it will provide you a code snippet. Go ahead and copy the code because you’ll need it in the next step.

generated Embed Code for Bing Maps

Now, switch back to your WordPress site and create a new page or edit an existing one where you want to add the map.

On the page edit screen, click on the Add New Block icon and select the Custom HTML block.

Add Custom HTML block in WordPress Page Editor

After that, paste the Bing Map embed code that you copied earlier in the HTML field.

Bing Map Embed Code Added in WordPress Editor

You can now save or publish your page and click on the preview button to see the map embedded in your page. Here is how the Bing Map appeared on our demo website.

Bing Map Embedded in WordPress Manually -preview

Adding Bing Maps Using a Plugin

If you need to embed only one map on your website, then the manual method shown above is the best option.

However if you run a website where you often need to add maps, then using a plugin to add Bing Maps would be easier.

First thing you need to do is install and activate the Ultimate Maps by Supsystic plugin. For detailed instructions, you can see our step by step guide on how to install a WordPress plugin.

It is a free WordPress map plugin that lets you embed Bing maps, Leaflet maps, and other Google Maps alternatives in your WordPress blog.

To use this plugin with Bing maps, you will need to have a Bing Map API Key.

Simply create an account on Bing Maps Dev Center website. If you already have a Microsoft account, then you can simply sign in with your account credentials.

Sign in to Bing Dev Center

Once you have signed into your account, you need to click on the ‘My Account’ menu and select ‘My Keys’ option.

Bing Maps Dev Center My keys Option

On the next screen, you need to fill out your website information to create a key.

Create Bing Map API key to Embed in WordPress

After that, you can see a message ‘Key created successfully’ and the key details in a box.

Bing Maps API Key Created

You can simply click on the ‘Copy key’ link or ‘Show key’ link and copy the Bing Maps API key.

After that, you need to paste the key in your plugin settings.

Visit Ultimate Maps by Supsystic » Settings from your dashboard and select ‘Bing Microsoft’ as your maps engine. After that, paste the API key you copied earlier in the Bing Maps API key field.

Paste your Bing Maps API key in Ultimate Maps by Supsystic plugin settings

Don’t forget to save your plugin settings.

After that, you need to add marker categories by visiting Ultimate Maps by Supsystic » Marker Categories » Add Category.

Add Marker Categories for Bing Maps

Create as many marker categories as you need.

Next, click on the Add Map menu to create a new map. Enter a name for your map, define the width and height of the map, choose navigation bar mode, etc.

Add Bing map using a plugin

You can also configure options to make the map draggable, use double click to zoom, and more. Most important of all, enter the location to display in the map center.

Next, scroll down and configure more options below. Once done, click on the ‘Save Map’ button below the map preview box.

After that, you can add markers to show the main location points in your map. Click on the Markers tab, and then add a name for your maker.

Add new Marker for Bing Map in WordPress

You can use the name of the place or organization as a marker name.

For example, we used ‘University of Florida’ as a marker name because we want to show some of the best colleges in Florida in our demo map.

After that, you can add marker description text as well as image.

Scroll down and choose an icon for your new marker. Next, you need to enter the address to point the marker. And, also select the marker category.

Save Marker for Bing Maps

Review all the other options, and then click the ‘Save Marker’ button.

You can add more markers by following the same steps.

As you add the markers, you can preview them live on the preview box. Once you are happy with your map, navigate to the ‘Map shortcode’ option at the top, and copy the shortcode.

Copy Bing Map Shortcode to embed in WordPress

After that, create a new page or edit an existing one to embed your new Bing map.

Once in the page editor, click on the Add New Block icon and choose the Shortcode block under Widgets section.

Add Shortcode Block in WordPress

Now you need to paste the Bing map shortcode that you copied before.

Paste BIng Map Embed Shortcode in WordPress Page Editor

Once done, save or publish your page, and preview how the Bing map looks on your website.

Here is how the embedded Bing map appeared on our demo website.

Bing Map Embedded in WordPress using a Plugin

We hope this article helped you to learn how to embed Bing Maps in WordPress easily. You may also want to see our guide on how to embed actual tweets in WordPress blog posts.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link

How to Add Google Maps Store Locator in WordPress


Do you want to add Google Maps store locator in WordPress? A store locator is a map pointing to your business location.

It allows users to locate you on the map, find driving directions, or share the location with friends. Adding a store locator to your business website or even an online store helps you instantly earn user trust.

In this article, we will show you how to easily add Google Maps store locator in WordPress.

How to add a Google Maps store locator in WordPress

Google Maps introduced a paid API to display maps on websites. They still offer a limited free option to embed Google maps on small websites.

Most Google Maps plugins for WordPress use the Google API to retrieve and display maps. If you want to use a Google Maps plugin, then you will need to sign up with Google API platform and enable billing option.

It is a pay as you go service, which means you will be charged based on the number of API calls made from your website.

We will show you both free and paid methods with their pros and cons, then you can choose the one that best suits your needs.

Method 1. Adding Google Maps to Your Website for Free

This method is easier and free. The disadvantage is that you cannot show multiple stores on a single map.

It is recommended for users who just want to add a single Google Maps store location on their website.

First, you need to visit the Google Maps website on your computer. Next, enter your store’s address in the search field and Google Maps will show it on the map with a pinned marker on the map.

Sharing a map in Google Maps

Make sure that the marker is placed on the correct location. You can select a zoom level by clicking the zoom button. Once you are satisfied with the zoom level, you need to click on the share button from the left column.

This will bring up a popup where you need to switch to the ‘Embed a Map’ tab. You will now see your searched location on the map with an HTML code.

Copy the Google Maps embed code

Click on the Copy HTML link to get the embed code.

Now head over to the admin area of your WordPress website. Once in the admin area, go ahead and edit the post or page where you want to display the store location map.

Normally, users add a store location map on their contact form page with their phone number and opening hours.

On the post edit screen, you need to add a custom HTML block.

Adding a custom HTML block in WordPress

In the text area of custom HTML block, you need to paste the code you copied from Google Maps.

Maps embed code in WordPress

You can now switch to the preview tab to see Google Maps embedded into your page. It will show your store location marked on the map with links to directions or to save the location.

Store location marked on the map

Method 2. Add Google Maps Store Locator Using a WordPress Plugin

This method is recommended for users who want to show multiple store locations on a Google Map.

The first thing you need to do is in install and activate the WP Store Locator plugin. For more details, see our step by step guide on how to install a WordPress plugin.

It is a free Google Maps plugin that allows you to create a custom map with multiple store locations and custom fields.

The disadvantage of this method is that it requires you to add an API key. You will need to provide your billing information to use the API key. For pricing and other information, please check out the Google Maps Platform website.

Ready, let’s get started.

Step 1. Generating Google Maps API keys

To use WP Store Locator plugin, you will need to generate two API keys. The first one is called the Browser API key and the second one is called the Server Key.

Let’s start with the Browser key first. Click on this Google Developer Console link and it will take you to the Google API website with all the required APIs enabled.

Create a new project

You need to create a new project and give it a name that helps you identify the project. After that, you will have to wait a few moments as the console creates the project for you.

Next, you will be redirected to the API key configuration page. You need to provide a title for your API key, so you can easily identify it as the browser api key for your Google Maps project.

Browser api key settings

Next, you need to set ‘Application Restrictions’ to ‘HTTP Referrers’. Below that you need to set the ‘Accept requests from’ field to your domain name in the following format.

https://example.com/*
https://*.example.com/* (if you are using a subdomain)

Finally, click on the ‘Create’ button. The console will now save your settings and will show you the Browser key. You need to copy and paste this key in a text editor, you will need it later.

Copy browser api key

Next, you need to create the server API key. Click on this Google Developer Console link and it will take you directly to the console with selected APIs enabled.

You will once again see the create project page. However since you have already created a project, you can just click on the drop-down menu and select your project.

Select your Google Maps project

You will be then redirected to API configuration page. Provide a name for this API key that helps you recognize it as Server key.

Set IP restrictions

Under the ‘Application restrictions’ section, you need to select IP Addresses. Basically, we are telling Google to only accept server requests coming from specific IP addresses.

Now you would need to ask your WordPress hosting provider to tell you the IP range used by your hosting account. It would be in the following format:

172.16.0.0/12

After that, you need to click on the ‘Create’ button to save your settings and copy the Server API key.

Step 2. Setting up the WP Store Locator Plugin

Once you have created your API keys, you need to head over to Store Locator » Settings page to set up the plugin.

Enter Google Maps Keys

Enter the Google Maps browser and server API keys you generated earlier. Next, select Maps language and region and then click on the save changes button to store your settings.

Now, you need to scroll down on the settings page to the ‘Map’ section and enter a start point of the map. This start point could be a city or a country, so users can see markers placed at different locations.

Add a start point for your store locator map

There are many other options on the settings page including map style, default zoom level, map type, search radius, country, etc. You can review them and adjust them to your needs.

Once you are done, it is time to add locations.

Step 3. Adding store locations

Head over to Store Locator » New Store page to add your first location. The New Store page will look just like the default post or page editor in WordPress.

Store address

Provide a title for your store and then scroll down to ‘Store details’ section. From here, you need to enter your store address.

You will see a map in the right column, however it will not automatically update to the address you have entered. You will need to click on the Publish button to save your location. After that, refresh the page and the map will point to the address you provided.

Now repeat the process to add other store locations. You can add as many store locations as you want.

Step 4. Adding the store locator map in WordPress

To display your store locator on a WordPress page, simply create a new page or edit an existing one where you want to display the map.

On the post edit screen, you need to add the ‘Shortcode’ block to your post edit area. After that add the [wpls] shortcode inside it.

Store locator shortcode

You can now save or publish your page and click on the preview button to see Google Maps store locator in action.

Store locator map preview

It will show your map markers for each store location and start the map from your preferred starting point. For example, in this map, it is focused on the city of West Palm Beach and showing two store locations on the map.

That’s all we hope this article helped you learn how to add Google Maps store locator in WordPress. You may also want to see our list of free Google Tools every site owner should use.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Google Maps Store Locator in WordPress appeared first on WPBeginner.



Source link