Google Maps, as we all know, is a web mapping service developed by Google. This web-based service can provide detailed information about various geographical regions around the world. Apart from the road maps, Google Maps also provides aerial and satellite view of many locations within a few seconds.

Google maps are highly responsive and intuitive. Currently Google maps are integrated into your smartphones or other similar products as well. This provides instant access to Google maps form anywhere. Google Maps API, a free service developed by Google allows developers to embed Google maps into your website by using a simple JavaScript interface. Many websites have got this API embedded into it, making Google Maps one of the heavily used web API.

Why would you Embed Google Maps on to your Website?

The answer is quite simple, to help your visitors pinpoint your location.

May be you are running a travel-related site and want to provide your visitors,the route to specific locations. Or you may be running a site that provides offline services or products. Whatever the reason may be, if you want your visitors to find the location of your store or highlight some other location that visitors might find interesting, embedding Google Maps onto your site is the perfect solution.

Apart from that, displaying your location on your website, along with directions on how to reach your place of business is very helpful to your visitors and clients. Also specifying a physical address, is somewhat assuring to your customers.

In today’s post let us see how you can do this in a few simple and quick steps.

Manually Embedding Google Map with a Single Destination

If you want to add a map with a single location or view, simply copy the Google Maps embed code from the official Google Map site and embed it into your website. Here’s how it all works –

  • Go to the official Google Maps website(maps.google.com)
  • In the address bar, type the address of the location that you want to add to your site.

Google Map Embed

  • Once you have the location you were searching for, click on the Share button in the left sidebar.

Embedding Google Maps Manually

On clicking Share , a small pop-up menu appears. Select Embed Map option.

Select the required size from the drop-down menu and than copy the code from the box

Embedding Google Maps Manually

Now go back to your WordPress page or post, where you want to embed the map.

In the WordPress Editor, click on the Text tab and paste the copied code

Now click on the Publish/Update button and your Google Map will now appear in your WordPress site.

Embedding Google Maps Manually

Embedding Google Maps with Directions

The steps for adding a map with directions are pretty much the same as above. The only difference is with the starting interface.

Visit maps.google.com and click on the Directions button

Embedding Google Maps Manually with directions

Locate the Starting point and the Destination point.

Then click on the 3 stack bars at the top and choose the Share or Embed option

Embedding Google Maps Manually with directions

 

Copy the code from the box and the rest of the steps are the same as in the above.

Google Map Plugins

While it is easier to manually embed Google maps for a single location, it does not give you much control and flexibility. If maps are frequently used in your website and your location varies from time to time, then Google Map plugins are the most obvious choice.

  • Google map plugins enables you to integrated Google maps into your site without going through the unnecessary hassle. Also it allows you to add local images or landmarks, which will help your visitors find you more quickly. It makes your map interactive and customizable. Now, there are lots of plugins available out there to download and use.

In this article we are going to talk about the plugin WP Google Maps

WP Google Maps

This is the most highly used Google Maps plugin with over 300,000 active installations and more than 1000, 5-star ratings.It helps you easily embed Googlemaps onto your WordPress site, with just a supplied shortcode.

It comes with a Free version and a Pro version. While the free version enables you to create a single Google map, the Pro version offers extended features like custom-made multiple Google maps with excellent quality markers containing locations, descriptions, images links and directions.

Features of WP Google Maps

  • Create dynamic heatmaps quickly and easily.
  • Ability to create multiple map markers by simply typing in the address.
  • Add Descriptions, Links and Images to your markers.
  • Add categories to your markers and dynamically filter them in you map.
  • Beautiful collection of InfoWindow themes.
  • Export your markers to a CSV file for quick editing.
  • Ability to add animations to your markers.
  • Fully responsive, making it scalable on small devices.
  • Add polygons and polylines to your map
  • Google Map Street view is supported, as is street locater, localization and map widget functionality.
  • Roadmap, terrain, satellite and hybrid views are supported.
  • Store Locator functionality, which allows to search for stores based on geographic location.
  • Multiple map themes to choose from
  • Compatible with caching plugins and Cloudflare.
  • Link Fusion tables to your maps.
  • WordPress network friendly and many others.

