We have learned so far how to insert a Google Map your site, focusing on specific geographic coordinates . We learned how to put some controls (the arrows, zoom, scale) and a dialog box at the point where the map is centered. The next
'esigenza becomes the view of the particular points on our map.
According to the code of Google Maps, all that can be identified by geographic coordinates is defined Overlay . A special type of Overlay is the marker, that is the single point position on a map. Other overlay are, for example polylines (sets of points forming a line) and polygons (polygons). The list does not end here, but in this post we will focus only on the first.
example that I propose, on a Google Map markers are displayed on the schools I attended (elementary, middle, high). Hover on each marker displays the type of school.
As in the previous example, before we begin we need the coordinates of the points that we would like to view. There may be entrusted again MyGeoPosition.com or just to point out other sites geocoding, a different alternative as this . The important thing, remember, is that the coordinates are in decimal format.
The coordinates of one of the schools I will also serve to center the map, then reuse the method
For view of the marker, however, I introduce the new method
GMarker ( coord , {title: " string"});
dove coord è il vettore bidimensionale delle coordinate, valorizzato attraverso la classe GLatLng. title è uno degli attributi opzionali di GMarker , e consente la visualizzazione di una stringa al passaggio del mouse sul marker.
A questo punto abbiamo tutti gli elementi per finire il nostro lavoro. Il risultato lo potete apprezzare qui e passiamo dunque a visualizzare il codice per intero:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> \u0026lt;head>
\u0026lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
\u0026lt;title> Visualizzazione markers its a Google Map \u0026lt;/ title > \u0026lt;script src="http://maps.google.com/maps?file=api&v=2&
key=APIKEYCHEMIHADATOGOOGLE"
type="text/javascript"> \u0026lt;/ script>
\u0026lt;script type="text/javascript"> function initialize () {
if (GBrowserIsCompatible ()) {
/ / Visualizza map mode only 'road
var map = new GMap2 (document.getElementById ("map_canvas"));
/ / ITIS G. Capellini
var center = new GLatLng (44.111508, 9.835831);
/ / Elementary Via Pascoli
var pin1 = new GLatLng (44.113902, 9.834570);
/ / Medium Via Leopardi
var pin2 = new GLatLng (44.113715, 9.833441) ;
map.setCenter (center, 16);
/ / The title option brings up a string of Gmarker
to step on the marker var marker = new
GMarker (center, {title: "Here I attended
superior "});
map.addOverlay (marker);
var marker = new GMarker (pin1, {title:" Here I attended the elementary
"});
map.addOverlay (marker);
var marker = new GMarker (pin2, {title: "Here I attended
medium"});
map.addOverlay (marker);
/ / If you want to add more markers in high
just declare a new variable (eg pin3) and copy the two lines just above this comment
replacing the variable name
/ / Add controls map.addControl
large format (new GLargeMapControl ());
/ / Add the scale
map.addControl (new GScaleControl ());}
} \u0026lt;/ script>
\u0026lt;/ head>
\u0026lt;body onload = "initialize ( ) "onunload =" GUnload () "> \u0026lt;div
id="map_canvas" style="width: 550px; height: 450px"> \u0026lt;/ div>
\u0026lt;/ body>
\u0026lt;/ html>
The example that I have proposed the display of markers is a bit 'rude. If we were to add new markers in fact we should necessarily change the above code, among other things that become difficult to read if we had to place several markers on a map.
The static display of markers is thus a major limitation, the remedies which will be used in posts to come.
