Google Maps is a free mapping service by Google that provides various types of geographical information. Using google maps, one can search for places or get directions, view and navigate through horizontal and vertical panoramic street level images.
Google maps provides an API using which one can customize the maps and the information displayed on them.
HTML Google Maps:
HTML Google Map is used to display maps on the web page. One can simply add a map on the basic HTML page.
- Set the Map Size:
One can set the map size by using the following syntax:
<div id=” map” style=” width; height”>
- map Options: 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).
- map Type Id: It specifies the map type to display. The following map types are supported: Road map, satellite, Hybrid, and Terrain.
Steps to Load the Map on a Web page:
Follow the steps given below to load a map on a web page-
Step 1: Create an HTML page
Create a basic HTML page with head and body tags as shown below…
Step 2: Load the API
Load or include the Google Maps API using the script tag as shown below –
<script src = “https: //maps.googleleapis.com/maps.api/js” ></script>
Step 3: Create the Container
To hold the map, one must create a container element, generally the <div> tag (a generic container) is used for this purpose. Create a container element and defines its dimensions as shown below-
<div id = “sample” style = “width, height,></div>
Step 4: Before initializing the map, one must create a map Options object (it is created just like a literal) and set values for map initialization variables. A map has three main options, namely, center, zoom, and map Type Id which is mentioned above.
Step 5: create a Map Object
Step 6: Load the map:
Finally load the map by calling the loadMap () method or by adding DOM listener.
It is likely that Google Maps will have a large coverage of users soon as mapping technology is getting accessible to everyone with the aid of internet. Google maps is one of the innovations in the decade that brings great improvements of one’s lives.