Adding a Google Map with a Marker to your Shopity store

Sell Online With Shopify
Trusted by millions of businesses worldwide
Sign up for a free trial and enjoy the first month of Shopify for $1.

This step-by-step tutorial walks you through how to embed a Google Map on your Shopify store. This is a great idea for businesses with a retail or office location so they can have a map on their contact page.


There are three steps to creating a Google map with a marker on your web page:

  1. Get an API key
  2. Create a new Shopify page template
  3. Add a map with a marker

You need a web browser. Choose a well-known one like Google Chrome, Firefox, Safari or Internet Explorer, based on your platform.

Step 1: Get an API key

This section explains how to authenticate your app to the Maps JavaScript API using your own API key.

Follow these steps to get an API key:

  1. Visit the Google Maps Platform page and click Get started.
  2. Select the Places product to get the APIs that are needed to work with the free themes Map section.
  3. Click Continue.
  4. The Select a project step asks you to associate a name with your use of Google’s APIs. Either create a new name or select an existing project.
  5. After agreeing to the terms of service, click Next.
  6. Create a billing account with the Google Maps Platform. A billing account is a requirement in the new Google Maps Platform. For more information, see the Google Maps Platform pricing and billing documentation.
  7. After enabling the Google Maps Platform, copy your new Google Maps API key to your clipboard.

Step 2: Create a new Shopify page template

  1. Log into your Shopify admin panel and navigate to Online Store > Themes section.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. Locate the Templates folder and click the Add a new template link.
  4. Choose a type option for your new template: select page and give the template a meaningful name, ex: map.
  5. Press the Create template button to save your new page template.

Step 3: Add a map with a marker

Open the page new template in the code editor, and the file will be populated with default code. Add the below code into after last line of this file.

Pay attention to the highlight text, replace them with your values.

And now you put the below code to where you want to appear the map.


Looking for Shopify Experts?

Hura Apps can help you take your store to the next level

Our team of experienced designers and developers can help you create a beautiful, high-converting Shopify store that will drive sales and increase customer satisfaction. From custom design to app development and optimization, we have the skills and expertise to help you achieve your eCommerce goals.

Get in touch

You may also like...

1 Response

  1. Uche says:

    Thanks for these.. it was helpful.
    Please I need your help if possible please..
    There’s a map integration done on these cuff website

    It displays the map with X & Y which buyers can select and added to their cart which will be used for their cuff customization

Leave a Reply

Your email address will not be published. Required fields are marked *