Using Google Maps in HTML
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”>
</div>
How to create a function to set the map properties by creating a function. Here, the function is myMap (). One must 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.
- 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…
<!DOCTYPE html>
<html>
<head>
</head>
<body>
……………….
</body>
</html>
Step 2: Load the API
Load or include the Google Maps API using the script tag as shown below –
<!DOCTYPE html>
<html>
<script src = “https: //maps.googleleapis.com/maps.api/js” ></script>
</head>
<body>
……………………..
</body>
</html>
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
One can create a map by instantiating the JavaScript class called Map. While instantiating this class, one must pass an HTML container to hold the map and the map options for the required map.
Step 6: Load the map:
Finally load the map by calling the loadMap () method or by adding DOM listener.
Conclusion:
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.