How to embed a Google Map on the Jekyll site in Shopify

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
• Use the include
• Customize the style of your map

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.