What are Google Maps?
Google Maps is a free web mapping service by Google that provides
various types of geographical information. Using Google Maps, one can.
- Search for places or get directions from one place to another.
- View and navigate through horizontal and vertical panoramic street level images of various cities around the world.
- Get specific information like traffic at a particular point.
Google Maps provides an API using which you can customize the maps
and the information displayed on them. This chapter explains how to load
a simple Google Map on your web page using HTML and JavaScript.
Steps to Load the Map on a Webpage
Follow the steps given below to load a map on your webpage −
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>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
..............
</body>
</html>
Step 3 : Create the Container
To hold the map, we have to create a container element, generally the
<div> tag (a generic container) is used for this purpose. Create a
container element and define its dimensions as shown below −
<div id = "sample" style = "width:900px; height:580px;"></div>
Step 4 : Map Options
Before initializing the map, we have to create a
mapOptions
object (it is created just like a literal) and set values for map
initialization variables. A map has three main options, namely,
centre,
zoom, and
maptypeid.
- centre − Under this property, we have to specify the
location where we want to centre the map. To pass the location, we have
to create a LatLng object by passing the latitude and longitudes of the required location to the constructor.
- zoom − Under this property, we have to specify the zoom level of the map.
- maptypeid− Under this property, we have to specify the type of the map we want. Following are the types of maps provided by Google −
- ROADMAP (normal, default 2D map)
- SATELLITE (photographic map)
- HYBRID (combination of two or more other types)
- TERRAIN (map with mountains, rivers, etc.)
Within a function, say,
loadMap(), create the mapOptions object and set the required values for center, zoom, and mapTypeId as shown below.
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.240498, 82.287598),
zoom:9,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
}
Step 5 : Create a Map Object
You can create a map by instantiating the JavaScript class called
Map.
While instantiating this class, you have to pass an HTML container to
hold the map and the map options for the required map. Create a map
object as shown below.
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
Step 6 : load the map
Finally load the map by calling the loadMap() method or by adding DOM listener.
google.maps.event.addDomListener(window, 'load', loadMap);
or
<body onload = "loadMap()">
Example
The following example shows how to load the roadmap of the city named Vishakhapatnam with a zoom value of 12.
<!DOCTYPE html>
<html>
<head>
<script src = "https://maps.googleapis.com/maps/api/js"></script>
<script>
function loadMap() {
var mapOptions = {
center:new google.maps.LatLng(17.609993, 83.221436),
zoom:12,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', loadMap);
</script>
</head>
<body>
<div id = "sample" style = "width:580px; height:400px;"></div>
</body>
</html>
It produces the following output −
No comments:
Post a Comment