Googlen kartta www-sivulle

Tulipa tehtyä pari kokeilua Googlen kartoilla, Comenius-partnerit ja eLukion koulut.

Kartan lisääminen on ”helppoa”. Hanki ensin API avain Googlelta, jotta voit lisätä kartan omalle sivullesi. Avain on palvelimella hakemistokohtainen, joten pidä kartat omassa hakemistossaan.

Peruskartta saadaan html-koodilla (korvaa riville 7 abcdefg:n tilalle oma API-avaimesi)

[html]




Google Maps JavaScript API Example





[/html]

Sinulla pitäisi olla nyt yksinkertainen sivu, jossa on kartta. map.setCenter(new GLatLng(37.4419, -122.1419), 13); kertoo, missä kartan keskipiste sijaitsee ja 13 on zoomaustaso.

Kartan ulkonäköä voidaan muuttaa seuraavilla keinoilla:
[html]
var map = new GMap2(document.getElementById(”map_canvas”));
map.setMapType(G_SATELLITE_MAP);
[/html]
Asettaa kartan tyypin. Mahdolliset arvot ovat G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP, G_DEFAULT_MAP_TYPES.

Komennoilla
[html]
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
[/html]
saadaan lisättyä painikkeita kartan ohjaamiseksi. Mahdolliset arvot ovat GLargeMapControl, GSmallMapControl, GSmallZoomControl, GScaleControl, GMapTypeControl, GHierarchicalMapTypeControl, GOverviewMapControl.

Palleroita saadaan lisättyä HTML-koodilla
[html]
// me
var piste = new GLatLng(64.145247,25.370607);
var me = new GMarker(piste);
map.addOverlay(me);
[/html]

GLatLng arvot saadaan maps.google.comin avulla hakemalla ensin haluttu paikka ja valitsemalla ”Tee linkki tähän sivuun”. Koodista etsitään sitten parametri ll= ja siitä saadaan koordinaatit pisteelle. Sivu, josta voi olla apua (copy pastaa koko html-koodi lootaan ja sivu palauttaa ll arvon)

screenshot171.png

Tuolla tavalla ei kannata lisätä monia pisteitä, vaan kannattaa käyttää kml-tiedostoa. Se sisältää tiedot useista paikoista:
[code]

1
eLukio

Haapaveden lukio


25.366365,64.140471


25.366365
64.140471



[/code]

Kyseinen kml-tiedosto on tehty North Gates kml-editorilla, mutta periaatteessa sen voisi käsinkin ”helposti” tehdä.

Kml-tiedosto saadaan ladattua kartan tiedoiksi geoXml:n avulla:
[html]
function load() {
if (GBrowserIsCompatible()) {

geoXml = new GGeoXml(”http://oversti.org/eLukio.kml”);

var map = new GMap2(document.getElementById(”map”));
map.setCenter(new GLatLng(64.614459,27.13623), 7);
map.setMapType(G_HYBRID_MAP);
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());

map.addOverlay(geoXml);
}
}
[/html]

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *