Embed a Google Map on the Jekyll site
Last updated: October 07 2024
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=&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.