WordPress is highly dynamic allowing you to add all sorts of media to your page. The same goes for Google Maps. You can embed any type of Google Map into your page or post. In this guide we will show you 3 ways to add a Google map in WordPress.

Adding a Google Map is a very simple process and there are hundreds of options available to embed a Google map into your site.

Depending on your requirements you can choose the option that suits you. We will be:

Either way will result in you being able to embed a Google Map on your site. You will have differing levels of customization depending on which option you choose to use.

Embed from Google Maps

The simplest and easiest way to embed a Google map is by embedding it from Google Maps. This method gives you a basic map with just the default options. If you want more flexibility then you might want to use one of the other methods below.

You do this by going to Google Maps and searching for your location. Once you have found your desired location, you click on the share button to embed on your website. Paste the code into your page and save your page.

The result is you have an interactive Google map like the following embedded in your site:

These are the in depth steps on how to embed the Google Map into your page.

  1. Access Google Maps
    Go to Google Maps and enter your desired location in the search field and press search.

    You will see your map result with a marker on your searched location.

  2. Get embed code
    In the left hand sidebar you will see a share icon button. Click on the icon to bring up a modal window with the options to share.

    Click on the Embed a map button.

    Select the size of the map by using the dropdown and then copy the HTML.

  3. Embed the Map
    Log into your WordPress website and go to the page you want to embed your Google map on.

    Make sure you are in the text mode for your editor and paste the HTML in the place where you want the map to appear on your site.

    You can switch back to visual editor mode to preview your map.

    If you are happy, click the Save or Publish button to make the map live on your site.

[highlight type=”tip”]If you are just seeing the HTML code displayed on your page then that means you pasted the code in visual mode. If you paste it in visual mode then you will simply get the text. To fix this, go into your editor and select the text mode and paste the code in again.[/highlight]

How to get a Google Maps API key

Google Maps have changed their policy and now require everyone who is using the Google Maps API to require an API key to work.

If you are using any method other than the share method above then you will need the API key. The same will apply for any other plugin that you use on WordPress that is not listed here.

The API key is easily obtained by logging into Google and clicking the get API button.

  1. Get API Key
    Go to the Google Maps Get an API key page and click on the GET A KEY button.
    Google search testing tags
  2. Log in
    To use the Google Maps API you need to log in using a Google account. Log in to proceed.
  3. Create a Project
    Once you are logged in and have clicked the GET A KEY button, an Enable Google Maps JavaScript API popup window will appear to create a new or select an existing project.

    Type in your project name into the field or select an existing one if you have created one in the past.

    Click the Next button to generate your Google Maps API key. Copy your API as you will need to paste it in method 2 and method 3.

It is recommended that once you create your API key that you go to the API Console and configure your API security and limit your API key usage to only be usable on your website.

WP Google Maps Banner

Installing a Google Map using a plugin

There are a hundreds of Google Maps plugins available to use. We have tried and tested a lot of the most popular plugins and have found that the WP Google Maps plugin is our preferred.

You install the plugin into your WordPress website and then create a Google Map in the admin back-end. You can then embed the map into your page using a shortcode provided.

You will need a Google Maps API key to use this method. Follow the Google maps API key steps above first to obtain your API key.

How to embed a Google map in WordPress using WP Google Maps

  1. Log into WordPress
    Log into your WordPress admin dashboard.
  2. Install Plugin
    Go to Plugins > Add New in the sidebar and search for the “WP Google Maps” plugin by WP Google Maps.

    If you need more help on installing the plugin then you can view our WordPress plugins install guide for more info.

    Install and activate the plugin. You will be redirected to the WPGoogle Maps welcome page. Click on the Skip intro and create map button to begin creating your Google Map.

  3. Important Notification Google Map API
    To use a Google Map you need to add your API key into the plugin. There will be an Important Notification notice at the top of the My Maps page. This is where you add you Google Maps API key from the steps you completed above.

    Add the key and click the save button to be able to use Google Maps.

  4. Create Map
    On this page, it will list your maps that you have created. If you are just using the free version then you will only be able to create one map. There is a map created already for you. Click on the Edit button to configure the map.

    All of the features you need to make extremely advanced (as well as basic) maps are on this page.

    Go through each of the tabs to configure your map and then click the Save Map » button to save your changes.

  5. Embed Map
    On either the My Maps page or the edit map page you will see the Short code field. This field will have your maps ID in it.

    To embed the map to the page you simply need to copy and paste the shortcode onto wherever you want to embed it on your post or page.

    Save the page and your map will be live on your site.

Custom coding a Google Map shortcode

This method is a basic demonstration of how to make a Google Maps shortcode. Although this is a very basic example, it is a great foundation to build upon.

The first step is to choose whether you want to add this into your child theme or as a plugin. It is recommended that you install things like this in a plugin so that if you change your theme then you wont lose the features that you would want to keep.

We will be creating a plugin but you can add these functions into your child themes functions.php file if you choose.

The plugin will have three functions that we will discuss below:

  • wpabsolute_register_map_scripts: This function will add the Google API script to load the map
  • wpabsolute_map_shortcode: This function is the shortcode. It is what sets up the code to output on your site.
  • wpabsolute_map_get_coordinates: This function is a helper function that goes to Google to get the map co-ordinates from an address.

Use the shortcode by adding the shortcode into the page:
[code type=”markup”][google_map address=”” height=”” scrollwheel=”” maptypecontrol=”” zoom=”” disablecontrols=””][/code]
An example of using the code is as follows:
[code type=”markup”][google_map address=”Sydney, Australia” height=”400px” scrollwheel=”false” maptypecontrol=”true” zoom=”14″ disablecontrols=”false”][/code]

Here is the final code to make your own WordPress Google Map shortcode. Save to a file and compress into a zip. Upload the zip file as a new plugin to use. Make sure you update the $map_key = “” with your Google Maps API key that we setup above.

Things to note in the wpabsolute_register_map_scripts function:

  • Update the $map_key = ”; to add your Google Maps API key inbetween the ”.

Things to note in the wpabsolute_map_shortcode function:

  • There are 6 attributes you can use in the shortcode.
    • address: Enter the address of where you want the map marker to be positioned.
    • height: The height in pixels of how high you want the map to be on the page.
    • scrollwheel: Whether you want the map to zoom in or out with the scroll wheel.
    • maptypecontrol: A toggle on the map to choose what map type the map should be.
    • zoom: A number between 1 – 20. 1 is zoomed right out. 20 is zoomed in to building level.
    • disablecontrols: Turn off the map controls altogether.
  • If the map address is set, it will output the markup for the map. If not it will either display nothing or an error message to logged in users.

Things to note in the wpabsolute_map_get_coordinates function:

  • It goes to Google and queries for the coordinates of the address that you set in the shortcode.
  • So that it doesnt do this on every single page load, the result will be stored in your database using WordPress transients.

Conclusion

This guide showed you three ways to install a Google Map on your WordPress website. Did this article help you add a Google Map in your WordPress site? Leave your comment in the comments box below if you have questions or feedback.
Don’t forget to check back regularly for more WordPress tutorials and guides on how to make your WordPress website even better.

You will be the first to know about new WordPress insights on our YouTube channel and Facebook page. Be sure to subscribe to both.