Embed Google Maps in WordPress Website

/, Security/Embed Google Maps in WordPress Website

How hard is it to find a specific location? Better yet, how hard is it to actually get lost in the current rising age of technological advancements? GPS and location services have made it possible for any person to be able to navigate around the surroundings, regardless of where they are. So how can a business owner or a website owner make use of these incredibly convenient public services?

Google Maps is the premium platform for location services currently. It’s convenient, yet free features such as advanced location listing, Google Street viewing, integration with Public transits and other such benefits set it a step above existing competitors. So the obvious question to ask is “How to use this extremely beneficial free service for the benefit of their customers, website viewers and more?”

Own a business and want to give directions to your viewers regarding the closest shops to them? Or perhaps you want to show off excellent locations, restaurants, entertainment centers and more on your blogs. Maybe just plan to pinpoint some area in your posts? Embedding a google map to your post is the answer to all your questions.

However, inserting a Google Map onto your website is not really as easy as it sounds. So, we present you this step-by-step procedure of the whole process to embed Google Maps In WordPress.

Method 1: Directly Embedding Google Map

The simplest way to add Google Maps is by directly using an Embed code provided by Google itself. And while it doesn’t let you add anything more by itself, it certainly does the job correctly.

Here are the steps required to embed Google Maps to your post:

First, go open Google Maps, then search for the required location, street or the required place. Then, click on the ‘Share’button and then on the ‘Embed map’ option. Finally, choose the required size of your google map ( you can also manually enter the required size of the map) and copy the given Embed code.

Embed-Google-Maps-WordPress-Gif1

Next, once you have the embed code, you can insert this code directly into your post by copying the code into the text editor.

Embed-Google-Maps-Embed-code

After saving your post, your map should be shown in the post correctly as below:

Embed-Google-Maps-WordPress-Preview1

Method 2: Using a Plugin

While using the first method is easy as well, it isn’t efficient. Adding multiple maps in a single post requires more effort, and there are plugins out there that can cut a majority of the work in a single click.

WordPress Google Maps plugins work by easily letting you insert your pre-made custom map on the post. Furthermore, they let you add more details using elements like custom markers, modified map box, custom texts, and descriptions, etc. and adding features such as Streetview and real-time traffic.

Before you start, do remember that you require a Google API key to use the Google maps plugins on your website or application. So, if you don’t have one already or don’t know how to register one, here’s the procedure to create one:

Most Google maps plugins require API keys for the following services:

  1. Google Maps Javascript API
  2. Google Places API Web Service
  3. Geocoding API
  4. Directions API
  5. Geolocation API

This link allows you to register for these APIS using your Gmail ID instantly.

However, you can easily register for the above APIs using this link :

If you used the former link, it leads you to a page to either create a new project or register for an existing project(if you have one.)

Embed-Google-Maps-Api-Project1

Now that the project is made and the APIs are enabled (done automatically), you are required to use a Credential(the required API key) for using these APIs.

If you aren’t directed there automatically, follow the next step. If you are automatically directed to the following page, skip the next step.

Click on the Credentials button on the dashboard and then click on Create Credentials. Then choose the API key button.

Embed-Google-Apps-Api-Gif1

