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