Google Map Tutorial in HTML

Google Maps is used in HTML to display maps on a web page. You can simply add the map to your HTML page.

Structure

<! DOCTYPE html>

<html>

<body>

<h1> First Google Map Example </h1>

<div id = ”map”> My map will go here… </div>

</body>

</html>

Adjust the size of the map

You can adjust the size of the map using the following structure:

<div id = ”map” style = ”width: 400px; height: 400px; background: gray”> </div>

How to create a function to adjust map properties?

You can adjust the properties of the map by creating a function. Here, this is myMap () function. This example shows a Google map of London based in the UK.

We need to use the Google Maps API features provided by the JavaScript library in Google. The following script refers to the Google Maps API by calling the myMap function.

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

Example

<! DOCTYPE html>

<html>

<body>

<h1> My First Google Map </h1>

<div id = ”map” style = ”width: 400px; height: 400px; background: gray”> </div>

<script>

function myMap () {

var mapOptions = map

    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>

Example explanation

mapOptions : A variable that defines map properties.

center : Specifies where the center of the map can be specified (using latitude and longitude coordinates).

zoom : the zoom level for the map is (try to test the zoom level).

mapTypeId : Specifies the type of map to display. The following map types are supported:

ROADMAP, SATELLITE, HYBRID and TERRAIN.

(var map = new google.maps.Map (document.getElementById (“map”), mapOptions: Creates a new map inside an element whose id attribute is equal to map, and variables are also transferred (mapOptions ).

Multiple maps in HTML

You can use different types of maps in one example.

Example

<! DOCTYPE html>

<html>

<body>

<div id = ”googleMap1 ″ style =” width: 400px; height: 300px; ”> </div>

<br>

<div id = ”googleMap2 ″ style =” width: 400px; height: 300px; ”> </div>

<br>

<div id = ”googleMap3 ″ style =” width: 400px; height: 300px; ”> </div>

<br>

<div id = ”googleMap4 ″ style =” width: 400px; height: 300px; ”> </div>

<script>

function myMap () {

  var mapOptions1 = map

    center:  new  google.maps.LatLng (51.508742, -0.120850),

    zoom: 9,

    mapTypeId: google.maps.MapTypeId.ROADMAP

  };

  var mapOptions2 = map

    center:  new  google.maps.LatLng (51.508742, -0.120850),

    zoom: 9,

    mapTypeId: google.maps.MapTypeId.SATELLITE

  };

  var mapOptions3 = {

    center:  new  google.maps.LatLng (51.508742, -0.120850),

    zoom: 9,

    mapTypeId: google.maps.MapTypeId.HYBRID

  };

  var mapOptions4 = map

    center:  new  google.maps.LatLng (51.508742, -0.120850),

    zoom: 9,

    mapTypeId: google.maps.MapTypeId.TERRAIN

  };

  var map1 =  new  google.maps.Map (document.getElementById (“googleMap1”), mapOptions1);

  var map2 =  new  google.maps.Map (document.getElementById (“googleMap2”), mapOptions2);

  var map3 =  new  google.maps.Map (document.getElementById (“googleMap3”), mapOptions3);

  var map4 =  new  google.maps.Map (document.getElementById (“googleMap4”), mapOptions4);

}

</script>

<script src = ”https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap”> </script>

</body>

</html>

Leave a Reply

Your email address will not be published. Required fields are marked *