{"id":78792,"date":"2017-02-08T10:29:08","date_gmt":"2017-02-08T15:29:08","guid":{"rendered":"https:\/\/www.templatemonster.com\/help\/?p=78792"},"modified":"2017-03-03T08:18:28","modified_gmt":"2017-03-03T13:18:28","slug":"shopify-fix-missing-google-map-issue","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/shopify-fix-missing-google-map-issue.html","title":{"rendered":"Shopify. How to fix missing Google Map issue"},"content":{"rendered":"<p>Hello! This video tutorial shows how to fix the missing Google Map in <a href=\"https:\/\/www.templatemonster.com\/shopify-themes.php\" target=\"_blank\" title=\"Shopify Themes\">Shopify templates<\/a>.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/5vbq9sTWSWg\"><\/iframe>\r\n<\/div>\r\n<p>The Google Map may disappear from your online store.<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_1.png\" alt=\"shopify_fix_google_map_missing_issue_1\" width=\"1247\" height=\"674\" class=\"alignnone size-full wp-image-78817\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_1.png 1247w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_1-150x81.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_1-300x162.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_1-768x415.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_1-1024x553.png 1024w\" sizes=\"(max-width: 1247px) 100vw, 1247px\" \/><\/a>\r\n\r\n<p>This happens due to the changes Google performed to their policy recently &#8211; now you need to include your personal API key to the map script to make it function.<\/p>\r\n<p>Let&#8217;s learn how to resolve this issue.<\/p>\r\n<p>Firstly, you need to get your personal API key.<\/p>\r\n<ol>\r\n\t<li>\r\n\t\t<p>Navigate to <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/get-api-key\" target=\"_blank\">https:\/\/developers.google.com\/maps\/documentation\/javascript\/get-api-key<\/a> website and create authentication key by clicking <strong>&#8220;Get a Key&#8221;<\/strong> button:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_2.png\" alt=\"shopify_fix_google_map_missing_issue_2\" width=\"1266\" height=\"298\" class=\"alignnone size-full wp-image-78818\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_2.png 1266w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_2-150x35.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_2-300x71.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_2-768x181.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_2-1024x241.png 1024w\" sizes=\"(max-width: 1266px) 100vw, 1266px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Select a <strong>&#8220;Create a project&#8221;<\/strong> option and click a <strong>&#8220;Continue&#8221;<\/strong> button:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_3.png\" alt=\"shopify_fix_google_map_missing_issue_3\" width=\"752\" height=\"393\" class=\"alignnone size-full wp-image-78819\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_3.png 752w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_3-150x78.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_3-300x157.png 300w\" sizes=\"(max-width: 752px) 100vw, 752px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>At the appeared screen fill in the required fields and click a <strong>&#8220;Create&#8221;<\/strong> button:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_4.png\" alt=\"shopify_fix_google_map_missing_issue_4\" width=\"915\" height=\"498\" class=\"alignnone size-full wp-image-78820\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_4.png 915w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_4-150x82.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_4-300x163.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_4-768x418.png 768w\" sizes=\"(max-width: 915px) 100vw, 915px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Once it is done you will have your personal key generated:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_5.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_5.png\" alt=\"shopify_fix_google_map_missing_issue_5\" width=\"796\" height=\"259\" class=\"alignnone size-full wp-image-78821\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_5.png 796w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_5-150x49.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_5-300x98.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_5-768x250.png 768w\" sizes=\"(max-width: 796px) 100vw, 796px\" \/><\/a>\t\t\r\n\t<\/li>\r\n<\/ol>\r\n<p>Now, let&#8217;s add the newly generated key to the map script in your online store.<\/p>\r\n<p>The tutorial assumes you are already logged in to your Shopify account.<\/p>\r\n<ol>\r\n\t<li>\r\n\t\t<p>Navigate to the <strong>Online Store -> Themes<\/strong> tab:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_6.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_6.png\" alt=\"shopify_fix_google_map_missing_issue_6\" width=\"1247\" height=\"662\" class=\"alignnone size-full wp-image-78822\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_6.png 1247w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_6-150x80.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_6-300x159.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_6-768x408.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_6-1024x544.png 1024w\" sizes=\"(max-width: 1247px) 100vw, 1247px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Then click on a <strong>&#8220;&#8230;&#8221;<\/strong> button at the upper right and choose an <strong>&#8220;Edit HTML\/CSS&#8221;<\/strong> option:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_7.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_7.png\" alt=\"shopify_fix_google_map_missing_issue_7\" width=\"1247\" height=\"662\" class=\"alignnone size-full wp-image-78823\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_7.png 1247w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_7-150x80.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_7-300x159.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_7-768x408.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_7-1024x544.png 1024w\" sizes=\"(max-width: 1247px) 100vw, 1247px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>At the appeared screen click on the widget-googlemap.liquid file name under the Snippets folder to open the file for editing:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_8.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_8.png\" alt=\"shopify_fix_google_map_missing_issue_8\" width=\"1247\" height=\"674\" class=\"alignnone size-full wp-image-78824\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_8.png 1247w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_8-150x81.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_8-300x162.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_8-768x415.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_8-1024x553.png 1024w\" sizes=\"(max-width: 1247px) 100vw, 1247px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Look for the following code on line 3:<\/p>\r\n\t\t<pre>&lt;script src=\"\/\/maps.googleapis.com\/maps\/api\/js?v=3.exp\"&gt;&lt;\/script&gt;<\/pre>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Add the following right after the question mark (?):<\/p>\r\n\t\t<pre>key=XXXXXXXXXXXXXXXXXX&amp;<\/pre>\r\n\t\t<p>Here XXXXXXXXXXXXXXXXXX stands for your personal API key.<\/p>\r\n\t\t<p>The code should look as follows:<\/p>\r\n\t\t<pre>&lt;script src=\"\/\/maps.googleapis.com\/maps\/api\/js?key=XXXXXXXXXXXXXXXXXX&amp;v=3.exp\"&gt;&lt;\/script&gt;<\/pre>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>After that click the <strong>&#8220;Save&#8221;<\/strong> button to apply the edits:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_9.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_9.png\" alt=\"shopify_fix_google_map_missing_issue_9\" width=\"1247\" height=\"674\" class=\"alignnone size-full wp-image-78825\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_9.png 1247w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_9-150x81.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_9-300x162.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_9-768x415.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_9-1024x553.png 1024w\" sizes=\"(max-width: 1247px) 100vw, 1247px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>Navigate to your store frontend and refresh the page to see the changes.<\/p>\r\n\t<\/li>\r\n\t<li>\r\n\t\t<p>As you can see, the map is displayed now:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_10.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_10.png\" alt=\"shopify_fix_google_map_missing_issue_10\" width=\"1247\" height=\"674\" class=\"alignnone size-full wp-image-78826\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_10.png 1247w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_10-150x81.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_10-300x162.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_10-768x415.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_fix_google_map_missing_issue_10-1024x553.png 1024w\" sizes=\"(max-width: 1247px) 100vw, 1247px\" \/><\/a>\t\t\r\n\t<\/li>\r\n<\/ol>\r\n<p>This is the end of the tutorial. Now you know how to fix the missing Google Map in your Shopify template.<\/p>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=5vbq9sTWSWg?width=1280&amp;height=720\" rel=\"prettyPhoto\">Shopify. How to fix missing Google Map issue<\/a>","protected":false},"excerpt":{"rendered":"<p>Hello! This video tutorial shows how to fix the missing Google Map in Shopify templates.<\/p>\n","protected":false},"author":68,"featured_media":78828,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1771],"tags":[2470,1113,777,2419],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/78792"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/68"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=78792"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/78792\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/78828"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=78792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=78792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=78792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}