It becomes more useful when an oraganisation wants to show-case their business interests with exact locations to their clients using Google Maps.
Embedding or adding a Google map to a website is very simple. All we need is a Google API (Application Programming Interface). It is a JavaScript API that you can add to your HTML page inside the <script> tag.
<head>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>An API helps various web components to communicate with each other. It also helps developers to have access to various functionalities provided in the API’s.
The above API allows us to configure a Map using a little bit of JavaScript. Using an elaborated script, we can also show multiple locations, displaying markers to pinpoint the locations etc.
The JavaScript which will configure the map must be written at bottom of page, typically after the </body> tag, but inside the </html> section.
Here's a Google Map Example
<!DOCTYPE html>
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
<p>Showing a "Road Map" of New Delhi, the Capital of India! <br />Try with other options like Satellite or Terrain etc.</p>
<div id="Map" style="width:500px;height:380px;"></div>
</body>
<script>
function initialize() {
var mapAttr = {
// Change the Latitude and Longitude.
center: new google.maps.LatLng(28.6454414, 77.0907573),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP // Change the MapTypeId to SATELLITE OR TERRAIN.
};
var map = new google.maps.Map(document.getElementById("Map"), mapAttr);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</html>Showing a Map of "New Delhi", the Capital of India
When the HTML page is first loaded, it will call the initialize() function which will then creates a google.maps.Map() object.
The Map() function takes two parameters. The first is an id of the container where the map will be shown on the web page and the second are the options which will actually configure the map.
Syntax
var map = new google.maps.Map();
The script above has three basic but important options, which are necessary to show various locations on a map.
Center
The first option inside the mapAttr variable is the center option. This will show the defined location at the center of the map, considering the width and height of map’s container. The .LatLng() function is translated as the latitude and longitude of the location. Passing these parameters will then set the location at the center of the container.
Zoom
Specifying this option will ensure whether the map will be zoomed-in or zoomed-out when the page has actually loaded. It takes values between 0 and 22 which will set the zoom level of the map. The value 0 will show the map at the farthest, when the value is increased; the map will be zoomed-in for a closer view of the location. Value 22 is the maximum limit specified in the API. The zoom level in our demo is set as 10.
zoom: 10,
mapTypeId
The mapTypeId option will specify the type of map it will display. The map can be a Satellite image or a just a RoadMap.
Types of Map
1) ROADMAP – This is the default map type. I have used this map type in the above example.
2) SATELLITE – It will show a satellite image of the defined location.
3) HYBRID – Will show roads and cities.
4) TERRAIN – The term itself means landmark, mountains, rivers etc.
The initialize() function which we have mentioned earlier, will be called using a window event listener when the page is fully loaded. Yes fully loaded, because the map will be created and displayed only when its container (the <div> element) is first created.
google.maps.event.addDomListener(window, 'load', initialize);
Happy Coding. 🙂