If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Shopify. How to fix missing Google Map issue

Hello! This video tutorial shows how to fix the missing Google Map in Shopify templates.

The Google Map may disappear from your online store.

shopify_fix_google_map_missing_issue_1

This happens due to the changes Google performed to their policy recently – now you need to include your personal API key to the map script to make it function.

Let’s learn how to resolve this issue.

Firstly, you need to get your personal API key.

  1. Navigate to https://developers.google.com/maps/documentation/javascript/get-api-key website and create authentication key by clicking “Get a Key” button:

    shopify_fix_google_map_missing_issue_2

  2. Select a “Create a project” option and click a “Continue” button:

    shopify_fix_google_map_missing_issue_3

  3. At the appeared screen fill in the required fields and click a “Create” button:

    shopify_fix_google_map_missing_issue_4

  4. Once it is done you will have your personal key generated:

    shopify_fix_google_map_missing_issue_5

Now, let’s add the newly generated key to the map script in your online store.

The tutorial assumes you are already logged in to your Shopify account.

  1. Navigate to the Online Store -> Themes tab:

    shopify_fix_google_map_missing_issue_6

  2. Then click on a “…” button at the upper right and choose an “Edit HTML/CSS” option:

    shopify_fix_google_map_missing_issue_7

  3. At the appeared screen click on the widget-googlemap.liquid file name under the Snippets folder to open the file for editing:

    shopify_fix_google_map_missing_issue_8

  4. Look for the following code on line 3:

    <script src="//maps.googleapis.com/maps/api/js?v=3.exp"></script>
  5. Add the following right after the question mark (?):

    key=XXXXXXXXXXXXXXXXXX&

    Here XXXXXXXXXXXXXXXXXX stands for your personal API key.

    The code should look as follows:

    <script src="//maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXX&v=3.exp"></script>
  6. After that click the “Save” button to apply the edits:

    shopify_fix_google_map_missing_issue_9

  7. Navigate to your store frontend and refresh the page to see the changes.

  8. As you can see, the map is displayed now:

    shopify_fix_google_map_missing_issue_10

This is the end of the tutorial. Now you know how to fix the missing Google Map in your Shopify template.

Feel free to check the detailed video tutorial below:

Shopify. How to fix missing Google Map issue