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.
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.
-
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>
.
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.
- Step 3: Insert the Embed code you copied from your Google Map.
-
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.
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.
- Step 3: Click Share once you have the map you would like to use.
- Step 4: A window will be shown as below:
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.
- 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.
- Step 6: This will open a window with an embed link. Copy the code.
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.
- Step 3: Insert the Embed code you copied from your Google Map.
-
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.
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.
- 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!