Wednesday, January 12, 2011

Google Maps - JavaScript API V3 (Saying Hello World with Google Maps)

This simple Google Map shows my place- hyderabad using the JavaScript API V3
save this as a html page and enjoy...

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(17.375278, 78.474444);
    var myOptions = {
      zoom: 8,
      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:100%; height:100%"></div>
</body>
</html>

Is this code Running ? - Read more about the various components in detail.



Even in this simple example, there are a few things to note:

We declare the application as HTML5 using the <!DOCTYPE html> declaration.
We include the Maps API JavaScript using a script tag.
We create a div element named "map_canvas" to hold the Map.
We create a JavaScript object literal to hold a number of map properties.
We write a JavaScript function to create a "map" object.
We initialize the map object from the body tag's onload event.
These steps are explained below.

  • Declaring Your Application as HTML5

We recommend that you declare a true DOCTYPE within your web application. 
Within the examples here, we've declared our applications as HTML5 using the simple 
HTML5 DOCTYPE as shown below:

  • <!DOCTYPE html>

Most current browsers will render content that is declared with this DOCTYPE in "standards mode" which means that your application should be more cross-browser compliant. The DOCTYPE is also designed to degrade gracefully;
browsers that don't understand it will ignore it, and use "quirks mode" to display their content.
Note that some CSS that works within quirks mode is not valid in standards mode. 
In specific, all percentage-based sizes must inherit from parent block elements, and if any of those ancestors fail  to specify a size, they are assumed to be sized at 0 x 0 pixels. For that reason, we include the following 

<style> declaration:
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
This CSS declaration indicates that the map container <div> (named map_canvas) should take up 100% of the height of the HTML body.
 Note that we must specifically declare those percentages for <body> and <html> as well.
  • Loading the Google Maps API
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">
</script>

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 you need for using v3 of the Google Maps API. Your page must contain a script tag pointing to this URL.
The <meta> tag within this header specifies that this map should be displayed full-screen 
and should not be resizable by the user. (See Developing for Mobile Devices for more information.)
Note that we also need to set a sensor parameter to indicate whether this application uses a sensor
 to determine the user's location. 

When loading the Javascript Maps API via the http://maps.google.com/maps/api/js URL, 
you may optionally load additional libraries through use of the libraries parameter.
Libraries are modules of code that provide additional functionality to the main Javascript API 
but are not loaded unless you specifically request them. For more information, see Libraries in the V3 Maps API.

  • 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. 
Commonly, we do this by creating a named div element and obtaining a 
reference to this element in the browser's document object model (DOM).
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 "100%" which will expand to fit the size on mobile devices. 
 You may need to adjust these values based on the browser's screensize and padding. 
 Note that the map will always take its size from that of its containing element, 
 so you must always set a size on that <div> explicitly.
  • Map Options

var myLatlng = new google.maps.LatLng(-34.397, 150.644);
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. For more information on 
 specifiying locations see Latitudes and Longitudes below.
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.).


Unlike in the Google Maps V2 API, there is no default map type. 
You must specifically set an initial map type to see appropriate tiles.
For more information about Map Types, see the Map Types section. 
For most cases, however, using the basic types above is all you need to know.

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. 
(You may create more than one instance of this class - each object will define
a separate map on the 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.
This code defines a variable (named map) and assigns that variable to a new Map object, 
also passing in options defined within the myOptions object literal. 
These options will be used to initialize the map's properties. 

The function Map() is known as a constructor and its definition is shown below:
Constructor                                Description

google.maps.Map(opts? ) Creates a new map using the passed optional parameters in the opts parameter.

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.
The body tag's onload attribute is an example of an event handler. 
The Google Maps JavaScript API also provides a set of events that you can handle to determine state changes. For more information, see Map Events.

  • 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)

Note: the process of turning an address into a geographic point is known as geocoding. 
Geocoding is supported in this release of the Google Maps API. 
LatLng objects have many uses within the Google Maps API. 
The google.maps.Marker object uses a LatLng in its constructor, for example, and places a marker overlay on the map at the given geographic location.


  • 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.
You specify the resolution at which to display a map by setting the Map's zoom property, 
where zoom 0 corresponds to a map of the Earth fully zoomed out, and higher zoom levels zoom in at a higher resolution.

1 comment:

  1. hi im intrested in working with you how do i come in contact with you...please mail me thisisadix@gmail.com

    ReplyDelete

subversion video