/    /  HTML Google Maps

HTML Google Maps

 

HTML Google Map is provided to display maps on your webpage. You can simply add a map on your basic HTML page or website.

 

Syntax:

 

<!DOCTYPE html> 
<html> 
<body> 
<h1>First Google Map Example</h1> 
<div id="map">My map will go here...</div> 
</body> 
</html>

 

Set the Map Size:

 

You can set the map size also:

 

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

 

Create a function to set the map properties?

 

Set the map properties by creating a function(function is myMap()). you can use the functionalities of Google Maps API provided by a JavaScript library located at Google.

 

Example:

 

<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map" style="width:400px;height:400px;background:grey"></div>
<script>
function myMap() {
var mapOptions = {
  center: new google.maps.LatLng(51.5, -0.12),
  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=myMap"></script>
</body>
</html>

 

OUTPUT:

 

HTML Google Maps

 

mapOptions:

 

It is a variable that provides the properties for the map.

 

center:

 

It specifies where to center the map.

 

zoom:

 

It provides the zoom level for the map.

 

mapTypeId:

 

It specifies the map type to display. These map types are supported: ROADMAP, SATELLITE, HYBRID, and TERRAIN.

 

var map=new google.maps.Map(document.getElementById(“map”), mapOptions):

 

It generate a new map inside the element with id=”map”, using the parameters that are passed (mapOptions).