In this case, user wishes to display a map centering a location in his/her own web page, suppose coordinates of the location are known and the map canvas size is 500 x 500 pixel at the center of the page. The page heading and title should be “Welcome to First Map”.
Step 1:
Coordinates are (can be changed)
Latitude = 28° 37’ 58.75” = (28 + 37/60 + 58.75/3600) = 28.6329
Longitude = 77° 13’ 10.82” = (77 + 13/60 + 10.82/3600) = 77.2197
Step 2:
Type following given program in text editor
======================================================
======================================================
<html>
<head>
<title>Welcome to First Map</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
function initialize()
{
var latlng = new google.maps.LatLng(28.6329,77.2197);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:500px; height:500px"></div>
</body>
</html>
======================================================
Step 3: Save this document as “FirstMap.htm” and run the program using a browser.
Description
Output:
Description
Loading the Google Maps API
The http://maps.google.com/maps/api/js URL points to the location of a JavaScript file that loads all of the symbols and definitions.
Note that we also need to set a sensor parameter to indicate whether this application uses a sensor to determine the user's location.
Map DOM Elements
<div id="map_canvas" style="width: 100%; height: 100%"></div>
For the map to display on a web page, we must reserve a spot for it.
In the example above, we define a <div> named "map_canvas" and set its size using style attributes.
Note that this size is set to "500px by 500px".
Map Options
var myLatlng = new google.maps.LatLng(28.6329,77.2197);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
To initialize a Map, we first create a Map options object to contain map initialization variables. This object is not constructed; instead it is created as an object literal. Because we want to center the map on a specific point, we also create a latlng value to hold this location and pass this into the map's options.
We also set the initial zoom level and mapTypeId to google.maps.MapTypeId.ROADMAP.
The following types are supported:
- ROADMAP displays the normal, default 2D tiles of Google Maps.
- SATELLITE displays photographic tiles.
- HYBRID displays a mix of photographic tiles and a tile layer for prominent features (roads, city names).
- TERRAIN displays physical relief tiles for displaying elevation and water features (mountains, rivers, etc.).
google.maps.Map - the Elementary Object
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
The JavaScript class that represents a map is the Map class. Objects of this class define a single map on a page. We create a new instance of this class using the JavaScript new operator.
When you create a new map instance, you specify a <div> HTML element in the page as a container for the map. HTML nodes are children of the JavaScript document object, and we obtain a reference to this element via the document.getElementById() method.
Loading the Map
<body onload="initialize()">
While an HTML page renders, the document object model (DOM) is built out, and any external images and scripts are received and incorporated into the document object. To ensure that our map is placed on the page after the page has fully loaded, we only execute the function which constructs the Map object once the <body> element of the HTML page receives an onload event. Doing so avoids unpredictable behavior and gives us more control on how and when the map draws.
Latitudes and Longitudes
We need a way to refer to locations on the map. The google.maps.LatLng object provides such a mechanism within the Google Maps API. You construct a LatLng object, passing its parameters in the order { latitude, longitude }:
var myLatlng = new google.maps.LatLng(myLatitude, myLongitude)
Zoom Levels
Offering a map of the entire Earth as a single image would either require an immense map, or a small map with very low resolution. As a result, map images within Google Maps and the Maps API are broken up into map "tiles" and "zoom levels." At low zoom levels, a small set of map tiles covers a wide area; at higher zoom levels, the tiles are of higher resolution and cover a smaller area.
Output:
No comments:
Post a Comment