Our Engineers can Write as well

2 Simple Ways to Integrate Google Maps into your WordPress Sites

Have you ever faced the challenge of marking multiple locations on a Google Map while working on WordPress? Recently I encountered one such and wanted to share my experience with you all.

For the last few weeks, I’ve been using Google Maps more than I’ve ever done so far in my career. In my past projects, I’ve extensively used WordPress Visual Composer, which requires no additional functionalities to run on WordPress: I would call it a tamed dog, so loving and faithful. The code can easily be abstracted and generalized into a standard PHP application and used according to our requirements. Visual Composer has in fact a built-in option to integrate Google Maps, which makes the job a cakewalk.

Moreover, WordPress has multiple plugins to integrate Google Maps with Multiple Marker Location. Given below are a few such plugins:

  • Adding Google Map in WordPress
  • Google Maps Builder in WordPress
  • WP Google Maps

Though plugins make our life easier, they slow down the page considerably as the extra codes specific to plugins will be downloaded while the page loads. So, the wise option is to choose the built-in functionalities. These employ the core functions of WordPress, thereby significantly reducing the time taken for the page to load.

So bored with all my stories? Alright, what you want is right here! Scroll down to read the 2 simple ways Future Focus suggested in the title.

Method 1: Embed Iframe Code:

WordPress users often come across Iframe when they try to embed something from an external source into their WordPress sites.

Follow these simple steps to integrate Google maps into your page with the help of Iframe.

  • Enter your address in the Search box of Google Maps.

  • Click the Search Maps icon.

  • Click Share or Embed Map.

google maps
  • Select the HTML option (the second one).

  • Copy the IFrame Code and paste into your web page wherever you need.

iframe map code
  • Set the height and width option of the map. Also set the scrolling option to Google map as “Yes” or “No”.
For Example :
Google map iframecode
METHOD 2 :

Actually, Google Map API is not a single API, it’s a collection of APIs. By leveraging these APIs smartly, you can take advantage of the data that Google maintains. Also Google Maps API works fine on both mobile devices and traditional desktop browser applications. Let’s learn how to do it.

google api key
  • Get API Keys on Google with your own login or signup credentials and obtain a Unique API Key.
  • Then copy and paste your JavaScript API’s Token Key on your WordPress Theme Options Dashboard.
google map api
  • Choose the platform on which you have to integrate Google Map API’s.
  • If you choose web as your platform, then click Web.
  • Check the options provided by Google to view the Google Maps.
map selection
  • Select any one of the multiple options from Google JavaScript API’s.
  • Then select any of the templates to visualize Google Map on the web pageogle Maps.
  • On the backend of the Visual Composers, select Google Maps.
  • Select any kind of layout that will display on your web page.
google map multiple locations
  • Enter multiple Locations based in your business needs.
  • Then set Offset to display maps on web pages with your selected view of the map.
google map offset

Hope now you’ve learnt how strikingly simple it is to implement such an advanced map into your WordPress website without plugins.
I hope my article will help you add Google Maps Multiple Marker Locations API’s into your WordPress sites. For questions and feedback, please leave a comment below.

mohammed navas khan

Contributed by:

Mohammed NavasKhan
Software Engineer

Your email address will not be published. Required fields are marked *