You can now receive the API key, but you’re not done yet, click on Restrict Key to setup restrictions for the API access. Here are the entries you need to fill:

  1. The name of the key: Fill in the appropriate name for your credential.
  2. Key restriction: This is to restrict who can access the Google API through your key. Use HTTP referrers here since for now, you’re only using this for your website.
  3. Web Site referrers: Insert the websites which can access the API through your Key. Insert your website name between the *. For example: *.beautifulthemes.com/*

Embed-Google-Apps-EnableAPI2

Click on save and now you should have your API. Copy this and insert it into your plugin’s settings. This differs based on the Plugin itself. But most of them ask for the API in the Plugin settings or straight on their Interface.

Best WordPress Google Maps Plugins & Widgets

There are many plugins on the web that provide these features and more. After a thorough research, we have chosen a few of them as mentioned below. These plugins have a free and paid model, but they all are usable enough in their free versions. So you don’t have to worry if you don’t want to invest a lot into your WordPress Google Maps plugin.

All of these are equally usable and provide enough resources for any author. But, for this demonstration, we have chosen Google Maps Builder by Huge-IT,  because of its customization features and intuitive design. It is also very easy to use and has all the relevant features in the Free version.

Let’s start with this.

1. Google Maps Builder for WordPress

Huge-it-google-maps-wordpress-plugins

Google Maps by Huge-IT is another great option for you when it comes to plugins and builder to integrate locations onto your site. A perfect tool with simple and effective tools that helps in the rapid creation of individual Google Maps, we surely recommend that you try this out!

Features:

  • An unlimited number of maps with the map-naming feature.
  • Map animations support and beautiful marker design with individual marker feature.
  • Polygons, Polylines and Map Circling feature.
  • Allows you to add custom layers to the map such as Traffic layer, Bicycling layer, and Public Transit layer.
  • Draggable map and CSV Map export feature.

Visit Plugin Page

Using the plugin – Introduction to the Plugin Interface

Start by Installing and Activating the plugin If you have any confusions regarding the topic, here is a tutorial you can check out.

Before you start you need to insert the API key in the plugin.

For, Google Maps builder we can insert it directly while making our map:

Embed-Google-Apps-InsertAPI2

Now that your Plugin is ready to use, you can either first create a map then load it onto your post while editing/writing it. Or, you can directly make a new map while making the post in the first place. Since the process is basically the same, we will be covering the former method only.

After Installing and activating the plugin, move to the Google Maps plugin on your WordPress Admin-Dashboard. Then, click on New Map to start creating a map.

Embed-Google-Maps-Create1Using screenshots, we will explain all the important entries here:

Map Name:

Embed-Google-Maps-Plugindata1

Here’s where you insert the name of your map.

Controllers and Map-View selection:

Embed-Google-Maps-Plugindata2

This section allows you to choose what interactions a viewer is allowed while using your map. Features such as Panning, Dragging, Map-Type selection, View selection, etc. can be turned on and off here.

Zoom Control:

Embed-Google-Maps-Plugindata3

This is for customizing zoom level. This allows you to set the maximum-minimum zoom as well as the default zoom level.

Map Center:

Embed-Google-Maps-Plugindata4

This is where you specify the center location which your map uses for directional purposes. You can either setup locations/places or use custom Longitudes/Latitudes.

Map Appearance:

Embed-Google-Maps-Plugindata5

This is where you customize the map window appearance. You can change the map’s width/height, border radius as well as post alignment.

The rest are features only available for Premium features. If you decide to buy the premium version, do check out these features and experiment with them if you want.

Rest of the additions:

  • Markers: Lets you add custom markers to any location on the map. These markers can have custom animation. The premium version allows you to set an HTML description for the markers as well as use custom marker icons.
  • Polygons: You can set a polygon or a specified area to be visualized on the map using multiple markers. You insert the markers on the map by clicking on the live customizer map with the right click.
  • Polylines: This is similar to polygons, but it doesn’t highlight the area. Great for creating routes and lines.
  • Directions: This is only available on Pro version; lets you display directions to a specific location.
  • Circles: Lets you display a customized circle over a region. You can change the radius, highlight color and center location of this circle.
  • Layers: Only available for Pro version, lets you display the Traffic, Transit and Cycling layer on your map.
  • Map Styling: Only available for Pro version, lets you add effects such as Saturation, Hue, Lightness, etc. to your map.
  • Store Location: Lets you add a feature to your map that shows the store locations of any specified business.

Using the plugin – Embed Google Maps to WordPress Posts

Once done with the customization, you can add the map to your post by using the Add Google Maps button in your post-edit page. Then, you can customize the map’s appearance and directly insert it into the post.

Embed-Google-Apps-InsertMaps1

Alternatively, you can use the received shortcode on the bottom of the page of the plugin and insert it into your post just like in the above process to add your customized map to your post.

Once your post is finished, the map should be displayed accordingly on the website.

Embed-Google-Maps-Finalpreview2

Using the Widget

If you want to show the Google map permanently on your website, then using a WordPress Map widget is the way to go. By placing a Widget, you can ensure that every viewer on your website can access the location’s information or the directions without any difficulty.

The map on the widget can be accessed on any page of the website, and you don’t have to insert a shortcode into each post either.

For this demonstration, we’ll be the widget available for Google Maps by Huge-It (the same one as above.)

Customizing the Widget.

Once you’re done creating your map and editing it (as shown in the process above), you can display it using the Plugin’s widget.

After selecting whether to insert the widget in the sidebars or the footers, you can set the title for your Map preview and select the required map.

Embed-Google-Maps-Widget3

Click on Save. The map would be displayed on your website if you followed the steps correctly.

Embed-Google-Maps-Widget-Preview

The appearance and size of your map are based on your sidebar/Footer itself in this case.

Note: The using procedure of most plugins available are pretty much identical so you don’t have to worry if you don’t like this specific plugin.

More WordPress Google Maps plugins Worth Looking At:

2. WP Google Maps

Wp-google-maps-wordpress-plugins

One of the easiest and quick plugins to help you out when integrating locations onto your site, WP Google Maps is an awesome WordPress Google Maps plugin to use. With user-friendly interface and supplied shortcodes, this plugin is perfect to include page maps, routes, and maps on your site!

Features:

  • Easy to use and responsive maps
  • Multiple Map marker feature with further customization
  • Google Streetview support
  • roadmap, terrain, satellite and hybrid map type customization
  • Localization and language support
  • Polylines, Polygons, and Route insertion feature.

Visit Plugin Page

 

3. Maps Builder

maps-builder-maps-wordpress-plugins

Most intuitive and fastest loading Google Maps plugin for WordPress, Maps Builder is a powerfully customized plugin to meet your needs. Without using even a single code, be able to integrate individual maps onto your site in a matter of minutes!

Features:

  • Fullscreen Live Map Builder for a more hands-on approach for building customized maps.
  • Google Places API Integration along with Snazzy maps support.
  • Smooth and Optimized with a Small footprint.
  • Custom marker support and marker clustering support.
  • Import/Export features.

Visit Plugin Page

 

Concluding:

Now you’re all ready to embed Google Maps in your WordPress. Use Google Maps’ Geographical and Location services to your website’s advantage. Whether you want to show Store locations or give useful directions to readers, you are ready to do it all. So go ahead and show the way of the world to people, through your own website.

Source

About the Author:

Leave A Comment