Skip to main content

Embed a Google Map on the Jekyll site

Last updated: October 07 2024

Written and researched by experts at Avada Learn more about our methodology
By Sam CEO

Adding a map to your site can enhance user experience by providing easy directions or highlighting key locations. However, integrating it correctly on a Jekyll site within Shopify can be tricky. This guide will walk you through the steps to seamlessly embed a Google Map on your Jekyll site in Shopify, making the process simple and hassle-free.

Embed a Google Map on the Jekyll site

Embed a Google Map on the Jekyll site

Step 1: Create a Google Map API key

At the first placa, you need to create a Google Map API key on your own. Click this link to visit a detailed instruction to do this perfectly.

Step 2: Paste the key into _config.yml

After you’ve had a Google Map API key, copy it and paste it into _config.yml which is under the variable google_maps_javascript_api_key. Take a look at the example below.

...
google_maps_javascript_api_key: "YOUR_GOOGLE_MAPS_API_KEY"
...

Step 3: Create _includes/google-map.html

In this step, create a file _includes/google-map.html with the following code. It will works if you copy and paste it but remember to it should be set in CSS. You should note that the code can only be included once per page.

<div id="map" style="width:300px;height:300px;"></div>
<script>
  window.mapData = {"latitude": ,"longitude": , "zoom": };

  function initMap() {
    var myOptions = {
      scrollwheel: false,
      draggable: false,
      panControl: false,
      disableDefaultUI: true,
      zoom: window.mapData.zoom,
      maxZoom: window.mapData.zoom,
      minZoom: window.mapData.zoom,
      center: new google.maps.LatLng(window.mapData.latitude, window.mapData.longitude),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('map'), myOptions);

    var marker = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(window.mapData.latitude, window.mapData.longitude)
    });

    google.maps.event.addDomListener(window, 'resize', function() {
      map.setCenter(myOptions.center);
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=&amp;callback=initMap"></script>

Use the include

To finish up, you should pass the map a longitude, latitude, and zoom level. After you’ve done, it will be totally in use.

{% include google-map.html latitude=-45.8787605 longitude=170.5027976 zoom=5 %}

Customize the style of your map

You can customize the style of your map in the way you want it to be. There are lots of arguments you can use to meet your requirements. Tap on Snazzy Maps to view some of the suggestions for your map’s style.

Summary

To sum up, this post has shown a guide to embed a Google Map on the Jekyll site step by step. After reading this, hope that you will carry out successfully. Particularly, hope that you will take advantages of Google Map in the most effective way to get more and more visitors coming to view your site.

Sam
linkedin
Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.