Hosting Tutorial & Guide

How to Add Google and Bing Maps to a Website?

updated on Mar 25, 2015
How to Add Google and Bing Maps to a Website? Although there are various mapping services over there to get you from one location to another, Google and Bing Maps are by all means the definitive leaders. In the further, embedding a Google or Bing map onto your wedding website or personal blog will help your guests find the right directions to the specific event location.

Given that lots of developers are struggling to add Google or Bing map in WordPress, we would like to illustrate how to accomplish this "huge" project both through automatic and manual methods. Note that, we are going to start with Google Map as is showed in below.

How to Add Google Map in WordPress?

Objectively speaking, there are a couple of ways that you can use to add a Google map. Perhaps the easiest way is to set up such a map on your WordPress site through the embed code provided by Google Maps. The second recommendable way is a little bit time-intensive but more dynamic. Now, let' have a brief look at both methods in the following parts.

Add a Google Map Manually
If you only want to add a simple street view image, a local search or a basic map that displays directions from one place to another, you can simply make use of the new Google Maps. As for details, you can pay a visit to Google Maps official website and then type in the address of location that you want to display on your webpage. Make sure that the street view image or map that you would like to add does appear on this map display as below.

Add Google Map to Website - Type in Your Location

And then, make a hit on the gear icon that lies in the bottom right and you will be presented with multiple setting options, like "History" and "Share Settings." Here, click on the "Share or embed map" option, and there will a popup window where you can get the embed code within the "Embed map" tab. Make a selection of your preferred embed size and copy this iframe code into any post, page or template as you like.

Add Google Map to Website - Copy Your Embed Code

Now that you've embedded a Google map, any visitors who sign in your map will take a look at their saved places. Pay attention that, the dynamic traffic information and many other Maps features wouldn't be available in this embedded map.

Add Google Map via a Plugin
In some cases you need to have multiple Google maps and keep adding them to your posts/pages at a frequent rate, it is recommendable to use a WordPress plugin. In the following, we will take the example of this "MapPress Easy Google Maps" plugin, which is included with an interactive and great-looking map. Note that, this plugin is built on the newest Google Maps API v3 and is completely multisite compatible.

Add Google Map to Website - MapPress Easy Google Maps

To start with, you shall "Install" and "Activate" this MapPress Easy Google Maps plugin from the WordPress dashboard. Upon activation, a new "MapPress" tab will be added to the left dashboard menu as follows. From this editor page, you are able to configure your map to suit personal needs. Inside the "Basic Settings" section, it is possible to choose the post types and specify the location and directions that your Google map will display later on.

Add Google Map to Website - MapPress Basic Settings

In the meantime, you have the ability to manage "Map Controls", "Map Settings" and "POI Settings" as well. The rest options of this settings page enable you to further customize a map from "Localization" and "Miscellaneous" aspects. To be frank, each option is quite self-explanatory, and you can click the "Save Changes" button to take effect.

Add Google Map to Website - Other Options in MapPress

To insert this newly-created map to a post, you shall navigate to "Posts" > "Add New." As you may notice, there will be a new "MapPress" section lying right under your post content section. From there, you can create a map title, define its size and add a place of your requirement. Of course, you can also click the "My Location" option to allow this WP plugin to detect your current location. Remember to click "Save" and "Insert into post" buttons to add this embedded map.

Add Google Map to Website - Insert Map into Post

How to Add Google Map in WordPress?

In the same way, there are two different ways to put a Bing map onto your WordPress webpage. Considering for different needs and preferences, we will cover both of the manual and automatic methods in below. Now, further down and get more useful details.

Add Bing Map from
In most cases, Bing maps are available for free share, use and embed. To start using a Bing map, you shall firstly go to this Bing Maps page where you will see an interface that is similar to that of old Google maps. Here, all you need to do is search or select a location you want to display inside this search bar. Once you've spotted the very location, you will have to click the "Share" option at the top right corner of this page.

Add Google Map to Website - Click the Share Button

When a window popups, you will be presented with a link to this map and the embed code that can be added to your WordPress webpage. Before copying this iframe code, you'd better check the accurate map results by clicking the below "Customize and Preview" button.

Add Google Map to Website - Customize and Preview

Once clicked, you will open a separate and new window where there are several customizing options. Generally speaking, you can specify the "Map Size", hide/show links to this Bing map, decide "Map Options" and "Styles", etc. If you are quite content with the "Preview", you only need to click "Generate code" button to get another embed code. Just copy and paste that configuration code to your posts, pages or sidebar widgets.

Add Google Map to Website - Customize Options in Preview

How about Using a WordPress Plugin to Add Bing Map?
If maps play a vital role on your website's content and you have the need to embed various maps on a regular basis, you may need to use a WordPress plugin to initialize Bing maps. In the market, there are a wide range of map plugins that will automatically embed nice-looking Bing maps to your WordPress site. Here are some recommendable solutions based on industry popularity and ease-of-use:

Leaflet Maps Marker
As a user-friendly and comprehensive mapping solution, Leaflet Maps Marker makes it much easier to organize, share and pin your beloved tracks & places from your WordPress powered website. More importantly, you are able to make use of various maps from Google Maps, Bing Maps, Google Earth and OpenStreetMap with around 800 custom free map icons included.

Website URL:

Add Google Map to Website - Leaflet Maps Marker

WP Quadratum
The WP Quadratum plugin will empower you to add and display the latest Swarm checkin on your WordPress website via a short line of code. Apart from that, this highly-customizable plugin is partnered with many map providers like Bing Maps v7 and Google Maps v3, and it requires additional Map API Key(s).

Website URL:

Add Google Map to Website - WP Quadratum

Easy 2Map
This simple-yet-powerful Easy 2Map plugin is built with a drag-and-drop interface, with which you can simply create Bing and Google maps for your posts/pages. More than that, it is also possible to configure your map's zoom, size and location without requiring special programming knowledge.

Website URL:

Add Google Map to Website - Easy 2Map