There are many reasons why you might want to add a map to your WordPress site. Do you have a shop and want to display your location? Or maybe you’re into real estate and need to show your latest listings. Whatever the reason, adding a map to WordPress is easy to do.
Like a good map, we’ll guide you through how to do it. You can add a Google Map manually or create one with the help of a plugin.
First, I’ll show you the costs of getting a Google API and how to obtain one. Most of the Google map plugins I’ll be covering in this tutorial require a Google API.
Next, I’ll show you how to get the embed code directly from Google Maps without a plugin.
And finally, I’ll be going through 12 plugins that can fit the bill. Each one is a bit different. Some of the features may be more appealing to you than others.
All of the plugins are free to activate and use, but some offer upgrade options for even more advancements.
Dev Man mapping out his next plugin.
Now that we have this article mapped-out, let’s begin…
their pricing table below what that looks like when you obtain one.
The Google API costs vary by use.
One thing Google does is gives you a recurring $200 credit on your billing account each month. That offsets your usage costs, so unless you’re making quite a few requests (like, a ton), using Google Maps shouldn’t cost you a dime. Whew!
So now that you’re not freaked out about the costs, let’s…
Google Cloud Platform Console and create an account.
From that point, you need to select or create a project. It walks you through on setting one up or just pick from a project that’s already available.
You’ll have to set up billing information – but again – don’t freak out. You won’t have to worry too much about being billed, though, unless you go past the threshold of high usage limits. If you do, you’ll get charged accordingly.
After your billing information is entered, it will now ask you to pick one or more products.
Google gives you quite a few map options.
Your choice will vary depending on what type of map you’ll be using. Since we’ll be going over how to embed a map without a plugin next, we’ll go with the Maps Embed API.
Want an embedded map? Go with this option.
From here, you’ll click Enable.
Enabling the map is one click away.
Enable will take you to the APIs & Services dashboard.
Here is where you create your API key. Click on Credentials and then Create Credentials.
All of your API keys will be displayed on the dashboard once created, so you can retrieve them at any time.
Like that, you have created an API key. You’ll need the API key for many of the plugins that we’ll be going over.
Something to keep in mind is that it will show in plain text in your source code when embedding your Google Maps API key. You’ll want to restrict this so that people can’t use your API key on their WordPress sites. That can cause your usage to skyrocket if it gets in the wrong hands.
Doing this is easy. You’ll just click on your API key’s name to set up restrictions. Simply adding your WordPress site referrer should do the trick (e.g. https://yourdomain.com/). By doing this, it will restrict usage to just your site.
Enter the website that you will be using this key for.
Now you’re ready to use any plugin that requires a Google API. So, let’s go ahead and look at…
by embedding it from Google Maps, that’s easy to do.
Google can also add a precise location for whatever you want to display, show detailed information about a business, and more.
To demonstrate how it works, we’ll just set up a basic map of Los Angeles, California (hey, my neck of the woods!) to embed.
We’ll just head over to Google Maps and pull up the Los Angeles area. Zoom in or get as close to the location as you wish.
Los Angeles is a pretty big place…
You’ll then click on the three little lines in the upper left corner. This provides you with a dropdown. From this point, you’ll click on Share or embed map.
Have the map sized the way you want? Click on Share or embed map.
Once you do that, you’ll have options to send a link or embed a map. Plus, you can choose what size you’d like the map to be (e.g. medium).
You can determine various sizes for the map that suits your site best.
From here, you’ll simply copy and paste the HTML in your WordPress post, page, or acceptable widget, and that’s it! Your map will be displayed.
Mapress Maps plugin is a great free option.
It features multisite compatibility, markers that can be drag & drop, and is street view supported. Plus, you can set many parameters, such as width, height, zoom, and more.
If you upgrade to their Pro version, you get additional functionality, such as custom icons, mashup options, and a map widget to show a map or a mashup.
WP Google Maps
As the name suggests, WP Google Maps is for Google maps that you can add to your WordPress posts and pages quickly and easily with a shortcode. This is the most popular Google Maps plugin out there, with over 400K active installations.
You can create as many maps as you’d like by typing in the address. It also has nine popular map themes to choose from, drag map markers, fullscreen map functionality, etc.
You can upgrade to the Pro version if you’d like to create maps that give your visitors directions and add categories and other advanced features.
Maps Widgets for Google Maps
The Maps Widgets for Google Maps allows you to have a map with a thumbnail & lightbox set up in a matter of minutes. It can load the entire Google map in only one request rather than the twenty-some requests that many other Google maps plugins take to load them.
Some of the features are custom Google map sizes, map types (e.g. road map), color schemes, and custom map pin icon.
With a solid 4.5-star review and over 80K active installations, it’s a free option that’s worth setting up on your WordPress site to try out for yourself.
Ultimate Maps by Supsystic
If you’d like to use something beyond Google maps, the Supsystic Ultimate Maps plugin might be perfect for you. It uses alternative map options, such as Bing Maps, OpenStreetMap, Leaflet, Mapbox, and Thunderforest.
It features a map builder and unlimited markers with description, links, images, videos, and more. It’s also fully responsive and 100% customizable.
The ease of use and map options beyond Google make this 5-star rated plugin an option to check out.
WP Mapbox GL JS Maps
To create custom maps, the WP Mapbox GL JS Maps plugin might be all you need. The plugin makes use of Mapbox services that include Studio Styles and the Mapbox GL JS library.
Some of the features include a live preview editor, unlimited markers by address or drag and drop, and location search.
When it comes to style, there are over 100 icons with different colors available, 3D map shapes, ten styles to choose from, and more.
There are also tutorials and support from the Mapbox GL JS experts.
Leaflet Map
The Leaflet Map plugin works by generating a map with LeafletJS, which is an opensource JavaScript library for mobile-friendly interactive maps.
This plugin uses a shortcode to create maps, look up addresses, the longitude and latitude, and more.
It’s a very basic plugin, but with a 5-star review, it seems to do the trick for many users.
Interactive Geo Maps
The Interactive Geo Maps plugin is great if you want to add an interactive map to your WordPress site. There are over 250 maps available with regions and colored markers.
This plugin works great for travel bloggers, office locations, statistics, and more.
The Interactive Geo Maps are free for the limited version. If you’d like to upgrade to include custom images and vector icons, you can upgrade to the Pro version.
Google Maps Easy
Want to set up a map quickly and easily? Google Maps Easy has you covered. You can have a Google Map set up in a minute.
It features Google Map markers with any media. That includes video, images, links, and text descriptions.
It’s great for real estate, contact pages, delivery routes, and more.
This plugin is also 100% customizable, fully responsive, and can use an unlimited number of map markers & locations.
WP Store Locator
The WP Store Locator plugin is an easy to map plugin for – you guessed it – store locations. You’ll be able to pinpoint your location to customers and send them the right way.
The plugin allows you to customize the map’s appearance, provide custom labels for entry fields, and users can filter the results by radius. There are also driving directions to nearby stores.
The number of stores you can add is unlimited. Plus, you can include details, such as phone number, email, URL, descriptions, hours of operation, etc.
WP Google Map
With the WP Google Map plugin, you can add a custom Google map to your WordPress site. It’s totally customizable and free.
There is no coding required, and adjustments are easy to make. You can change the width, zoom levels, and add a shortcode to an acceptable widget.
Flexible Map
With Flexible Map, you can add Google Maps to your WordPress website easily with shortcodes.
Some of the features include optional descriptions and directions. You can also load a map by center coordinates, street address, and URL to a Google Earth KML file.
Stellar Places
A newer plugin is the Stellar Places. It’s designed for creating, managing, and displaying locations using Google Maps.
When you have a new place added, you can access the listing view and single location view. Both options automatically have maps associated with them. It also features a live map view, drag & drop marker relocation, unlimited locations & maps, and clean, well-written code that won’t bog down your WordPress site.
A significant difference between the Stellar Places plugin and many other plugins is that it uses custom post types to manage locations. Plus, most don’t have an intuitive interface.
customization, and usability come in many different forms.
I hope this article has helped you map out a few ideas. Just follow the directions above and you’ll be good to go.
