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

This writing is going through how to embed a Google Map on the Jekyll site. But first, I will tell about some of the incredible benefits Google Map brings to you and the way to make use of those ones in the most optimized way. As you who establish and maintain your own website, you can take advantage of two intelligent features from Google map.

The first one is that you can create your own map on the application, or else, you can show the visitors the address of your business office or your shop. With this, the map will lead the visitors to come to your location in an easy and fast way. In addition, they will find it comfortable as they don’t have to waste time finding where it exactly is.

Another one is super important to you. Google Map helps you to SEO your business successfully. SEO local or SEO business location on Google Map is also being classified into one of the trends with great potential for future development. If there is a good investment, with SEO local you can completely occupy good positions on the search results page. Your brand will get better coverage and access to many different users include the prospects.

Because of the many beneficial things above, it’s such an ideal decision to embed a Google Map on your site. Here comes the transparent guide.

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.