TechnoBuzz

A Techno Blog, mainly about Java

Google Maps

This page was in French.
Translate it to english here .
Get Geo here
Hello World
Google Maps

Tutorial GoogleMaps

                

// Fonctions récupérées sur le site A List Apart http://www.alistapart.com

// this function is needed to work around
// a bug in IE related to element attributes
function hasClass(obj) {
var result = false;
if (obj.getAttributeNode(“class”) != null) {
result = obj.getAttributeNode(“class”).value;
}
return result;
}

function stripe(id) {
// the flag we’ll use to keep track of
// whether the current row is odd or even
var even = false;

// if arguments are provided to specify the colours
// of the even & odd rows, then use the them;
// otherwise use the following defaults:
var evenColor = arguments[1] ? arguments[1] : “#fff”;
var oddColor = arguments[2] ? arguments[2] : “#eee”;

// obtain a reference to the desired table
// if no such table exists, abort
var table = document.getElementById(id);
if (! table) { return; }

// by definition, tables can have more than one tbody
// element, so we’ll have to get the list of child
// <tbody>s
var tbodies = table.getElementsByTagName(“tbody”);

// and iterate through them…
for (var h = 0; h

You perhaps heard speak about Google Maps, in particular if you are
interested in Ajax because this site is often quoted in example in the
works concerning the subject. Perhaps you know less than Google
places at the disposal API which makes it possible to integrate Google
Maps on your site. This article is a small introduction to this
API.

Installation

To be able to benefit from API Google Maps, it is
necessary to be recorded on the site of
Google. Read the conditions of
use before signing to ensure you that you will respect the terms of
them. At present, it is not possible to use the API one starting
from a private environment, you must absolutely have a public domain
name.

Once recorded, Google provides you a key to be included in
each page using the API one, in the following way:

< script 
src="http://maps.google.com/maps?file=api&v=1&key=VOTRE_CLE_ICI"
type="text/javascript"></script >

To include a chart

API Google Maps is used in Javascript as you could guess it by
observing the preceding code of inclusion. The GMap class allows to create a chart:

VAr map = new GMap(document.getElementById("map"));

The manufacturer takes in parameter an element
HTML whose id is worth map.
It is within this element that the chart will be posted.
Thus, if the code is written:

... < style type="text/css" > # map {width: 600px; 
height: 400px; }... < div id="map"></div >

The chart will be posted within a framework of
600×400 pixels. It is possible to reach the following
functionalities of the GMap class (nonexhaustive list):

 

 

   

   

 

 
 

 
 

 

 

 

 

 

   

   

 

 

   

   

 

 

 

 

 

   

   

 

 

   

   

 

 

   

   

 

 

   

   

 

 

   

   

 

 

   

   

 

 

 

 

 

 

 

 

   

   

 

 

 

 

 

   

   

 

 

 

 

 

 

 

 

 

 

   

   

 

 

GMap
Method Description
addControl Allows to add a control on the chart
addOverlay Add an object on the chart
centerAndZoom Center and zoome the chart on a given point
centerAtLatLng Center the chart on a given point
clearOverlays Remove all the objects which were added on the chart
disableDragging Decontaminate the possibility of moving by draggant the
chart
disabeInfoWindow Prevent the posting of information on the chart
draggingEnabled Allows to determine if the "drag" is active
enableDragging Activate the possibility of moving by draggant the
chart
enableInfoWindow Activate the posting of information
getCenterLatLng Turn over the point on which the chart is centered
getCurrentMapType Turn over the type of posting of the chart
(Carte/Satellite/Mixte).
getMapTypes Turn over a table containing the possible types of
sight.
getZoomLevel Turn over the level of the zoom
hideOverlays Mask the objects present on the chart
infoWindowEnabled Allows to determine if the posting of information is
possible
removeOverlay Withdraw the specified object of the chart
setMapType The type of posting of the chart (Carte/Satellite/Mixte)
defines.
showOverlays Post the objects which were added on the chart
zoomTo Zoome according to the specified level

A geographical point is simply determined by its
longitude and its latitude. In API Google Map, it is represented
by an authority of the GPoint class:

VAr montBlanc = new GPoint(6.864372, 45.832554);

In addition, there are three types of sight for the posted
chart:

  • Chart: post the chart in the form of drawing.
    Represented by the constant G_MAP_TYPE
  • Satellite: post the chart according to a
    satellite sight Représentée by the constant G_SATELLITE_TYPE
  • Mixed: combine the two preceding sights
    Représentée by the constant G_HYBRID_TYPE

The method setMapType makes it possible to define the sight to be used:

map.setMapType(G_SATELLITE_TYPE);

 

It is also possible to regulate the level of the zoom of
posting of the chart. The level of zoom is a variable entirety
from 0 to 15, 0 being the sight on the level of the street, 15 that on
the level of planet. Here an example which centers the chart on
the Mount Blanc with a level of zoom being worth 5:

< HTML > < head > < script 
src="http://maps.google.com/maps?file=api&v=1&key=VOTRE_CLE_ICI"
type="text/javascript"></script > < style type="text/css" > # map
{width: 600px; height: 400px; } </style >
</head > < body > < div id="map"></div > < script
type="text/javascript" > VAr map = new
GMap(document.getElementById("map")); VAr montBlanc = new
GPoint(6.864372, 45.832554); VAr niveauZoom = 5;
map.centerAndZoom(montBlanc, niveauZoom);
map.setMapType(G_SATELLITE_TYPE); </script > </body >
</HTML >

You can see this code in action here. Unfortunately, all the
planet is not displayable on all the levels of zoom nor according to
all sights’. Only the United States and the United Kingdom seem
covered completely. Wait and see for the other countries…

To post controls of positioning

While playing with the preceding code, you
perhaps noted that it was possible to move on the chart using the left
button of the mouse. This behavior can be decontaminated with
the method disableDragging.
It is also possible to post controls of navigation making it
possible to move and/or vary the level of zoom like modifying the type
of sight.

To post controls of navigation, you can use the following
code:

map.addControl(new GLargeMapControl());

The GLargeMapControl class represents at the same time controls of navigation and
zoom. There is also a GSmallMapControl
class and a GSmallZoomControl class making it possible
respectively to control displacements and the level of zoom.
Control making it possible to modify the posted sight is defined
by the GMapTypeControl
class.

To include information

A functionality interesting of Google Maps is to
make it possible to post infos-bubbles on the chart (at the same time
in truth). To this end, one defines before a marker using the GMarker class. For example:

VAr marker = new GMarker(montBlanc); 
map.addOverlay(marqueur);

The method addOverlay adds the marker to the chart, the marker being represented
by a preset image (but which can be personalized via the API one).
The quantity of displayable markers on the chart is not limited,
nevertheless, more one adds some and more the performances decrease.
If one wishes to post a information-bubble, one can do it
through a marker. For example:

marqueur.openInfoWindowHtml("<b>Le Mount Blanc!</b >");

Instead of a text HTML, it is possible to post a
sight of the chart in the window of information:

marqueur.showMapBlowup(2, G_SATELLITE_TYPE);

2 is the value of the level of zoom
to be used. The complete example below illustrates the points
approached until now.

< HTML > < head > < script 
src="http://maps.google.com/maps?file=api&v=1&key=VOTRE_CLE_ICI"
type="text/javascript"></script > < style type="text/css" > # map
{width: 600px; height: 400px; } </style >
</head > < body > < div id="map"></div > < script
type="text/javascript" > VAr map = new
GMap(document.getElementById("map")); VAr niagaraFalls = new
GPoint(-79.07585600, 43.07891600); VAr niveauZoom = 5;
map.centerAndZoom(niagaraFalls, niveauZoom);
map.setMapType(G_MAP_TYPE); VAr marker = new
GMarker(niagaraFalls); map.addOverlay(marqueur);
marqueur.showMapBlowup(2, G_SATELLITE_TYPE); </script >
</body > </HTML >

It is also possible to draw lines on the chart
thanks to the GPolyline class. The API one on the other hand does not provide an
algorithm which would make it possible to trace a way between a point
A and a point B. The manufacturer of the class takes in
parameter a table of points to be connected. To add the line to
the chart, use then the method
addOverlay as for the markers.

Management of the events

It is possible of capture a certain number of
events related to the posted chart. The following table
summarizes the principal ones:

Events on the GMap objects
Event Description
click(overlay, not) When the user clicked on the chart. If an object
were clicked, the object is referred by
overlay, if not the point on which the
user clicked is referred by
point.
infowindowopen() When an bubble-information is called
infowindowclose() When an bubble-information is closed
maptypechanged() When the sight of the chart is modified
move() When the user moves the chart
movestart() When the user starts to move the chart
moveend() When the user finished to move the chart
zoom(zoomPrecedent, zoomActuel) When the user changes the level of the zoom.
addoverlay(overlay) When an object was added on the chart. The added
object is provided in parameter.
removeoverlay(overlay) When an object is withdrawn from the chart. The
removed object is provided in parameter.
clearoverlays() When all the objects added on the chart are removed.

API Google Maps provides the GEvent class with an aim of managing the
events. If for example, you wish to manage the clicks on the
chart, you can define your manager in the following way:

VAr clickListener = GEvent.addListener(map, "click", 
function(overlay, not) {// here one manages the event});

The method addListener takes in parameter the object to be supervised (here, the
chart), the event to be supervised and the function which manages the
event. The API one is sufficiently "intelligent" to adapt to the
various navigators Web. The markers can also be the subject of
events:

Events on the GMarker objects
Event Description
click() When the user clicks on a marker
infowindowopen() When bubble-information associated with the marker is
open
infowindowclose() When bubble-information associated with the marker is
closed

The example below illustrates the management of
certain events. It shows how to add or remove markers on the
chart when the user clicks above:

< HTML > < head > < script 
src="http://maps.google.com/maps?file=api&v=1&key=VOTRE_CLE_ICI"
type="text/javascript"></script > < style type="text/css" > # map
{width: 600px; height: 400px; } </style >
</head > < body > < div id="map"></div > < script
type="text/javascript" > VAr map = new
GMap(document.getElementById("map")); VAr niagaraFalls = new
GPoint(-79.07585600, 43.07891600); VAr niveauZoom = 13;
map.centerAndZoom(niagaraFalls, niveauZoom);
map.setMapType(G_MAP_TYPE); map.addControl(new
GLargeMapControl()); GEvent.addListener(map, "click",
function(overlay, not) {yew (overlay! = null)
{map.closeInfoWindow(); map.removeOverlay(overlay); } else
{VAr marker = new GMarker(point); map.addOverlay(marqueur);
marqueur.showMapBlowup(5, G_SATELLITE_TYPE); }});
</script > </body > </HTML >

This example is published here.

Here for this small introduction to API Google Maps.
There are other functionalities, as the possibility of modifying
the icon of a marker but I let the readers seek by themselves through
resources quoted below or to discover on the Web.

AJAX and Google Maps

It is possible to badly imagine not
functionalities related to the integration of a chart on a site, for
example, to post courses, places where apartments are to be rented or
sell, etc. The principal force of Google Maps is that navigation
through the chart is made in a fluid way and this, thanks to AJAX.
It is of course possible to profit from this technology on the
page integrating the chart. The small project describes in this
section (and displayable here)
famous how to integrate the unit.

Our object is to post on a chart of the places chosen by
the user in a data base (in a real project, the application would
communicate rather with a geocoder via a service Web to recover the geographical co-ordinates
of the place). When the user clicks on a place, a
information-bubble is posted automatically on the chart. It is a
relatively simple example and one can easily supplement it by richer
functionalities, the idea being to show rather here how to carry out
asynchronous requests with API Google Maps.

The GXmlHttp class allows to carry out asynchronous requests independently of
the navigator used. Its use is as simple as the remainder the
API one:

VAr request = GXmlHttp.create(); VAr query = 
"getCoordonnees.php?id =" + id; request.open("GET", query,
true); request.onreadystatechange = displayInfo;
request.send(null);

The method create allows, as its name indicates it, instancier an
asynchronous request. The open method
makes it possible to carry out the request while
passing to him in parameter the method of sending (here, GET), the
page to be carried out on the waiter ("getCoordonnees.php"). One
associates a manager of event on the request: the method displayInfo
is destined for each time
the event onreadystatechange is received. The request is carried out by the
operation send.

The call with the getCoordonnees.php page turns over a xml page generated
dynamically and containing information on the place selected by the
user. It acts here of a page PHP but this can be carried out
very well with another technology waiter. If, for example, the
user clicks on the Eiffel Lathe, following file XML is turned over:

<?xml version="1.0" encoding="ISO-8859-1"? > < map >
< not > < nom>Tour Eiffel</nom > < pays>France</pays > <
description><![CDATA[Un of the monuments of Paris]]></description > <
longitude>2.293943</longitude > < latitude>48.858594</latitude > </not
> </map >

Once the received data, the method displayInfo is called:

function displayInfo() {yew (request.readyState == 4) {VAr
response = request.responseXML; VAr root =
response.documentElement; VAr longitude =
root.getElementsByTagName("longitude")[0 ]; VAr latitude =
root.getElementsByTagName("latitude")[0 ]; VAr not = new
GPoint(GXml.value(longitude), GXml.value(latitude)); VAr message
= "< B >" + root.getElementsByTagName("nom")[0].firstChild.data + "</B
>"; message + = "< Br/>" +
root.getElementsByTagName("description")[0].firstChild.data; VAr
marker = new GMarker(point); map.addOverlay(marker);
marker.openInfoWindowHtml(message); }}

In truth the data are really received only when request.readyState has value 4. At this time, one
posts information concerning the selected place. In a real
application, one will not forget to validate the received data.

Conclusion

Google Maps has API simple of use.
Principal disappointment relates to the incomplete cover of the
whole of the countries of the sphere, reducing the functional
possibilities being able to be developed on the French territory for
example. Nevertheless, it is not absolutely necessary one
question of time and he east cannot be not useless to throw an eye on
this API…

Resources

 

window.onload = function() {
stripe(‘tableau1’, ‘#fff’, ‘#edf3fe’);
stripe(‘tableau2’, ‘#fff’, ‘#edf3fe’);
stripe(‘tableau3’, ‘#fff’, ‘#edf3fe’);
}

Advertisements

December 10, 2005 - Posted by | Web Design

No comments yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: