HostAdvice Special Deals! Save 75% on all Shared Hosting Plans & Locations

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:


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.


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.


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.


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.


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.


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.


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 Transfer
    • Hack-free Protection
    • Fast SSD Storage
    • Free WordPress Transfer
    • Free CloudFlare CDN
    • Immediate Activation
    View More