Adding a Google Map to your WordPress website without a plugin

In this post I’m going to show you how to add a new Google map to your website, set a location marker and apply custom styling. And all without using a plugin.

Creating the map container

We need to create a placeholder where the Google map will be shown.

I’m using a div tag with the id attribute google-map.

<div id="google-map">

Styling with CSS

The width and height of our Google map is created by styling the map container. A width and height is applied using CSS.

#google-map {
width:100%;
height:400px;
}

Google Maps API

Finally, we need to add two pieces of Javascript. The first loads the Google Maps JavaScript API.

<script src="https://maps.googleapis.com/maps/api/js"></script>

This script downloads the code required to display maps on the page. It should be added to the head tag.

Create and configure the map

The final piece of code is the JavaScript that creates the map. The code contains a function to run once the page has loaded.

<script>
function myGooglemap() {
var mapCanvas = document.getElementById('google-map');
var mapOptions = {
center: new google.maps.LatLng(54.604423,-1.383089),
zoom: 9,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(mapCanvas, mapOptions);
}

google.maps.event.addDomListener(window, 'load', myGooglemap);
</script>

Custom Marker

A custom marker is set using:

var marker = new google.maps.Marker({
position: {lat: 54.604423, lng: -1.383089},
map: map,
icon: '/big-map-placeholder.png',
title:"Blue Ice Website Design"
});

Custom Styles

Custom styling is applied with:

var styles = [
{
stylers: [
{ hue: "#2b3c4d" }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];

Final Code

Your final code might look something like this.

You can read more at: https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map