Have you ever used a Google map on a website to discover the location? If that’s the case, this is exactly what we’re looking for to boost your business. Adding Google Maps to the WordPress site is a great way to improve the user experience and provide clients with a better understanding of your company’s location. In this article, we will show you how to add Google Maps to WordPress website with the help of our amazing plugin – Map Engine.
Basic Setup
Install Map Engine plugin
Installing the Map Engine plugin is super easy. First, download the plugin from the official WordPress plugin repository (https://wordpress.org/plugins/map-engine/) and install it by uploading it from the WordPress admin. So nothing complex here, just the standard WordPress process for installing a plugin.
Add Google Maps API key.
Now you will need to add Google Map API key in the plugins setting. If you already have a Google Maps API key setup, you can use it or follow the steps mentioned here How to generate the API key?
Once you have the Map Engine plugin installed and activated, you will see a new menu item – “Maps” in WordPress admin.
Go to Maps → Settings, enter your API key and hit Save Settings.
You can also click on the Verify API key button to confirm that the API key is working fine.
With this, you are all set to start building maps.
Creating a Google Map
Go to Maps and then click on Add New. This will open up a popup where you can add Map Title and choose the map library. For this tutorial, let’s go with Google Maps.
There appears the amazing map builder of the Map Engine plugin.
Adding Marker
Click on Add Marker button to add your first marker. This will add a new entry in the marker list and also open a new panel from where you can add further details of that marker.
There are 3 ways to add markers to the map.
- By Address: If the location you want to add is already listed on google, you can try the details like the name of the place in the Address field, and it will populate a list of related places. Just select the right one, and a marker will be added to the map at that place. You will be able to see all this with a live preview.
- By Latitude and Longitude: If you know specific coordinates of the location, then click “Latitude & Longitude”, and you will get the fields to enter the coordinates.
- Locate on map: This option allows you to add the marker precisely on the map. Click on the crosshair icon next to the address field to enable this option. If it is blue in color, then this mode is activated. Now click anywhere on the map to add the marker. You can also drag the existing marker to relocate when this mode is enabled.
There are a few more fields in the content section.
- Name: This will appear in the info window and on the marker list on the left panel of the builder.
- Display Address: Specify the address you want to show in the info window. It appears just below the title.
- Description: A multiline description will appear after the Display address in the info window.
- Image: This image will be displayed as the first item in the info window.
Styling the Marker
Once the marker is added, you can now style it.
There are two ways to style the marker. If you are going to add multiple markers and want all of them to look the same, then it is recommended to manage the styling from Map’s global settings. For this, click on the Style Tab from the Top Action bar.
And the other method is when you want to style all your markers differently, then you should go for the Individual Marker styling option. For this, you just need to click on the Style tab associated with each marker.
Here, you can change the marker’s default shape or add a custom image inside the marker shape itself. You may also alter the info window’s appearance to give each component a distinct look and feel.
Styling the Google Map
Now that you’ve added and customized all of the map components, it’s time to give the map some style. To do this, go to the top action bar and select the Setting option. There are two tabs on the setting page: Maps and Controls. Both of these tabs contain map level settings. So let’s take a closer look at each.
Map:
Here you will find settings to customize the look and feel of your map. Modify the appearance and style of your map as you wish. Select a snazzy map theme or simply paste in your own custom theme JSON. Also, from here, you can set the map dimensions like height & width and set the map’s center. Moreover, you can change the map types and create a google map with the Satellite, Terrain, or hybrid view.
Control:
This section covers how to handle the user’s engagement with maps. The majority of these settings are only active on the front end. To offer users more options for interacting with Google Maps, you may utilize various map gestures for scrolling, zooming, and panning settings.
Also, from here, you can add extra controls to the google map, like a full-screen control that lets viewers view a full-sized map. Moreover, you can also add more controls to set zoom level, street view and map types.
Now that we’ve completed the Google Map, it’s time to add it to a WordPress post or page. However, before you publish your map, take a preview of how it will appear on the front and then hit the Publish button.
Simply copy the shortcode after you’ve published your map, and then it’s time to include the map on a WordPress site.
Adding a Google Map to WordPress
To include the Google Map on your WordPress site, open the page where you want to add the Google Map and just paste the shortcode provided above into the editor.
That’s it; we have just successfully added a Google Map to your WordPress site.
Conclusion
The procedure for adding a Google Map to your WordPress site is simple. The amount of flexibility and control you want, on the other hand, is entirely up to you. However, you can alter your Google Map appearance with just a few customisations, making your website stand out from the crowd. So go ahead and add a Google Map to your WordPress site today! Check out some amazing demos for Google Map.