HTML Google Maps

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

Syntax:

Set the Map Size

You can set the map size by using the following syntax:

How to create a function to set the map properties?

You can set the map properties by creating a function. Here, the function is myMap(). This example shows the Google map centered in London, England.

We have to use the functionalities of Google Maps API provided by a JavaScript library located at Google. Use the following script to refer to the Google Maps API with a callback to the myMap function.

Example:

Test it Now

Example Explanation

mapOptions: It is a variable which defines the properties for the map.

center: It specifies where to center the map (using latitude and longitude coordinates).

zoom: It specifies the zoom level for the map (try to experiment with the zoom level).

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

var map=new google.maps.Map(document.getElementById(“map”), mapOptions): It creates a new map inside the

HTML Multiple Maps

You can use different map types in a single example.

Example:

Test it Now