How to add a Google Map to your page

Home » WordPress Blog » How to add a Google Map to your page
How to Embed a Google Map in WordPress

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.

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.

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.

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

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:

[google_map address="" height="" scrollwheel="" maptypecontrol="" zoom="" disablecontrols=""]

An example of using the code is as follows:

[google_map address="Sydney, Australia" height="400px" scrollwheel="false" maptypecontrol="true" zoom="14" disablecontrols="false"]

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.

WP Absolute

WP Absolute provides the absolute best WordPress tutorials and helpful guides to grow your WordPress website online.
Join us on Facebook and Youtube.

Add your comment