Google Maps JavaScript API Tutorial: Add a Custom Map to Your Website

Once the Google Maps API loads, it calls the initMap function that initializes the map. If we break down our code even further, we use an empty div with an ID of map to declare where we want to render the map.

let map;
function initMap() {
	map = new google.maps.Map( document.getElementById( 'map' ), {
		center: {
			lat: 51.513329,
			lng: -0.088950
		},
		zoom: 14
	});
}

In our JavaScript, first, we set a map variable outside the function, so it is part of the global scope so that we can modify the map later. In our initMap function, we first declare a new Google Map and set it to render by calling the element with the ID of map. After that, we specify our options, which are the map’s center and the level of zoom.

We use the coordinates of the City of London, a historical landmark in the middle of London, as map center. Later on, we discuss how you can use Maps API to find coordinates of any location on the map. But for now, if you are curious, you can use latlong.net to find coordinates of any address quickly.

Map types

Now that we have a basic map, we can look at the customization options that the Google Maps JavaScript API gives us. The first option that we are going to use is map type. Google Maps support four types of maps, which are:

• roadmap: the default map that you usually see.
• satellite: satellite view of Google Maps and Google Earth, when available.
• hybrid: a mixture of roadmap and satellite view.
• terrain: a map based on terrain information, such as mountains and valleys.

In our maps options, we can add a mapType property to select the view that we want, like this:

map = new google.maps.Map(document.getElementById( 'map' ), {
	center: {
		lat: 51.513329,
		lng: -0.08895
	},
	zoom: 14,
	mapTypeId: 'hybrid'
});

For our example, we are using a hybrid map. You can experiment with different types to see which one suits your use case.

Map options

After map type, we come to map controls. Google Maps allows you to use any of its six controls in your maps. You can find a list of the controls on their website.

You can specify the control you want to use and its location if needed, like this:

map = new google.maps.Map(document.getElementById( 'map' ), {
	center: {
		lat: 51.513329,
		lng: -0.08895
	},
	zoom: 14,
	mapTypeId: 'hybrid',
	scaleControl: true,
	fullscreenControlOptions: {
		position: google.maps.ControlPosition.RIGHT_BOTTOM
	},

});

We enable scaleControl, which shows the scale of the map in the very bottom alongside Google’s copyrights, by declaring it as TRUE. And in the next line, we change the appearance of fullscreenControl from its default

[…]

Keep Reading »

This article was written by Hardeep Asrani and originally published on CodeinWP.