HTML Google Maps

by

To show maps on a webpage, the HTML Google Map is used in an HTML document.

To set the Map Size:

Syntax:

<div id="map" style="width:400px;height:400px;background:grey"></div>

To create a function to set the map properties:

A function can be created to set the map properties. The Google Maps API functionalities can be used which is facilitated by a JavaScript library located at Google. To refer to the Google Maps API with a callback to the created function, the below script can be used.

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

Example:

<!DOCTYPE html>  
<html>  
<body>  
<h2>Google Map Example</h2>  
<div id="map" style="width:300px;height:300px;background:green"></div>  
<script>  
function Map123() {  
var mapOptions = {  
    center:new google.maps.LatLng(51.508742,-0.120850),  
    zoom: 10,  
    mapTypeId: google.maps.MapTypeId.HYBRID  
}  
var map = new google.maps.Map(document.getElementById("map"), mapOptions);  
}  
</script>  
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=Map123"></script>  
</body>  
</html>

Explanation:

In the above example, we are creating a function named Map123() to set the map properties.

Attributes Explanation:

mapOptions: Used as a variable to specify the properties of the map.

center: Used to define the location to center the map using the latitude and longitude coordinates.

zoom: Used to define the zoom level for a map.

mapTypeId: Used to define the map type to display. It can either be ROADMAP, SATELLITE, HYBRID, or TERRAIN type. var map=new google.maps.Map(document.getElementById(“map”), mapOptions):

Used to create a new map inside the element with id=”map”, using the passed parameters.

HTML Multiple Maps:

Example:

<!DOCTYPE html>  
<html>  
<body>  
<div id="Map1" style="width:200px;height:200px;"></div>  
<br>  
<div id="Map2" style="width:200px;height:200px;"></div>  
<br>  
<div id="Map3" style="width:200px;height:200px;"></div>  
<br>  
<div id="Map4" style="width:200px;height:200px;"></div>  
<script>  
function Map1234() {  
  var mapOpt1 = {  
    center: new google.maps.LatLng(51.508742,-0.120850),  
    zoom:9,  
    mapTypeId: google.maps.MapTypeId.ROADMAP  
  };  
  var mapOpt2 = {  
    center: new google.maps.LatLng(51.508742,-0.120850),  
    zoom:9,  
    mapTypeId: google.maps.MapTypeId.SATELLITE  
  };  
  var mapOpt3 = {  
    center: new google.maps.LatLng(51.508742,-0.120850),  
    zoom:9,  
    mapTypeId: google.maps.MapTypeId.HYBRID  
  };  
  var mapOpt4 = {  
    center: new google.maps.LatLng(51.508742,-0.120850),  
    zoom:9,  
    mapTypeId: google.maps.MapTypeId.TERRAIN  
  };  
  var x = new google.maps.Map(document.getElementById("Map1"),mapOpt1);  
  var y = new google.maps.Map(document.getElementById("Map2"),mapOpt2);  
  var z = new google.maps.Map(document.getElementById("Map3"),mapOpt3);  
  var w = new google.maps.Map(document.getElementById("Map4"),mapOpt4);  
}  
</script>  
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=Map1234"></script>  
</body>  
</html>

Explanation:

In the above example, we are using different map types in a single HTML document.