How can I embed Google Maps on my stockists page in Dawn Theme?

Store Design
, ,
1

Hi, I’m trying to add google maps code to my stockists page to show locations of where to find my products. However I’m no code expert and seem out of my depth (tried searching forums etc but can’t get the code to work. Can anyone help? This is the code taken from my Dawn Theme. Thanks

{
“sections”: {
“main”: {
“type”: “main-page”,
“settings”: {
“padding_top”: 28,
“padding_bottom”: 28
}
},
“image_with_text_yEbYXi”: {
“type”: “image-with-text”,
“blocks”: {
“heading_b3pxkD”: {
“type”: “heading”,
“settings”: {
“heading”: “Interested in stocking our products?”,
“heading_size”: “h2”
}
},
“text_MGTAzw”: {
“type”: “text”,
“settings”: {
“text”: “

We’re always on the look out for amazing retailers or partners to collaborate with. Get in touch below.</p>”,
“text_style”: “body”
}
},
“button_NFGccJ”: {
“type”: “button”,
“settings”: {
“button_label”: “Contact Us”,
“button_link”: “shopify://pages/contact”,
“button_style_secondary”: false
}
}
},
“block_order”: [
“heading_b3pxkD”,
“text_MGTAzw”,
“button_NFGccJ”
],
“settings”: {
“image”: “shopify://shop_images/SCCsquare.svg”,
“height”: “adapt”,
“desktop_image_width”: “medium”,
“layout”: “image_first”,
“desktop_content_position”: “top”,
“desktop_content_alignment”: “left”,
“content_layout”: “no-overlap”,
“section_color_scheme”: “”,
“color_scheme”: “”,
“image_behavior”: “none”,
“mobile_content_alignment”: “left”,
“padding_top”: 36,
“padding_bottom”: 36
}
}
},
“order”: [
“main”,
“image_with_text_yEbYXi”
],

}
2

You can create a separate page and put your embed code

<iframe src="https://storage.googleapis.com/maps-solutions-qxph4svc4k/locator-plus/xh9x/locator-plus.html" width="300" height="“300”" style="border:0;”
allowfullscreen=“”
loading=" lazy"="">
</iframe>

there, also, you can create separate page template for your new stockist page
Thanks!

3

Hi @shakespearecdls

Yes. You can embed Google Maps on your desired page using an app with minimal charge. There are lots of apps, just search the keyword ‘embed’ at Shopify App Store. You will find some apps that will embed the Google Map in your store.

I suggest using EmbedAny; you can easily paste the link of your desired map location, and it will embed the map at your store without writing a single line of code. You may embed product-unboxing videos, success-story audios, Facebook customer reviews, product user-manual PDFs, lead-generation forms, testimonial-certificate images, and more through this app, which supports 800+ platforms.

Follow the screenshot to integrate the app:

Screenshot
Screenshot1013×644 85.3 KB

And the result is:

Screenshot result
Screenshot result560×836 75.8 KB

App Link: EmbedAny Social Media w/ Link - Embed Interactive Content on Shopify | Shopify App Store
For more info: https://embedany.com/

4

Hi, @shakespearecdls

Step 1: Get a Google Maps API Key

  1. Go to Google Cloud Console.
  2. Create a project and enable Maps JavaScript API.

image
image824×515 19.5 KB

  1. Generate an API key.

image
image859×387 15.9 KB

Step 2: Add the Script to Your Theme

In your theme files, open
/layout/theme.liquid
and before the </body> tag, add:

<!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "YOUR-API-KEY", v: "weekly"});</script>
<script>
  let map;
  async function initMap() {
      const { Map } = await google.maps.importLibrary("maps");
      map = new Map(document.getElementById("map"), {
          center: { lat: -34.397, lng: 150.644 },
          zoom: 8,
      });
  }
  initMap();
</script>

Step 3: Add a Map Container

In the section or page where you want the map to appear, add:

<div id="map" style="width: 100%; height: 400px;"></div>

<style>
/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
</style>

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!
If you will unable to implement the same then I’m happy to do this for you, let me know.