WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Tutorials» How to Add Google Maps in WordPress

How to Add Google Maps in WordPress

Last updated on February 26th, 2018 by Editorial Staff
145 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add Google Maps in WordPress

You can add all kind of content into your WordPress site. At WPBeginner we have shown you how to add audio files, videos, PDF and Spreadsheets in WordPress. Adding content from external sources allows you to create rich content that are useful and highly interactive. In this article, we will show you how to add Google Maps in WordPress.

Subscribe to WPBeginner

Manually Adding a Google Map in WordPress

Go to Google Maps website, and simply type in the address of the location you want to show or search for a location. Once you have found the location, click on the link button in the right hand panel. This will show you the embed code. Copy the iframe code or you can also click on the “Customize and preview the embedded map” to further customize the appearance of the map on your site.

Manually embed a Google Map in WordPress

Go to your WordPress website and paste the code in a post, page, or a template. That’s all, save your post/page and see Google map live in action on your site.

Adding Google Maps in WordPress Using a Plugin

The first method is good, if you only want to embed a Google map to just one location on your WordPress site. But if maps play an important role on your site’s main content and you need to frequently add maps in your posts, then we would recommend using a plugin.

First thing you need to do is install and activate MapPress Easy Google Maps plugin. Edit a post/page where you want to add the map. Scroll down to MapPress section on your post edit screen and click on New Map button.

Adding Google Maps into WordPress Posts using a Plugin

This will open MapPress editor where you can enter an address or click on My Location link to allow plugin to automatically detect your location. Provide a title to your map and choose the map size. Once you are satisfied with the map, click on the save button and then click on Insert into Post button to add the map into your post. Update or publish your post and see the preview.

With MapPress you can add multiple maps to a post or page. Even though it works out of the box but it also adds a plugin settings menu in your WordPress admin sidebar. Clicking on it you can change plugin settings, such as map type, border, alignment, controls, etc.

MapPress settings page

Adding Google Maps in a Widget and a Lightbox

Another easier way to add Google maps to your WordPress site is by installing Google Maps Widget plugin. After activating the plugin, go to Appearance » Widgets and drag and drop Google Maps Widget to your sidebar.

Google Maps Widget Settings

Enter the address you want to show on the map in Widget settings. You can also choose the map size, pin color, zoom level, etc. Click on the lightbox tab to configure the lightbox settings. Lastly click on the Save button to save your widget settings. Go to your site to see the widget in action.

Google Maps Widget with Lightbox popup

We hope this article helped you add Google Maps in your WordPress site. For questions and feedback, please leave a comment below.

145 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

31 Comments

