Helping customers or clients find your real-world store is essential to maximizing your in-person sales. You can add your business to Google Maps using Google My Business. But you can also embed Google Maps into your website – e.g., your contact page.

It’s easier than it sounds.

To embed Google Maps in websites is a simple way to help consumers locate your business. With more than 150 million users accessing Google Maps monthly, you want to tap into this user base. After all, it’s a go-to way to find businesses and companies, whether you’re a customer, client, or even a prospective employee.

embed google map, embed google maps in website

In this article, we’ll explain how to embed Google Maps in websites – be it a company site or local store.

Elevate your marketing! Schedule a free consultation to increase sales with SEO and PPC today!

How to embed Google Maps in websites

There are two different ways to embed Google Maps in a website: HTML code or an API key.

Using HTML code

Google Maps has “Share or embed map” feature integrated into their system. You use the map’s HTML code inside your website’s HTML code to create a direct link to Google Maps on the page.

  1. Go to google.com/maps.
  2. Find the location you want to embed and select it.
  3. Click the three horizontal lines in the menu tab in the top left-hand corner.
  4. Select the “Share or embed map” option.

You can use the share link to send or share the link on social media, like Facebook or Twitter, or other compatible platforms.
To add the link to your website, click on the “Embed a map” tab.

  1. Decide how big you want the map to be in the left-hand drop-down tab in the pop-up menu: Small, Medium, Large, or Custom Size
  2. Select the “COPY HTML” option, and paste it into the HTML section of your website.
  3. You can place the map anywhere you want on your webpage. However, by embedding a map, you agree to abide by Google’s terms of service. You also won’t have access to all Google Map’s features in an embedded map, such as live traffic information.

Recommended blogs: Top 20 Out of the Box Ideas to Increase Sales and What is SEO? A Beginners Guide to Search Engine Optimization.

Using an API key to Embed Google Maps

You’ll need some proficiency with coding to implement this method.

Step 1: Generate an API key

  1. Go to the Google Maps section of the Google Cloud Platform.
    (You’ll need to have Enabled APIs when you set up a project)
  2. In the left-hand menu, select “Credentials”.
  3. Click on “+ CREATE CREDENTIALS”.
  4. Select “API key” from the menu, and copy the API that appears (you’ll need it later).

Step 2: Create code to make the map functional

  1. Decide on the map styling code for your page.
    <style>
    #map {width: 100%;

    height: 400px;

    background-color: gray;

    }

    </style>

     

  2. Add map script with the coordinates of your business.
    <script>function initMap() {

    var macc = {lat: <latitude>, lng: <longitude>};

    var map = new google.maps.Map(

        document.getElementById(‘map’), {zoom: 15, center: macc});

    var marker = new google.maps.Market({position: macc, map: map});

    }

    </script>

Step 3: Add Google script into HTML document

  1. Add the API key into the script async below, replacing “YOUR_API_KEY”.
    <script async
        src=”https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&callback=initMap”>
    </script>
  2. Add the script into the HTML document to complete.

You need to use the initMap() function, as Google needs this to initialize and add where the map loads. Inside this function, it should contain the latitude and longitude of the location.

Once you’re finished, you’ve got a responsive map ready for your customers to use.

Recommended blogs: How to Create a Content Marketing Funnel That Converts and What is Copywriting? How to Increase Sales with Digital Copywriting.

Why Embed Google Maps to your website?

Perhaps you’ve got a specific purpose for which you want to add Google Maps. If not, here are some reasons you should embed Google Maps on websites.

Find your store

All local businesses should prioritize including an embedded Google Maps on their website. Screenshots from Google Maps are helpful, but they provide nowhere near the level of detail of a fully operational embedded map. For example, a customer can scroll to see how far your store is from their home.

Being able to locate your store will increase your in-store footfall, sales, and profits. It’s a simple way to link your online presence with your real-world business.

Recommended blogs: How to Get Traffic to a New Shopify StoreBrand Awareness Strategy Ideas to Grow Your Business, and 5 Effective Online Marketing Ideas for Small Businesses.

Add value to your contact page

Listing an address is one thing, but your customer will only head over to Google Maps and search anyway. We’ve got a rule in marketing – minimize the steps the customer needs to take. Every extra click or search leads to lost customers.

By adding an embedded Google Maps app, you can add value to your contact page and save your customer time. It’s critical if your business is a little out the way.

Demonstrate routes

Some businesses are out to be helpful. If you sell hiking shoes or running tops, perhaps you want to recommend walks or runs for your customers to try. (It makes an excellent blog post.) There’s no better way to display such information than with a highlighted route in Google Maps.

Recommended blogsWhat is Digital Marketing? The Fundamentals of Digital in MarketingThe Benefits of Google My Business, and How to Find a Sitemap for my Website.

Learning to embed Google in a website is simple

It can look a little daunting. But, go through the above guide step-by-step, and you’ll end up with a perfectly embedded map for your customers to appreciate. It’s handy and helpful, and it’ll also boost your business. It’s worth trying the API technique as it will give you significantly more functionality than other options.

Of course, if you’re really struggling, you can always contact an expert to help. We’ve got experience configuring websites and embedding Google Maps. And we’re more than happy to help.