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.
