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.
There are three steps to creating a Google map with a marker on your web page:
- Get an API key
- Create a new Shopify page template
- 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:
- Visit the Google Maps Platform page and click Get started.
- Select the Places product to get the APIs that are needed to work with the free themes Map section.
- Click Continue.
- 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.
- After agreeing to the terms of service, click Next.
- 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.
- After enabling the Google Maps Platform, copy your new Google Maps API key to your clipboard.
Step 2: Create a new Shopify page template
- Log into your Shopify admin panel and navigate to Online Store > Themes section.
- Find the theme you want to edit, and then click Actions > Edit code.
- Locate the Templates folder and click the Add a new template link.
- Choose a type option for your new template: select page and give the template a meaningful name, ex: map.
- 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script src="//maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key=GOOGLEAPIKEY"></script> <script type="text/javascript"> function initialize(){ var latitude = 13.760148; var longitude = 109.208674; var myLatlng = new google.maps.LatLng(latitude,longitude); var myOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, title:"Shopify Tips" }); } initialize(); </script> |
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.
1 | <div id="map_canvas" style="height:500px;width:100%;"></div> |
Thanks for these.. it was helpful.
Please I need your help if possible please..
There’s a map integration done on these cuff website https://www.customcuff.co/collections/homepage/products/custom-cuff?variant=31711016615997
It displays the map with X & Y which buyers can select and added to their cart which will be used for their cuff customization