Embedding a Google Map on Your Site

If done properly, an embedded Google Map can be a great addition to your website. It’s a great tool that allows your visitors get a birds-eye view of your business, read reviews, and get turn-by-turn directions directly to your front door.

Putting a Google Map on your website is a rather simple process and doesn’t need any special programming skills in order to complete.

Follow the steps below to properly install a Google Map on your website.

We’ll use Authority Networks as our example.

 

Step 1: Go to Google Maps

The first step is to go to Google’s homepage, click on the grid next to the sign in button and select Maps (see below), or go to Google Maps directly.

How to find your Google Map

Google and the Google logo are registered trademarks of Google Inc., used with permission.

 

Step 2: Search Your Location

Enter your business name or address in the search box and click the search button.

Finding your business listing in Google Maps

Google and the Google logo are registered trademarks of Google Inc., used with permission.

 

Step 3: Get your embed code

Then click the menu symbol in the top left corner to find the embed code link.

Selecting your local business listing in Google Maps

Google and the Google logo are registered trademarks of Google Inc., used with permission.

 

Click the “Share or embed map” link on the left.

Find Google Maps embed code

Google and the Google logo are registered trademarks of Google Inc., used with permission.

 

Then select Embed map.

Select embed code for Google Maps

Google and the Google logo are registered trademarks of Google Inc., used with permission.

 

Step 4: Customizing your Embedded Map

A pop-up screen should appear with the options to customize your Google Map. Here is where you select your Map settings.

Customizing your embedded map in Google Maps

Google and the Google logo are registered trademarks of Google Inc., used with permission.

Customize Map Size:
Here you can choose from one of the preset sizes or give your map your own custom dimensions.

Preview actual size:
This is where you can see how your new map will look on your website. Make sure to have the zoom and position of the map exactly how you want it.

Copy and Paste the Code:
Once you have customized your map and are ready to put it on your website, copy the <iframe> code at the top of the widget box and then paste it wherever you would like it to appear on your site. Now you’re ready to enjoy your new map!

Note: If you are doing this for a local business website, we strongly suggest you continue with Step 5.

 

Step 5: Add Schema Markup (optional)

In short, Schema.org is a collection of HTML tags that Google, Bing, and Yahoo! came together to create so webmasters can properly markup their sites so search engines can properly “digest” or crawl what’s inside. Marking up your website with the correct schema.org code can greatly increase your visibility in search engines.

Or in this case, properly label your Google map so they know which location is correct for your business.

But can’t they figure this out on their own without this additional code? In short, yes. The search engines of today have become really smart and are great in figuring out all of your business’s information when they crawl your site.

However, they don’t always get it right and schema markup makes their job a lot easier by designating which content is which and also allows your information to possibly be displayed in their knowledge graph and/or local pack (Carousel).

 

How to markup your Google Map Schema.org structured data (for a business):

In the code below, replace “yourGoogleMapsUrl” with the Google Maps URL seen in Step 3. The red code is the hasMap property of Schema that we need to use to list the map.

If you’d rather link to a shorter and more specific URL, use your Google Maps CID number URL instead.


<script type="application/ld+json">{ 
"@context": "https://schema.org", 
"@type": "Organization", 
"name": "Example Company", 
"hasMap": "yourGoogleMapsUrl"
}

When completed, make sure to test your new markup with Google’s Structured Data Testing Tool to make sure it doesn’t have any errors.

 

Embedded Google Map Example & Code

Google Map Embed Code:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d3055.107064379719!2d-105.24845268461586!3d40.02838897941221!2m3!
1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!
1s0x0%3A0x40c98e526ceaa2a2!2sInbound+Boulder!5e0!3m2!
1sen!2sus!4v1519683895604" width="800" height="400" 
frameborder="0" style="border:0" allowfullscreen></iframe>

 

Conclusion

That’s it! Now just paste the code onto your website and you’re done.

If you need help or have any questions, please say so in the comments below. If you’re in a rush or need someone to do it for you, feel free to contact us and we’ll be happy to help.

The following two tabs change content below.