There are various the explanation why you may want to add a map to your WordPress website. Do you may have a store and need to show your location? Or possibly you’re into actual property and want to present your newest listings. Regardless of the motive, including a map to WordPress is simple to do.

Like a superb map, we’ll information you thru how to do it. You’ll be able to add a Google Map manually or create one with the assistance of a plugin.

First, I’ll present you the prices of getting a Google API and the way to receive one. A lot of the Google map plugins I’ll be masking on this tutorial require a Google API.

Subsequent, I’ll present you ways to get the embed code straight from Google Maps with no plugin.

And at last, I’ll be going by 12 plugins that may match the invoice. Each is a bit totally different. A few of the options could also be extra interesting to you than others.

The entire plugins are free to activate and use, however some provide improve choices for much more developments.

Dev Man mapping out his subsequent plugin.

Now that we have now this text mapped-out, let’s start…

Should I Purchase an API?

Don’t fear. Likelihood is it gained’t value you something. However, it’s value going over this in case you need to use Google Maps with a plugin.

Having an API key has been a requirement for Google Maps since June 11, 2018. You’ll be able to see in their pricing desk beneath what that appears like while you receive one.

Google API pricing.
The Google API prices fluctuate by use.

One factor Google does is offers you a recurring $200 credit score in your billing account every month. That offsets your utilization prices, so except you’re making fairly just a few requests (like, a ton), utilizing Google Maps shouldn’t value you a dime. Whew!

So now that you simply’re not freaked out concerning the prices, let’s…

Get a Google Maps API Key

You’ll want to go to the Google Cloud Platform Console and create an account.

From that time, you want to choose or create a undertaking. It walks you thru on setting one up or simply choose from a undertaking that’s already obtainable.

You’ll have to arrange billing data – however once more – don’t freak out. You gained’t have to fear an excessive amount of about being billed, although, except you go previous the edge of excessive utilization limits. Should you do, you’ll get charged accordingly.

After your billing data is entered, it’ll now ask you to choose a number of merchandise.

Google's map options.
Google offers you fairly just a few map choices.

Your alternative will fluctuate relying on what sort of map you’ll be utilizing. Since we’ll be going over how to embed a map with no plugin subsequent, we’ll go along with the Maps Embed API.

The embedded map option.
Need an embedded map? Go together with this selection.

From right here, you’ll click on Allow.

Where you'll enable Google maps.
Enabling the map is one click on away.

Allow will take you to the APIs & Providers dashboard.

Right here is the place you create your API key. Click on on Credentials after which Create Credentials.

Where you'll create the credentials.
Your whole API keys might be displayed on the dashboard as soon as created, so you’ll be able to retrieve them at any time.

Like that, you may have created an API key. You’ll want the API key for most of the plugins that we’ll be going over.

One thing to remember is that it’s going to present in plain textual content in your supply code when embedding your Google Maps API key. You’ll need to prohibit this so that folks can’t use your API key on their WordPress websites. That may trigger your utilization to skyrocket if it will get within the improper arms.

