Google Maps is a widely used web platform for mapping that integrates well with WordPress websites. The best thing—the service is entirely free. Additionally, thanks to the generosity of Google, it lets millions of people view ultra-detailed maps and satellite imagery. Not only in 2D, but also interactive Street Mode in 360°, aerial photography, and with varying magnification. Moreover, the platform includes features such as displaying traffic in real-time, navigation, route planning, and distance/time tracking. If this convinced you, let’s dive into several ways to add Google Maps to your WordPress website.
1. Add a public Google Maps location in WordPress using HTML
Don’t let the talk of API and installing plugins scare you. If all you need is to show a particular location on Google Maps on a page or post on your website, you can let Google handle everything. It’s no different from embedding a YouTube video, and won’t take up resources since you’re essentially providing a link using HTML (HyperText Markup Language). Unsurprisingly, it can slow the loading time down since it uses multiple scripts that let users interact with the map.
Incorporate a Google Maps public map
Follow these instructions to integrate Google Maps into a page or post on your WordPress website:
- Head over to the Google Maps home page.
- Enter the desired location in the search bar in the upper left corner or navigate the map itself to get there.
- If there’s nothing of note on that location, you can set a red marker by double-checking or tapping. Then, click the arrow icon in the pop-up that appeared at the bottom. Otherwise, a data sheet will appear on the left-hand side.
- Select the hamburger menu (three horizontal lines).
- Go to Share or embed map.
- Switch to the Embed a map tab.
- Check the preview of the map. If it doesn’t show what you want, repeat the last few steps to readjust.
- Pay attention to the map size in the upper left corner, set as Medium by default. Change it to “Large” or “Small” if you need to.
- Once you’re satisfied, click the Copy HTML link or highlight the entire code and copy it manually.
- Go back to your website and open a page or a post. Use our guide to edit HTML in WordPress to copy the code to the block, source code, or empty spot on a post or page in Classic Editor.
- Note. If you’re in a rush and using Block Editor like the majority of users post WordPress 5.0, there’s a shortcut. Simply type /html in an empty block and select the Custom HTML block. Paste the code into it.
- Preview the result and publish changes.
2. Embed My Maps into your website through iframe tag
Are you a Google My Maps user? If so, it would be a shame if all the work you put into creating routes, adding markers and annotations, categorizing locations, or color-coding goes to waste. Luckily, it doesn’t have to, because Google lets you embed all that onto a website. Thus, follow these steps to add Google My Maps to a website using WordPress:
- Visit the Google My Maps page and sign in. Create a new map or choose an existing one from the list.
- After you’re done making changes, you’ll notice something important—custom maps are private by default for a good reason. Therefore, click on the desired map so that the pop-up window appears in the upper left corner.
- Select the Share button in the middle.
- On the “Sharing settings” window, click the Change… option under “Who has access”.
- Switch to On — Public on the web. Click the Save button.
- Navigate to the custom map floating window again, and click the three-dot menu in the top right corner.
- Select the Embed on my site option from the drop-down list.
- Copy the code and click the OK button.
- You can now add the code as we described above. If it doesn’t work, we presume the location is tied to a business. Thus, you’ll need to add the API key to the code this way:
<iframe src="....../search?key=API_KEY_HERE&...
3. Use a WordPress plugin to add Google Maps to your website
Unsurprisingly, you can take care of the whole ordeal by installing a WordPress plugin. However, you may need to generate an API (application programming interface) key first.
1. Generate a Google Maps API key (Situational)
Though unnecessary for simple map previews, the key is necessary if you want to get the Google SEO (Search Engine Optimization) benefits for the location of your business organization. Though this is intended for paid users, don’t fret, since you can do this for free with a $300 credit. Here’s how generating an API key for Google Maps works:
- Head over to the Google Maps Platform page.
- Click on Get Started and sign in to your Google account.
- Select the Create Billing Account button.
- Title your project, select a country, and provide all the necessary information tied to the location.
- Accept Terms of Service and click Continue.
- Pass the identity verification by providing your active phone number and clicking Send Code. Enter the code that arrives via SMS.
- Verify your payment information by entering:
- Business name
- Payment method
- Billing address
- Finish the procedure by clicking Start my Free Trial.
- Answer the four questions Google Maps Platform and click Submit in-between.
- View the code under “Google Maps API key”. Save it before clicking Maybe Later. We advise you restrict it to HTTP referrer, as Google suggests.
2. Install the desired mapping plugin for WordPress
We already have a nifty list of map plugins for WordPress. For demonstration, we’ll use the most beginner-friendly option, WP Google Maps. Here’s what to do:
- Install and activate “WP Google Maps” from the WordPress repository.
- A new option, Maps, appears in the left sidebar of the WordPress Admin Section. After you hover over it, select:
- Settings — only if the location is tied to a business. Enter your API key there and go to Maps.
- Maps — public locations or anything else.
- Create a new map or click the Edit button on “My first map”.
- Configure the desired location, short code, map name, zoom level, height and width, alignment, and more. Add markers, tweak your theme, set routes, etc.
- Open a new post or page in Gutenberg Editor and create a new block. You now have two options:
- Search for “wp google maps” in the block selector and pick WP Google Maps. Choose your map from the list.
- Paste the short code corresponding to the map.
- Save changes and publish the WordPress page or post.