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).