Doing that is straightforward. You’ll simply click on in your API key’s title to arrange restrictions. Merely including your WordPress website referrer ought to do the trick (e.g. By doing this, it’ll prohibit utilization to simply your website.

We'll you'll add website restrictions.
Enter the web site that you can be utilizing this key for.

Now you’re prepared to use any plugin that requires a Google API. So, let’s go forward and have a look at…

Embedding a Google Map into WordPress

Should you really feel like going plugin-free and simply including a map by embedding it from Google Maps, that’s straightforward to do.

Google may add a exact location for no matter you need to show, present detailed details about a enterprise, and extra.

To display the way it works, we’ll simply arrange a fundamental map of Los Angeles, California (hey, my neck of the woods!) to embed.

We’ll simply head over to Google Maps and pull up the Los Angeles space. Zoom in or get as shut to the situation as you would like.

Map of Los Angeles, California.
Los Angeles is a reasonably large place…

You’ll then click on on the three little strains within the higher left nook. This supplies you with a dropdown. From this level, you’ll click on on Share or embed map.

Where to embed map.
Have the map sized the best way you need? Click on on Share or embed map.

When you try this, you’ll have choices to ship a hyperlink or embed a map. Plus, you’ll be able to select what measurement you’d just like the map to be (e.g. medium).

The map embed code.
You’ll be able to decide varied sizes for the map that fits your website finest.

From right here, you’ll merely copy and paste the HTML in your WordPress publish, web page, or acceptable widget, and that’s it! Your map might be displayed.

12 Map Plugins for WordPress

Let’s say you need to do far more together with your map, different than simply what Google Maps supplies. You need some choices, dammit! Nicely, that’s the place plugins will help.

Here’s a have a look at 12 map plugins that could be helpful to tweak your map to your requirements.

  • For engaging wanting interactive Google or Leaflet maps, the Mapress Maps plugin is a superb free possibility.

    It options multisite compatibility, markers that may be drag & drop, and is avenue view supported. Plus, you’ll be able to set many parameters, comparable to width, peak, zoom, and extra.

    Should you improve to their Professional model, you get extra performance, comparable to customized icons, mashup choices, and a map widget to present a map or a mashup.

  • Because the title suggests, WP Google Maps is for Google maps that you would be able to add to your WordPress posts and pages shortly and simply with a shortcode. That is the most well-liked Google Maps plugin on the market, with over 400Ok energetic installations.

    You’ll be able to create as many maps as you’d like by typing within the handle. It additionally has 9 in style map themes to select from, drag map markers, fullscreen map performance, and many others.

    You’ll be able to improve to the Professional model in the event you’d like to create maps that give your guests instructions and add classes and different superior options.

  • The Maps Widgets for Google Maps permits you to have a map with a thumbnail & lightbox arrange in a matter of minutes. It may well load the whole Google map in just one request somewhat than the twenty-some requests that many different Google maps plugins take to load them.

    A few of the options are customized Google map sizes, map sorts (e.g. highway map), shade schemes, and customized map pin icon.

    With a stable 4.5-star assessment and over 80Ok energetic installations, it’s a free possibility that’s value establishing in your WordPress website to check out for your self.

  • Should you’d like to use one thing past Google maps, the Supsystic Final Maps plugin could be good for you. It makes use of various map choices, comparable to Bing Maps, OpenStreetMap, Leaflet, Mapbox, and Thunderforest.

    It encompasses a map builder and limitless markers with description, hyperlinks, photos, movies, and extra. It’s additionally totally responsive and 100% customizable.

    The convenience of use and map choices past Google make this 5-star rated plugin an possibility to try.

  • To create customized maps, the WP Mapbox GL JS Maps plugin could be all you want. The plugin makes use of Mapbox companies that embrace Studio Kinds and the Mapbox GL JS library.

    A few of the options embrace a stay preview editor, limitless markers by handle or drag and drop, and site search.

    When it comes to type, there are over 100 icons with totally different colours obtainable, 3D map shapes, ten kinds to select from, and extra.

    There are additionally tutorials and assist from the Mapbox GL JS consultants.

  • The Leaflet Map plugin works by producing a map with LeafletJS, which is an opensource JavaScript library for mobile-friendly interactive maps.

    This plugin makes use of a shortcode to create maps, search for addresses, the longitude and latitude, and extra.

    It’s a really fundamental plugin, however with a 5-star assessment, it appears to do the trick for a lot of customers.

  • The Interactive Geo Maps plugin is nice if you need to add an interactive map to your WordPress website. There are over 250 maps obtainable with areas and coloured markers.

    This plugin works nice for journey bloggers, workplace areas, statistics, and extra.

    The Interactive Geo Maps are free for the restricted model. Should you’d like to improve to embrace customized photos and vector icons, you’ll be able to improve to the Professional model.

  • Need to arrange a map shortly and simply? Google Maps Simple has you coated. You’ll be able to have a Google Map arrange in a minute.

    It options Google Map markers with any media. That features video, photos, hyperlinks, and textual content descriptions.

    It’s nice for actual property, contact pages, supply routes, and extra.

    This plugin can also be 100% customizable, totally responsive, and might use an infinite variety of map markers & areas.

  • The WP Retailer Locator plugin is a straightforward to map plugin for – you guessed it – retailer areas. You’ll have the opportunity to pinpoint your location to prospects and ship them the best approach.

    The plugin permits you to customise the map’s look, present customized labels for entry fields, and customers can filter the outcomes by radius. There are additionally driving instructions to close by shops.

    The variety of shops you’ll be able to add is limitless. Plus, you’ll be able to embrace particulars, comparable to cellphone quantity, e-mail, URL, descriptions, hours of operation, and many others.

  • With the WP Google Map plugin, you’ll be able to add a customized Google map to your WordPress website. It’s completely customizable and free.

    There is no such thing as a coding required, and changes are straightforward to make. You’ll be able to change the width, zoom ranges, and add a shortcode to an appropriate widget.

  • With Versatile Map, you’ll be able to add Google Maps to your WordPress web site simply with shortcodes.

    A few of the options embrace non-compulsory descriptions and instructions. You can too load a map by heart coordinates, avenue handle, and URL to a Google Earth KML file.

  • A more moderen plugin is the Stellar Locations. It’s designed for creating, managing, and displaying areas utilizing Google Maps.

    When you may have a brand new place added, you’ll be able to entry the itemizing view and single location view. Each choices mechanically have maps related to them. It additionally encompasses a stay map view, drag & drop marker relocation, limitless areas & maps, and clear, well-written code that gained’t lavatory down your WordPress website.

    A big distinction between the Stellar Locations plugin and lots of different plugins is that it makes use of customized publish sorts to handle areas. Plus, most don’t have an intuitive interface.

That’s a Wrap When it Comes to a Map

From getting an API key to creating superior maps with a plugin, you ought to be ready to add a map to your WordPress website in a snap.

It actually is dependent upon your goal for displaying a map to decide what route works finest for you. The choices, customization, and usefulness are available many various varieties.

I hope this text has helped you map out just a few concepts. Simply observe the instructions above and also you’ll be good to go.