Beautiful Google Maps in WordPress

If you’re like me, I’m sure you don’t want to waste any more time on Twitter, Facebook, LinkedIn… promoting your content. Use Nelio Content instead and let it do the hard work for you! Take a look at it!

Nowadays, it’s quite common to see Google Maps embedded in a website—just take a look at our contact page to see an example 😉. They’re a great tool for letting your visitors know where they can find you or where an event you’re organizing will take place. But how can you add a Google Map in your WordPress site? Well, today I’m going to teach you how.

Plugins—The Easiest Way to Add Google Maps in WordPress

If maps play an important role in your website and, therefore, you need to embed them often, then a plugin is probably the solution you need. A quick search in WordPress.org reveals that there’s plenty of plugins for embedding Google Maps in your site. In this post, though, I’m going to focus on MapPress Easy Google Maps, a pretty neat plugin with more than 100,000 active installs.

MapPress Settings Screen right after installation. Notice the warning letting us know that we need to add an API Key if we want to use the plugin.

Then click on Save Changes, and go edit the page or post in which you want to add a map.

Now, scroll down until you find a new box named MapPress and click on New Map button to create a new map. This will open the following editor

Creating and customizing maps is pretty straightforward with MapPress. Just name the map, fill the options, and you’re done!

where you can tweak the map. In particular, you’ll be able to name the map, choose its size, and enter the address it has to pin to (or click on My Location to let the plugin automatically detect where you are). Notice you can add as many markers as you want by locating multiple addresses, one after the other.

Once the map is ready, you simply need to click on Insert into post button and a new shortcode will appear. Easy, huh?

Google Maps iFrames—Because It Only Tooks a Few Clicks

If you don’t want to use a plugin for such a simple action as embedding a map in your WordPress site, you’re lucky! Google Maps makes it super easy to embed maps using iframes. Just open Google Maps in your browser and look for the address you’re interested in. Once you’ve found it, click on the Share button, select the tab Embed map, choose the map size, and copy the iframe. Then, simply paste it in a page or post in your WordPress site and you’re done.

Google Maps makes it super easy to embed a map in our websites. Just look for the location you’re interested in, click on Share, and copy and paste the iframe tag into your WordPress site.

As you can see, this solution is similar to the previous one in complexity, with its pros and cons. Among its pros, you’ll find there’s no need to get an API key nor to install yet another plugin in your installation to embed maps—iframes are easy to use, fast, and reliable. On the downside, you have to leave WordPress to get the job done. Moreover, if you ever want to change the map, you’ll have to repeat the process and replace the original iframe completely, whereas in the first solution you simply needed to edit the map within MapPress’ box so that the shortcode can load the new version.

Finally, note that this solution is not limited to one marker only—if you’re willing to expend some extra time on it, go to Google’s My Maps and create a custom map with multiple markers, lines, and so on.

Google Maps JavaScript API—Full Control on Your Maps

The last option I wanted to discuss today is the Google Maps JavaScript API (which, by the way, is the solution we’re using in our contact page). This is slightly more complex than what we’ve seen so far, but it definitely pays off if you want to go crazy about your maps. Here’s how it works:

You define a div tag in your HTML code that’ll contain the map,

load the Google Maps JavaScript API using your API Key, and

add a custom script where

you specify how the map looks and behaves, and

any markers that might be used in it.

Let’s see it with an example. Let’s start by assuming that we already have a div that’ll contain the map, and that it’s identified as neliohq-map—that is, we have a tag such as <div id="neliohq-map">. Now, we simply need to proceed with steps two and three. Loading the Google Maps JavaScript API is as easy as inserting the following script:

So far, the script is super easy, isn’t it? We’re simply creating a function named loadNelioHQMap and instructing Google Maps to call it when the window is ready (line 5). Of course, we’re not doing anything yet, but getting this right is what matters the most. Then, loading the map is as simple as adding this snippet within the function we just created:

mapEl is a reference to the DOM element neliohq-map which, as we just said, is the div that’ll contain the map itself.

mapOptions is a JavaScript object that specifies how the map looks and behaves. If you look at the different options, you’ll see that we’re able to center the map wherever we want, enable or disable drag and zoom controls, and so on.

map is the Google Map object itself, which is defined using the constructor new google.maps.Map and passing the other two variables as input parameters.

If you go ahead and try this, you’ll realize that the map looks as you wanted, but there are no markers yet. In order to add one or more markers, just follow this example:

For each marker you want to create, call the constructor google.maps.Marker and specify its settings:

map is a reference to the google.maps.Map instance we created before,

position is the latitude and longitude location of the marker itself, and

icon contains a few settings that define its appearance.

Repeat the previous snippet as many times as you want, and you’ll be able to add as many markers as you need 😁.

Bonus Tip

Finally, I wanted to share a bonus tip with you, folks 😉 If you want your maps to look gorgeous, just take a look at Snazzy Maps—an outstanding website with tons of styles you can use in your maps. Just select the style you like, copy the JavaScript Style Array to your clipboard, and add it as an extra option in your mapOptions object using the key styles:

19 thoughts on “Beautiful Google Maps in WordPress”

I understand you’re interested in using the JavaScript API. If that’s the case, you need to enqueue the library first (https://maps.googleapis.com/maps/api/js). You can do this by adding the enqueue function in your theme’s functions.php file or you can create your own plugin with all your customizations (which obviously include this enqueue function).

Then, to add the map, it really depends on how you want this to work. If you want the same map in all your pages, you can create a custom JavaScript file and enqueue it as we enqueued the library. If only some pages are supposed to have the map, you need to tweak their own templates… or use Genesis’ own hooks and filters (which I can’t access now, because we don’t own the theme).

In summary, you need to determine what you want first, and then tweak your theme as needed.

I just wanted to say thank you very much for taking the time to putting this together. I’d always thought Google Maps was complicated but your beautiful google maps in WordPress article helped me achieve it for a WordPress site I was working on.

I ended up with the complex method because it gave me more control as pointed out.

Great article David! Thanks for sharing this useful information for us trying to add our Google Maps into our WordPress website; it’s also very important not only to add Google Map but to make sure it matches with your website design, here we’ve written an article about how to customize your Google Maps in your WordPress site: https://goo.gl/JnZtIz Your feedback would be highly appreciated 🙂

Hi to anyone Any ideas to make the map look different to the default. For example, I had a live wallpaper on my android device and it had a “Paper Like” theme on it. Is this something anyone can help me with?

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.

This site uses proprietary operational cookies that have a purely functional purpose and third-party cookies that help us understand how visitors interact with the site by collecting and presenting information anonymously. If you continue browsing, you accept their use but you can disable them if you wish. Read more…