G.01. Prezantim me Google Maps

Me poshte po paraqesim nje aplikacion "hello world" te googlemaps.

<!DOCTYPE html>

<html>

<head>

html { height: 100% }

body { height: 100%; margin: 0px; padding: 0px }

#map_canvas { height: 100% }

</style>

src="http://maps.google.com/maps/api/js?sensor=set_to_true_or_false">

</script>

function initialize() {

var latlng = new google.maps.LatLng(-34.397, 150.644);

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>

</html>

SIc veme re nga kodi me siper:

1. E deklarojme faqen si HTML5 nepermjet <DOCTYPE html>
2. Perfshijme ne faqe Maps API ne JavaScript nepermjet tagut script .
3. Krijojme nje element div me emrin "map_canvas" qe do te mbaje harten per efekt afishimi
4. Krijojme nje objekt JavaScript per te ruajtur atributet e hartes
5. Kriojme nje funksion JavaScript per te krijuar nje objekt "map", qe behet disponibel nga API.
6. Inicializojme objektin map nepermjet nje eventi onload ne tagun body.

Hapat e mesiperm trajtojhen me poshte:

Si te deklarojme nje faqe HTML5

Kjo realizohet nepermjet DOCTYPE .

<!DOCTYPE html>

Shume browsera do ta interpretojne permabajtjen me kete DOCTYPE ne "standards mode" , qe do me thene se faqa do te jete e pershtatshme ne me shumebrowsera. 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:

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>

</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. We've left this example as a variable set_to_true_or_false to emphasize that you must set this value to either true or false explicitly.

Map DOM Elements

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 JavaScriptdocument 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

google.maps.Map(opts? )

Description

Creates a new map using the passed optional parameters in the opts parameter.

Loading the Map

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 documentobject. 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.

View example (map-simple.html)

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 aLatLng 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. For more information, see Geocoding in the services section.

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, individual 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.

Page updated

Report abuse