How To Add Google Maps to Your Hugo Site
- Author: Md. Saad
- Published at: October 01, 2023
- Updated at: November 09, 2024
Google Maps can make it easier for customers to find your clients' locations, establish the authenticity of their business, and improve the user experience. A map on your website can help with search engine optimization while reducing bounce rates. It can help improve your website in a variety of other ways.
Some examples of this are: adding more value to the contact page, showing the store location, and highlighting the route.
How to Add Google Maps to Your Website
There are many ways to add Google Maps to your site. In this post, we will address step-by-step procedures on how to embed responsive maps using the Google Map API on the Hugo website.
1. First, visit Google Maps and create an API for the project. Then you have to use it on your site.
2. Now, you have to add Google Maps’s API script. Copy the following code to do this and add it before your script file sources.
<script src="https://maps.googleapis.com/maps/api/js?key={{ .Site.Params.map.APIkey }}&libraries=geometry"></script>Here, {{ .Site.params.map.APIkey }} is a HUGO parameter where you add the API key that you created earlier.
3. Now we have to add some Javascript code to your script.js file. Go to your js file and add the following codes:
window.marker = null;
function initialize() {
var map;
var lat = $("#map").data("lat");
var long = $("#map").data("long");
console.log(lat, long);
var mapCenter = new google.maps.LatLng(lat, long);
var style = [
{
featureType: "water",
elementType: "geometry",
stylers: [
{
color: "#e9e9e9",
},
{
lightness: 17,
},
],
},
{
featureType: "landscape",
elementType: "geometry",
stylers: [
{
color: "#f5f5f5",
},
{
lightness: 20,
},
],
},
{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [
{
color: "#ffffff",
},
{
lightness: 17,
},
],
},
{
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [
{
color: "#ffffff",
},
{
lightness: 29,
},
{
weight: 0.2,
},
],
},
{
featureType: "road.arterial",
elementType: "geometry",
stylers: [
{
color: "#ffffff",
},
{
lightness: 18,
},
],
},
{
featureType: "road.local",
elementType: "geometry",
stylers: [
{
color: "#ffffff",
},
{
lightness: 16,
},
],
},
{
featureType: "poi",
elementType: "geometry",
stylers: [
{
color: "#f5f5f5",
},
{
lightness: 21,
},
],
},
{
featureType: "poi.park",
elementType: "geometry",
stylers: [
{
color: "#dedede",
},
{
lightness: 21,
},
],
},
{
elementType: "labels.text.stroke",
stylers: [
{
visibility: "on",
},
{
color: "#ffffff",
},
{
lightness: 16,
},
],
},
{
elementType: "labels.text.fill",
stylers: [
{
saturation: 36,
},
{
color: "#333333",
},
{
lightness: 40,
},
],
},
{
elementType: "labels.icon",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "transit",
elementType: "geometry",
stylers: [
{
color: "#f2f2f2",
},
{
lightness: 19,
},
],
},
{
featureType: "administrative",
elementType: "geometry.fill",
stylers: [
{
color: "#fefefe",
},
{
lightness: 20,
},
],
},
{
featureType: "administrative",
elementType: "geometry.stroke",
stylers: [
{
color: "#fefefe",
},
{
lightness: 17,
},
{
weight: 1.2,
},
],
},
];
var mapOptions = {
// SET THE CENTER
center: mapCenter,
// SET THE MAP STYLE & ZOOM LEVEL
mapTypeId: google.maps.MapTypeId.ROADMAP,
// REMOVE ALL THE CONTROLS EXCEPT ZOOM
zoom: 13,
panControl: false,
scrollwheel: false,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
},
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
// SET THE MAP TYPE
var mapType = new google.maps.StyledMapType(style, {
name: "Grayscale",
});
map.mapTypes.set("grey", mapType);
map.setMapTypeId("grey");
//CREATE A CUSTOM PIN ICON
var marker_image = $("#map").data("pin");
var pinIcon = new google.maps.MarkerImage(
marker_image,
null,
null,
null,
new google.maps.Size(25, 34)
);
marker = new google.maps.Marker({
position: mapCenter,
map: map,
icon: pinIcon,
title: "bizcred",
});
}
if ($("#map").length > 0) {
google.maps.event.addDomListener(window, "load", initialize);
}
4. Your Google map is almost ready to use. Now add the following HTML codes where you want to show your maps:
<div id="map" data-lat={{ .Site.Params.map.latitude }} data-long={{ .Site.Params.map.longitude }} data-pin={{ .Site.Params.map.pinImage | absURL }}>
Here {{ .Site.params.map.latitude }}, {{ .Site.params.map.longitude }} and {{ .Site.params.map.pinImage }} are HUGO Params where you add your location latitude, longitude, and the pinImage source, which will be shown over your place.
5. Finally, we have to add these parameter values. To do that, go to your config.toml file and add the following codes and add values to them:
[params.map]
APIkey = "YOUR GOOGLE MAP API"
latitude = "YOUR LOCATION LATITUDE"
longitude = "YOUR LOCATION LONGITUDE"
pinImage = "images/pin.png"
By following these steps and adjusting the code to match your specific requirements, you can seamlessly integrate interactive Google Maps into your Hugo website, offering visitors an engaging way to explore location-based information. With this integration, you can enhance your website's user experience by providing users with an interactive way to visualize and explore geographical information.
Yet confused about where to start? Look no further than Staticmania! Our dedicated team of experts will guide you through the entire process, from obtaining and setting up your API key to customizing map styles, markers, and interactive features. Let us unlock the potential of Google Maps for your website today! Contact us now to get started.
Note:
In order to use Google Maps Platform products, billing must be enabled on your account, and all requests must include a valid API key. In fact, there are some limitations to using it for free. So, it's highly recommended to carefully review the terms and conditions of the service.
