{"id":160,"date":"2025-12-15T10:57:49","date_gmt":"2025-12-15T07:57:49","guid":{"rendered":"https:\/\/mapsfun.com\/?p=160"},"modified":"2025-12-15T10:57:49","modified_gmt":"2025-12-15T07:57:49","slug":"how-to-embed-google-maps-in-shopify","status":"publish","type":"post","link":"https:\/\/mapsfun.com\/?p=160","title":{"rendered":"How to Embed Google Maps in Shopify"},"content":{"rendered":"\n

How to Embed a Custom Google Map in Your Shopify Store<\/h2>\n\n\n\n

Displaying your store location, multiple warehouses, or event venues with a custom Google Map can build trust and help customers find you. While Shopify has basic contact forms, adding a true, customizable Google Map requires a technical approach. This guide will walk you through the manual method of embedding a custom Google Map using your own API key<\/p>\n\n\n\n

This method gives you full control but requires a Google Cloud account, API key management, and editing your Shopify theme code. Proceed with caution if you’re not comfortable with code.<\/strong><\/p>\n\n\n\n

Method 1: The Manual Google Maps API & Theme Code Method<\/strong><\/p>\n\n\n\n

This approach allows for deep customization but involves several technical steps.<\/p>\n\n\n\n

Step 1: Generate Your Google Maps API Key<\/p>\n\n\n\n

This is the foundational and most complex step.<\/p>\n\n\n\n

1.  Go to the Google Cloud Console:<\/strong> Navigate to [https:\/\/console.cloud.google.com\/](https:\/\/console.cloud.google.com\/)<\/a>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
    \n
  • 2.  Create a Project:<\/strong> Click the project dropdown and create a new project, giving it a name like “My Shopify Map”.<\/li>\n\n\n\n
  • 3.  Enable Billing:<\/strong> You must enable billing on your project. Google offers a recurring $200 monthly credit, which typically covers all usage for a standard store map.<\/li>\n\n\n\n
  • 4.  Enable the Required APIs: <\/strong>Go to “APIs & Services” > “Library”. Search for and enable these two critical APIs:\n
      \n
    •    Maps JavaScript API (to display the map)<\/li>\n\n\n\n
    •    Geocoding API (to convert addresses into coordinates)<\/li>\n<\/ul>\n<\/li>\n\n\n\n
    • 5.  Create and Restrict Your API Key:<\/strong> Go to “APIs & Services” > “Credentials”. Click “Create Credentials” > “API Key”. **This is a crucial security step:** Click on the key and restrict it to the “Maps JavaScript API” and your Shopify store’s domain under “HTTP referrers” (e.g., `https:\/\/your-store.myshopify.com`, `https:\/\/www.yourstore.com`)<\/li>\n<\/ul>\n\n\n\n

      You must enable the Maps JavaScript API in your Google Cloud project.<\/strong><\/p>\n\n\n\n

      \"\"<\/figure>\n\n\n\n

      Step 2: Add the Map Container to a Shopify Page<\/p>\n\n\n\n

      You can add the map to a specific page, like a “Visit Us” or “Locations” page.<\/p>\n\n\n\n

        \n
      • 1.  From your Shopify Admin, go to Online Store > Pages<\/strong>.<\/li>\n\n\n\n
      • 2.  Create a new page or edit an existing one.<\/li>\n\n\n\n
      • 3.  In the content editor, click on the `<\/>` (Show HTML)<\/strong> button.<\/li>\n\n\n\n
      • 4.  Add a simple div element that will act as the container for your map. Give it a unique ID.<\/li>\n<\/ul>\n\n\n\n

        html<\/strong><\/p>\n\n\n

        h2>Find Us Here<\/h2<\/span>><\/span>\n<!-- This is where your Google Map will appear --><\/span>\n<div<\/span> id<\/span>=\"map-container\"<\/span>><\/span><\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
        Step 3: Edit Your Theme Code to Inject the Map<\/p>\n\n\n\n
        This is the most technical part, where you’ll add the JavaScript that brings the map to life<\/p>\n\n\n\n
          \n
        • 1.  From your Shopify Admin, go to Online Store > Themes<\/strong>.<\/li>\n\n\n\n
        • 2.  Click on Actions > Edit code<\/strong> for your current theme.<\/li>\n\n\n\n
        • 3.  In the Layout directory, find and open the `theme.liquid` file. This file loads on every page.<\/li>\n\n\n\n
        • 4.  Just before the closing `<\/body><\/strong>` tag, add the following code. Replace `YOUR_API_KEY` with your actual restricted API key from Step 1.<\/strong><\/li>\n<\/ul>\n\n\n\n
          html<\/strong><\/p>\n\n\n
          <script<\/span>><\/span>\n\/\/ Only run the map code on the specific page where your container exists<\/span>\nif<\/span> (document<\/span>.getElementById('map-container'<\/span>)) {\n    function<\/span> initMap<\/span>(<\/span>) <\/span>{\n        \/\/ Define your locations: [Title, Lat, Lng]<\/span>\n        const<\/span> locations = [\n            ['Flagship Store'<\/span>, 40.7128<\/span>, -74.0060<\/span>],\n            ['Downtown Outlet'<\/span>, 40.7074<\/span>, -74.0113<\/span>],\n            ['Warehouse & Returns'<\/span>, 40.7211<\/span>, -74.0005<\/span>]\n        ];\n\n        \/\/ Create the map centered on the first location<\/span>\n        const<\/span> map = new<\/span> google.maps.Map(document<\/span>.getElementById('map-container'<\/span>), {\n            zoom<\/span>: 12<\/span>,\n            center<\/span>: { lat<\/span>: locations[0<\/span>][1<\/span>], lng<\/span>: locations[0<\/span>][2<\/span>] },\n            styles<\/span>: [{\"stylers\"<\/span>: [{\"saturation\"<\/span>: -100<\/span>}]}] \/\/ Optional: Grayscale style<\/span>\n        });\n\n        \/\/ Create an info window<\/span>\n        const<\/span> infowindow = new<\/span> google.maps.InfoWindow();\n\n        \/\/ Loop through locations and add markers<\/span>\n        locations.forEach(([title, lat, lng]<\/span>) =><\/span> {\n            const<\/span> marker = new<\/span> google.maps.Marker({\n                position<\/span>: { lat, lng },\n                map<\/span>: map,\n                title<\/span>: title,\n                \/\/ icon: 'https:\/\/link-to-your-custom-icon.png' \/\/ Optional custom icon<\/span>\n            });\n\n            \/\/ Add click listener to each marker<\/span>\n            marker.addListener('click'<\/span>, () => {\n                infowindow.setContent(`<h3>${title}<\/span><\/h3>`<\/span>);\n                infowindow.open(map, marker);\n            });\n        });\n    }\n\n    \/\/ Load the Google Maps API script<\/span>\n    const<\/span> script = document<\/span>.createElement('script'<\/span>);\n    script.src = `https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY&callback=initMap`<\/span>;\n    script.async = true<\/span>;\n    document<\/span>.head.appendChild(script);\n}\n<\/span><\/script<\/span>><\/span>\n\n<style<\/span>><\/span>\n    \/* Basic styling for the map container *\/<\/span>\n    #map-container<\/span> {\n        height<\/span>: 500px<\/span>;\n        width<\/span>: 100%<\/span>;\n        margin<\/span>: 20px<\/span> 0<\/span>;\n        border-radius<\/span>: 8px<\/span>;\n        border<\/span>: 1px<\/span> solid #e1e5e9<\/span>;\n    }\n<\/span><\/style<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
          This code creates a responsive, multi-marker map that automatically loads on the page where you placed the `#map-container` div.<\/strong><\/p>\n\n\n\n
          The Significant Challenges of This Method<\/strong><\/p>\n\n\n\n
          While this DIY approach is powerful, it presents major hurdles for most Shopify store owners:<\/p>\n\n\n\n
            \n
          • API Key Security Risk:<\/strong> You are personally responsible for **restricting your API key**. A leaked, unrestricted key can lead to massive, unexpected charges on your Google Cloud bill.<\/li>\n\n\n\n
          • Theme Code Vulnerability:<\/strong> Editing `theme.liquid<\/strong>` is risky. A single syntax error can break your entire site. Any mistake requires debugging code to fix.<\/li>\n\n\n\n
          • Complex Maintenance: <\/strong>To change a location or add a new pin, you must find its latitude\/longitude, edit the code in the theme editor, and save the changes\u2014a fragile and time-consuming process.<\/li>\n\n\n\n
          • Theme Update Conflicts:<\/strong> If you update your Shopify theme, your custom code in `theme.liquid` will be overwritten, and you’ll have to re-add it manually.<\/li>\n<\/ul>\n\n\n\n
            The Simple, Professional Alternative: MapsFun.com<\/strong><\/p>\n\n\n\n
            Why risk your site’s stability and spend hours on complex code when you can achieve a better result in minutes?<\/p>\n\n\n