Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

How to Install Google Maps Maps on WordPress and Blogger

How to Install Google Maps Maps on WordPress and Blogger

- - Post a Comment


How to install Google Maps maps on a WordPress or blogger website is very easy to do. Although free, a map from Google is one of the most powerful tools to give visitors additional information that is very useful for showing the location of your business.

Google Maps offers a free mapping service that allows you to display a specific location, or directions to/from a specific location. These maps can be used free of charge to promote your business or to share information on your personal blog, travel blog, or company blog.

How to install Google Maps is also quite easy because this service already provides a special code that can be directly copied on a blog or social media platform without the need to understand coding problems. In this article, we will learn how to manually install Google Maps maps on WordPress and Blogger.

How to Add Google Maps Location Map on Blogger and WordPress

Step #1: Get Google Maps Code

Before installing a Google Maps map on a site/blog, we must first determine the location that we will embed. After that Google Maps will provide a special code according to the location we choose.

  • Open  Google Maps .
  • Enter the name of the address you want to appear in the  search bar.  Most of the input will bring up several names in the search results because of the similarity of the query used, choose one of them.
Choose the location to share
Choose the location to share
  • After getting the desired location, select the SHARE option
Click the share button to share the Google Maps location
Click the share button to share the Google Maps location
  • After that a popup will appear that looks like the image below. There are two options for displaying Google Maps on other media, but because we want to use it on a site/blog, select the EMBED MAP tab
Copy the code to install Google Maps on the website
Copy the code to install Google Maps on the website
  • Choose the map size we will use, there are four options, small (400×300 px), medium (600×450 px), large (800×600 px), and custom sizes where you can use your own sizes.

Once that's done, we just need to copy the Google Maps code prefixed by the <iframe src=.

Step #2: Installing Google Maps Code On WordPress and Blogger

There is no limit to using Google Maps maps on a site/blog, so you can install as many maps as you need. But remember! the more maps you use, the longer it takes to  load to display them all.

a. Install Google Maps on WordPress and Blogger posts/pages

  1. Log in to WordPress/Blogger and select POS
  2. Change the post editor mode on WordPress to TEXT, or HTML on Blogger.
  3. Copy the code that has been obtained
How to install Google Maps maps in WordPress
How to install Google Maps maps in WordPress

b. Installing Google Maps in the WordPress sidebar

  1. Go to the WordPress dashboard and select the VIEW menu WIDGETS
  2. Choose the CUSTOM HTML widget
  3. Copy the Google Maps code into the widget and save it.
How to put Google Maps map in WordPress sidebar
How to put Google Maps map in WordPress sidebar

c. Installing Google Maps on Blogger sidebar

  1. Select the LAYOUT menu and then select the ADD GADGET option on the Blogger sidebar.
  2. Select the HTML/JAVASCRIPT gadget
  3. Copy the Google Maps code on the gadget then save it.
How to put Google Maps map in Blogger sidebar
How to put Google Maps map in Blogger sidebar

Step #3: Creating Responsive Google Maps Views

There are times when the map that you have installed on WordPress or Blogger cannot appear perfectly on a mobile gadget even though it runs normally on a desktop display.

This can happen if you use an unresponsive theme.

To work around this, you can add a few extra lines of code to make the Google Maps map display follow the user's screen size.

But the easiest way is to use a plugin or online tools.

One way I recommend is the online tool embedresponsively because you don't need to bother installing plugins, unless you often add maps from Google Maps.

To do this, go to the embedresponsively site and copy the Google Maps code on the Google Maps tab.

After that you will get a new code in the form of a Google Maps map code that has been 'wrapped' with a certain code so that the map becomes responsive.

Step #4: Setting the Google Maps map position

By default, the map that you install directly using the Google maps code will be on the left side of the post/page, and if you add text, the text will be below the map.

To change the position of the map, there are several ways you can do.

a. Change the map position to the left/right

At first glance there will be no difference in this method because the map will both appear on the left, the difference is that you can place writing parallel to the map.

To do so, simply add the code align="left"so that your Google Maps code becomes,

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.6609286479643!2d106.82067531515024!3d-6.176126362240749!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f5d4b245de51%3A0x5223aa75a93f1f64!2sMonumen+Nasional!5e0!3m2!1sen!2sid!4v1510136166082" width="300" height="250" align="left" frameborder="0" style="border:0" allowfullscreen></iframe>

To move the map to the right, simply change it align="left"to align="right".

b. Changing the map position right in the center of the post

For this one, the method will be slightly different from the method above because we can't add align="center"to make the map in the middle position. In this case, just add a <div> tag so the code above becomes,

<div style="text-align:center"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.6609286479643!2d106.82067531515024!3d-6.176126362240749!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f5d4b245de51%3A0x5223aa75a93f1f64!2sMonumen+Nasional!5e0!3m2!1sen!2sid!4v1510136166082" width="300" height="250" frameborder="0" style="border:0" allowfullscreen></iframe></div>

Step #5: Add Schema Markup on Google Maps

For those of you who are still unfamiliar with this term,  schema markup  can be referred to as a collection of HTML tags that are universal and used by webmasters so that search engines like Google or Bing can know for sure the contents of a website/content. By adding the appropriate schema.org code  , you can provide clearer information so that in this case, search engines can accurately display the location of your business.

Is it really important to use schema markup on Google Maps maps?

Important not really important. If your business is already registered on Google My Business, you have also listed your business location on Google Map, or you have displayed a location map on social media accounts such as Facebook, then search engines are usually smart enough to know where your business is located.

However, if for some reason your business location is not displayed perfectly by search engines, this technique with  schema.org is worth trying.

To do this, we will add  schema.org code so that your code will look like the following. For example, suppose we will provide a schema for the local business map that you display.

<div itemscope itemtype="http://schema.org/LocalBusiness">
<span itemprop="name">Nama Perusahaan/Brand/Bisnis</span>

<iframe src=...(kode peta Google Maps)...</iframe>
<a itemprop="hasMap" href="http://alamat-googlemaps-kamu.com" target="_blank">Lihat Peta</a>
</div>

Once done, check with  Google's Structured Data Testing Tool to check.

Post a Comment for "How to Install Google Maps Maps on WordPress and Blogger"