Adding a Google Map with a Marker to your Shopity store

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.

DEMO

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.

DEMO

You may also like...

Leave a Reply

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