Integrating Google Maps with your website

Updated on Oct 31, 2016

A map added to your website can server for easily showing a location to your users based on the map service provided by Google Maps. This tutorial will show you how to generate the code required for the map to be shown and also how to exactly implement the map code on your website in order for the map to be displayed.

Since we will be using widgets in this tutorial you should consider reading our tutorial for managing the widgets on your website.

To integrate Google Maps in WordPress, you need to:

step

Generate a map code

In order for the map code to be generated you should visit the official Google Maps page and find the location you would like to show on your website. For the purpose of this tutorial we will use the map for Kansas City, Kansas, USA.

google-map

Once you find the location you need please use the Link icon from the Google Maps interface in order for the available links to be shown.

getting-the-code

You will need to copy the code under the “Paste HTML to embed in website” textbox so you can have the code you will be embedding into your website.

step

Add the map code in WordPress

Once you have that code you will need to login into your WordPress admin area and navigate to Appearance → Widgets.

Appearance-widgets

Once you are landed on the widgets’ home page you will need to determinate where you would like the map to be shown considering the supported locations for your widgets. In our case the supported areas are:

  • Primary Sidebar
  • Content Sidebar
  • Footer Widget Area

Now simply add a Text type widget to the specific sidebar or area you would like the map displayed at. For example let’s display the map into the Content Sidebar area. For this purpose we are adding a Text type widget.

adding-new-widget

In order for the widget to become active you will need to put a tittle and also to paste the already copied map code (from Google Maps) in the Widget’s content area as shown above. As soon as you are ready simply click on the Save button and your widget will be saved and also your map will be displayed on your website.

map-example

Congratulations! You have successfully added Google Map service to your website!

On this page...

    WordPress Hosting

    • Free WordPress Installation
    • 24/7 WordPress Support
    • Free Domain for life
    • Hack-free Protection
    • Fast SSD Storage
    • Free WordPress Transfer
    • Free CloudFlare CDN
    • Immediate Activation
    View More