If you have any requirement related to Maps in your website, one among the famous APIs is Google Maps Javascript API. There are many cool features available in it and also it’s very easy to get the knowledge on it.
In this post, I will walk through some basic features of it and also will explain how to add it to a web page.
To display a simple map in a website using this API, follow below procedure.
As we need an html placeholder to display the map, add a Div in the html, where we need to show this map and provide an ID to it to refer it through Javascript DOM.
Load the Maps API into the website. We have multiple options / attributes here, explained as below
<script async defer
src=https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap />
The ‘async’ attribute in above allows the API to load along with Page.
Once the API is loaded, it calls the Callback method provided in URL, in above example it is initMap.
If we want to call the method through Javascript after the page loaded, use below line.
google.maps.event.addDomListener(window, 'load', initMap);
Also, once we register to Google maps, we are provided an API key, we have to provide it in the URL parameter. If it’s just for demo purpose / development, we can ignore the Key for now.
We have multiple Classes in this API. Few important ones are explained as below
Maps: This class holds the Maps on the screen. We can create multiple objects of it and each one holds a map instance on the page.The Constructor has 2 parameters, one is the DOM element of the placeholder in the web page where the Map is displayed and the other one is Maps Options list. Few options are as below,
Zoom: Number ranging from 1 to 20. 1 being zoomed at maximum level, World and 20 being zoomed at minimum level, Buildings.
Center: A latlng object referring to a position the map to be centered at
Center: A latlng object referring to a position the map to be centered at
LatLng: This class represents a Point on a map, having a latitude and longitude. Constructor has 2 parameters, Latitude and Longitude values.
Marker: This class represents a marker / pointer displayed on the Map. We can add any number of Markers to a Map. This constructor takes in Options list. There are many options and below are few.
Positon: a latlng object referring to a position on the map where the pointer to be set
Map: Map object, the object of the map on which we are adding the markers
Title: title of the Marker, it is displayed upon hovering the pointer
Label: A label is the value appeared on the Pointer like , characters ‘A’,’B’ or ‘1’, ‘2’
Map: Map object, the object of the map on which we are adding the markers
Title: title of the Marker, it is displayed upon hovering the pointer
Label: A label is the value appeared on the Pointer like , characters ‘A’,’B’ or ‘1’, ‘2’
Below is the sample code containing all these steps . Copy to your local html file and run it in a browser.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps Demo</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#mapSection {
height: 100%;
}
</style>
</head>
<body>
<div id="mapSection"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var userMap;
function initMap() {
var hyderabad = new google.maps.LatLng(17.4126,78.2679);
var mapOptions = {
zoom:7,
center: hyderabad
};
userMap = new google.maps.Map(document.getElementById('mapSection'), mapOptions);
var location1 = new google.maps.LatLng(17.4510051,78.3748113);
var marker1 = new google.maps.Marker({
position: location1,
map: userMap,
title: 'Shilparamam',
label:'A'
});
var location2 = new google.maps.LatLng(17.3615687,78.4724758);
var marker2 = new google.maps.Marker({
position: location2,
map: userMap,
title: 'Charminar',
label:'B'
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
</body>
</html>
It will be appearing in web page as below.