Installing WP Google Map Plugin Basic Version

Installing the plugin is easy and involves a few steps described below.

  • Login to your WordPress Admin Dashboard.
  • Click on the Plugins option in the left sidebar menu
  • Click on the Add New button from the Plugins
  • A new window will appear, type “WP Google Maps” in the search menu in the upper left corner of the window and press Enter.

  • A list of plugins will appear. From here, select plugin and click on the Install Now button.
  • After installation is completed, click on the Activate

Activating WP Google Maps

That’s it, you are now ready to use the plugin. You can access the WP Google Maps plugin by clicking the Maps link in the left sidebar of your dashboard.

Installing the WP Google Maps PRO version

The Pro version is an extended version of the Basic WP Google Maps. To use the Pro version, first you must install and activate the Basic version.

After you have purchased the Pro version, download the file into your computer.

  • Login to your WordPress dashboard and click on Plugins -> Add New and then click on the Upload Plugin
  • Click on Choose File and navigate to the location where your downloaded file is saved in your computer.

Installing WP Google Maps Pro

Click on Install Now and let WordPress handle the rest for you. Activate your plugin after installation.

To view the installed WP Google Maps Pro Version, go to your

WordPress dashboard ->Plugins-> Installed Plugins.

Installing WP Google Maps Pro

Creating Your First Map & Basic Setup

Note: Before you create your first map, you need to obtain a Google Maps JavaScript API key and enter it into the Plugins settings. Once you enter the key, you can proceed with creating your map as show below-

  • Login to your admin dashboard and click on the Maps link in the left sidebar.
  • Then click on the Maps submenu, after which you will be directed to their Welcome page.
  • Go through the information provided and then scroll down and click on the Let’s Start

You will then be directed to a page as shown below. Here you can edit you map.

Note : The free version allows creating a single map. If you want to create multiple maps you can purchase the Pro version.

Click on the Edit link, which will take you to the “Create Your Map” page.

In this page, you will be provided with various Map Settings

General SettingsUnder this tab you will be provided with various basic settings like, short-code that you can copy and paste wherever you want to display your map, map name, height & width(in pixels), zoom level, map alignment and map type.

Wp Google Maps General Settings

This tab also provides settings for markers, Polygons, Polylines and heatmaps

Wp Google Maps General Settings

Themes Under this tab you will find option to select a theme for your map or create a custom theme.


Directions – These settings allow you to enable/disable directions on you map (This feature is not available in the free version).


Store Locator

Here, you will find options to enable/disable store locator functionality, restrict to specific country, display distance, allow Category Selection, allow users to use their location as the starting point, specify default address and various other style options for the radius circle and radius line.

Advanced Settings

Under this tab, you will find settings for enable/disable bicycle and traffic layer.

The rest of the advanced settings such as default marker image, filter by category, show user’s location are available only in the pro version.

Pro Upgrade

This tab provides a documentation on the various features available in the WP Google Maps Pro version.

After you have finished setting up your map, click on the Save Map button.

Next, go to General settings, copy the short code and paste it onto a post or a page. Once you have finished, click on the Publish button and your map should be now displayed on your front-end.

Conclusion

WP Google Maps is one of the highest rated google map plugins for WordPress. Creating a map takes a matter of few minutes. It offers various options that makes creating maps very easy, and also highly customizable. All in all it is a great plugin. Many may not need to upgrade to the Pro version, but it’s only $14.99 if you do and you get a great deal of enhancement and features.

About The Author

Oliver Dale is the founder of Kooc Media, an online company which has been working with WordPress since 2009. He has written hundreds of posts about WordPress in that time and founded two theme companies which provide free and paid themes to millions of users.

Google + / Twitter / Pinterest / Facebook

Disclosure: Some of the links in this post may be "affiliate links." This means if you click on the link and purchase an item, We will receive an affiliate commission