If you want to add a map to WordPress website, you’re probably looking for plugin which would let you do it without too much work. There are various ways to embed Google maps to WordPress page, and here you’ll find three common and very practical ones:
- How to embed Google Maps to WordPress posts and pages without plugins
- How to add Google Map with multiple markers in WordPress
- How to add Google Map to WordPress ithout compromising website speed
How to embed Google maps to WordPress Gutenberg editor
There’s no need for third party plugins if you want to add a Google map with a single marker to WordPress. Here’s how you do it:
- Go to Google Maps website and look for an address you want to show on the map.
- Click Share icon, and select Embed a map tab.
- Click COPY HTML to copy the Google Maps code you’ll need to enter to WordPress.
Now open any WordPress post or page you want to embed Google map to. Add Custom HTML block where you’ll want the map to show up.
Paste previously copied Google map code to the Custom HTML block. It should look more or less like that:
That’s it – Google map now will show up in your WordPress website.
Couple of tips which might be useful:
- you can change Google Map height by editing height attribute. Example shows height=”450″ (450 pixels height) but you can add any number you like there. The same way you change Google Map width.
- if you need Full width Google Map in WordPress page or post, move this Custom HTML block to GROUP element in WordPress editor. Don’t forget to set Group width as Full width, and change width in an embedded map to some large number (for example width=”3840″). No worries about a large number – Google Maps iframe is responsive so it will adapt to browser window.
How to add Google map with multiple markers to WordPress
Sometimes you may need to add multiple markers to a single map. For example if you want to add store locator in WordPress website. The previous method I wrote won’t work in this situation because Google does not let adding multiple markers to a Google Map embed. But there’s an easy way to accomplish it in WordPress anyway.
Go to Plugins >> Add New, and search for WP Google Maps plugin.
Once you install and activate plugin go to Maps in WordPress admin menu, and create a new map.
Once you start creating a map you’ll be asked which map engine you’d like to use. You can select free OpenLayers engine, or Google Maps engine. Both work fine, but Google Maps engine requires to create an API.
Here’s the example with OpenLayers engine. Adding and editing markers in a map is quite simple.
Once you finish building a map with multiple markers scroll to top of the page, and copy map shortcode.
After saving changes you’re map will be added to your website.
How to add Google map to WordPress without compromising website speed
Adding Google Maps to WordPress post or page means adding additional external code library to the system. In some cases it might add one or couple of seconds to the website’s loading speed.
It’s not an issue if you’re adding Google map only on the company’s contact page but it will have a big impact for SEO if you use Google maps on homepage or on every single page of your website.
There’s a simple solution for that. Instead of embedding Google maps directly to website you can add a picture of the map (PrintScreen the map), and put a link on a map which would go to Google Maps page. This way there won’t be no website speed penalty, and your website visitor still have fully functioning and zoomable map if they need it.