Leave a Reply
  1. Donata says:
    Sep 29, 2020 at 9:07 am

    I have a google maps on my web, but the pin which is added to the map is not clickable. The pin only shows the adress but it do not direct if you click on it. Is it possible to do clickable icon?

    Reply
    • WPBeginner Support says:
      Sep 30, 2020 at 9:58 am

      For what you’re wanting, you would want to take a look at our article below:

      https://www.wpbeginner.com/plugins/how-to-add-interactive-travel-maps-in-wordpress/

      Reply
  2. Sharon says:
    Dec 1, 2018 at 4:04 pm

    Don’t you have to get an API from Google before you can use a map plugin and insert it into the plugin? That’s been my experience lately.

    Reply
    • Mark says:
      Jan 4, 2019 at 6:30 am

      Hi I’m trying to insert a google map onto my website ( WordPress ) it keeps disappearing am I correct in thinking that google now want $200 a month for this or whatever the cost or can I still insert a map for free

      Reply
      • WPBeginner Support says:
        Jan 4, 2019 at 11:59 am

        Google now charges for large uses of their maps API which is what the plugin runs on, the $200 you likely saw was the free monthly credit Google gives to those using their API so smaller sites are not charged.

        Reply
        • Kamil says:
          Jan 7, 2019 at 8:58 am

          Yes, that true but there is alternative for Google maps API. OSMapper is the plugin that uses Open Street Maps API that does not requires any API keys and there is no limit for usage. You can install it from WordPress.org.

        • WPBeginner Support says:
          Jan 7, 2019 at 4:24 pm

          While we have not tested it yet, we will be sure to take a look at it.

  3. Blessy says:
    May 2, 2018 at 1:24 am

    I tried the first step: copy the HTML in the after going to the embed button and paste it into the text version of the post. I went to the visual one and saw the embedded google map. I saved it at the site takes out the map. The changed texts remain, though, but the map keeps vanishing. it keeps repeating each try. Why does it happen?

    Reply
  4. Miranda Olding says:
    May 16, 2017 at 7:12 am

    Thanks – so clear x

    Reply
  5. Sara C says:
    May 2, 2017 at 10:53 am

    Great tutorial – short and to the point. I had tried two other plugins that my client didn’t like. Thank you for the manual embedding information. Worked perfectly and quickly.

    Many, many thanks for this tutorial.
    Sara

    Reply
  6. Denny Png says:
    Apr 22, 2017 at 8:27 pm

    Dear Sir/Madam,

    I would like to change the Google Map address & not sure where to locate this embedded link to update the WP backend. I couldn’t find it the contact menu to locate it.

    Seek yr kind advise on it!

    Thankyou!

    Rdgs,
    Denny Png

    Reply
  7. Kathy says:
    Oct 14, 2016 at 9:26 am

    Thank you! This is what I was looking for! Perfect for my travel post on my blog! The video is great and very helpful!

    Reply
  8. divi says:
    Jun 30, 2016 at 7:16 am

    Great Work Bro!!!!

    Reply
  9. Andy Kramer says:
    Dec 30, 2015 at 3:25 pm

    I would love to do this but when I go into google maps and type the address there is absolutely no gear so I can’t even get a link to copy for WordPress. Any ideas or suggestions?

    Reply
    • Karen says:
      Feb 14, 2016 at 3:33 am

      I am having the exact problem. There is no flower on Google Maps anymore! So how does this work?

      Reply
  10. Mari says:
    Sep 28, 2015 at 11:22 am

    Hi!
    I can’t find the code.. There’s no “flower icon” nor other links on the bottom right of the map. Is it because the place I’m trying to add doesn’t have a street address, it’s just coordinates?
    Thanks in advance.

    Reply
  11. Andy Meuleman says:
    May 2, 2015 at 10:55 pm

    A great lesson, easy to follow and implement.

    Much thanks, Andy

    Reply
  12. Karthik says:
    Apr 23, 2015 at 2:23 pm

    Is there any way to get this Map as a background to a page with full length say width 100% n height 100% something like that??

    Reply
    • Parmod says:
      Sep 17, 2015 at 4:51 am

      Can you be more specific about what exactly do you need

      Reply
  13. Bigg Tobias Inspired says:
    Jun 7, 2014 at 6:53 pm

    So, I loved the map tutorial but what if I want to place it in a certain area of the page… Or side bar? Can anyone help?

    Reply
  14. Carla Spacher says:
    May 21, 2014 at 5:45 pm

    Thanks so much! Why would anyone bother with a plugin that may ultimately slow down their site when you have provided such easy instructions to grab the code from Google Maps?

    By the way, if anyone is having trouble finding the code. Once you see the map, go to the bottom right-hand corner and click on the flower icon and click on “Share and embed map”. Then click on “Embed map” and enter into your WP page/or post.

    Reply
  15. WRC says:
    May 20, 2014 at 8:51 am

    Thank you. Very helpful post.

    Reply
  16. Rory says:
    Apr 9, 2014 at 11:54 am

    Hi, I was wondering if it is possible to have Google Maps to show the location of Groups (Buddypress)?
    Thanks for your help.

    Reply
  17. aamir says:
    Apr 9, 2014 at 12:46 am

    hello sir,

    i want to use plugin which provide exact location. can you suggest me? i use map press, leaflet market, wp google map etc. plugin but still no luck. all this plugin show some far location from my exact location. i want exact location where my shop is located. please help me. or is there any way to develop custom map & put in wordpress site? please provide step by step procedure.

    Thanks & Regards,
    aamir

    Reply
  18. Trang Tran says:
    Feb 21, 2014 at 5:20 pm

    Thanks for taking the time to write this article. It’s very helpful. Is it possible to add a Google Map that is linked with Google Places?

    Reply
  19. Guilherme says:
    Oct 23, 2013 at 10:33 am

    Very nice. But when we use coordinates, the lightbox map don´t work right. It just shows some place in USA. How can I fix this?

    Thanks

    Reply
  20. Bongo says:
    Oct 21, 2013 at 2:34 am

    Powerful stuff man. Thanks

    Reply
  21. Erwin says:
    Oct 20, 2013 at 11:08 pm

    Nice straight forward instructions. I posted a nice trick on how to get rid of the info bubble on the other day (http://goodwebsites.co.nz/how-to-remove-info-bubble-for-embedded-google-maps). Might be helpful.

    Reply
  22. Christopher Rose says:
    Oct 20, 2013 at 11:45 am

    Thanks for all the informative WP articles you’re posting.

    Is it possible to add a Google Map to a site that

    1. automatically adds the location of all site visitors or commenters to a map
    and
    2. allow all customers to be added, probably manually, although an automatic option would be good too. I have a small ecommerce site that has customers all over the world and thought it would be fun to show where we have sent stuff to.

    Reply
  23. Widdershins says:
    Oct 18, 2013 at 3:16 pm

    That is so cool! … thanks :D

    Reply
    • zakaria says:
      Oct 20, 2013 at 1:59 am

      Thank you very much!

      I have already founded (MapPress Easy Google Maps) and it is nice plugin.
      And of course, your attention is very nice support. THANKS!!!
      One more thing, please.
      I would like to use these maps in tabs but only tab’s (shortcode) plugin I have found so far which shows maps is (Jshortcode). (I mean it shows in second or third tab. The others aren’t showing in second or third tabs.) It is nice plugin too but has very colorful tabs.
      May be you would be so kind to advice some other plugins to solve this problem.

      Thanks advance
      Best regards
      Zakaria

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
RafflePress - WordPress Giveaway and Contest Plugin
RafflePress
Giveaway and Contest Plugin for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
ThemeIsle Coupon
Get 10% off ThemeIsle themes when you use this coupon.
WPEngine
WP Engine Coupon
Get 20% OFF on all WP Engine hosting plans PLUS 2 months free on annual payment.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.