How to embed a Google Map in Wordpress

Google Maps can offer powerful, user-friendly mapping technology and local business information, which includes business locations, driving directions, and even contact information.

In this guide, we will take a look at How to embed a Google Map to know more deeply about this topic.

To embed a Google Map

What is Google Maps?

Google Maps is a web-based service that can provide detailed information about geographical sites and regions all over the world. In addition to conventional road maps, Google Maps offer aerial satellite views of a wwide range of places.

Google Maps offers many services as listed below:

  • A route planner offers directions for drivers, bikers, walkers, and users of public transportation neeeding to take a trip from a particular location to another.

  • The Google Maps application program interface (API) makes it possible for web administrators to embed Google Maps into a proprietary site like a community service page or real estate guide.

  • Google Maps for Mobile offers a location service for motorists that utilizes the Global Positioning System (GPS) location of the mobile device along with data from cellular networks and wireless.

  • Google Street View gives users perrmission to view and navigate through horizontal and vertical panoramic street level images of various cities around the world.

  • Supplemental services offer images of the moon, Mars, and the heavens for hobby astronomers.

How to embed a Google Map

In Google Maps

  • Step 1: Go to Google Maps.

  • Step 2: Type in any geographic location or street address and then, tap the Search button.

Result of the search

  • Step 3: Choose Share and a popup window will be displayed as in the image below.

  • Step 4: Select Embed a map and copy the code from the box. The code will begin with <iframe>.

Copy HTML

In the WordPress.com Block Editor

  • Step 1: Modify the Page or Post you want to insert the Google Map into.

  • Step 2: Add a new HTML Block.

HTML Block

  • Step 3: Insert the Embed code you copied from your Google Map.

Insert the code

  • Step 4: Choose to Publish, or Update your page or post.

  • Step 5: You will notice the Embed code has been converted to shortcode the next time you modify your page or post.

The result

In case you are using the Classic Editor, you can switch to the HTML tab in the editor to insert the Embed code.

How to embed a Custom Map

You are allowed to embed a custom Google Map into your WordPress.com site using the instructions below.

In Google Maps

  • Step 1: Go to My Maps.

  • Step 2: Either create a new map or choose a map you have already created.

Choose a map

  • Step 3: Click Share once you have the map you would like to use.

Click Share

  • Step 4: A window will be shown as below:

Edit

In case your window says something other than “Public on the web”, tap the Change button and select Public. Tap Save to save those changes and close out of the Sharing window.

Click Save

  • Step 5: Click the More icon located next to the Share button (it can de displayed as three vertical dots), and a menu will be shown. Choose Embed on my site from that list.

a

  • Step 6: This will open a window with an embed link. Copy the code.

Click OK

In the WordPress.com Block Editor

  • Step 1: Modify the Page or Post you want to insert the Google Map into.

  • Step 2: Add a new HTML Block.

HTML Block

  • Step 3: Insert the Embed code you copied from your Google Map.

Insert the code

  • Step 4: Choose to Publish, or Update your page or post.

  • Step 5: You will notice the Embed code has been converted to shortcode the next time you modify your page or post.

Google Maps Embed converted to Shortcode

In case you are using the Classic Editor, you can switch to the HTML tab in the editor to insert the Embed code.

Additional Infomation

  • Please kindly note that DO NOT manually open the shortcode as you normally do with other services (i.e. do not begin typing the shortcode and then paste the Maps code) when adding Google Maps to your WordPress.com blog. This will not work.

  • In case your code is not working, try using a physical address. Addresses generated with longitude and latitude coordinates rather than a physical address may not give you a workable code.

  • You can add multiple maps to a particular post or page.

  • Click on the drop down menu during step 4 above to change the dimension of the map. This will automatically update the iframe code.

4 Options

  • In case you desire to have text next to the map, you can use a Columns Block to embed the code in one column, and text in the other.

Conclusion

Thank you for reading the guidance! Let’s take a look at our related posts to get more information!