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.
Select the HTML option (the second one).
Copy the IFrame Code and paste into your web page wherever you need.
- Set the height and width option of the map. Also set the scrolling option to Google map as “Yes” or “No”.
For Example :
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.
- Get API Keys on Google with your own login or signup credentials and obtain a Unique API Key.
- 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.
- 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.
- Enter multiple Locations based in your business needs.
- Then set Offset to display maps on web pages with your selected view of the map.
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.