Google maps na spletni strani
Dodano: Sreda, 3. Junij 2009Google maps nudi možnost, da na lastni spletni strani prikažemo poljuben del zemljevida z oznako željene lokacije. Za prikaz lokacije bom uporabil primer, ki uporablja API storitve Google maps.
Najprej moramo za spletno stran ustvariti API ključ. Z njim dobimo pravico do uporabe zemljevida Google maps na lastni spletni strani.
Ta ključ bomo vnesli v kodo, ki jo vstavimo med znački <head> in </head>. Za spletno stran Lampret.net ta del kode izgleda takole:
<script src=”http://maps.google.com/maps?file=api&v=2.123&key=
ABQIAAAALNeu4qEQLj33uAY6KZAZuhSVt5Mlri74VksIYjppaGxRuiovnh
QFldPDtXQ8zD91cJ9GJecqLpasVA” type=”text/javascript”></script>
Za tem vpisom nadaljujemo s skripto, ki skrbi za prikaz točke. Postavimo jo pred značko </head>
<script type=”text/javascript”>
//<![CDATA[
function initialize() {
if (GBrowserIsCompatible()) {
///////////////////////////// Spremenljivke ////////////////////////////////
var x = '46.155808'; // X koordinata
var y = '13.748918'; // Y koordinata
var zoom = 12; // Povečava zemljevida
var html = '<p>Tukaj gre lahko <strong>html</strong> koda</p>'; // Vsebina oblačka/////////////////////////////// Glavni del //////////////////////////////////
var map = new GMap2(document.getElementById("zemljevid"));
map.setCenter(new GLatLng(x, y), zoom); // Centrira zemljevid na točko
map.addControl(new GSmallMapControl()); // Prikaže povečavo in smerne puščice
map.addControl(new GMapTypeControl()); // Prikaže gumbe za izbor pogleda
var tocka = new GMarker(new GLatLng(x, y));
map.addOverlay(tocka);
tocka.openInfoWindowHtml(html); // Prikaže oblaček
}
}
//]]>
</script>
Na začetku tega dela skripte so spremenljivke, ki določajo koordinate točke in napis v oblačku. Če ne znate sami poiskati koordinat, si lahko pomagate s spletno stranjo http://itouchmap.com/latlong.html.
Koordinate so izpostavljene zato, da imamo čimmanj dela, če želimo skripto uporabiti na dinamični strani, ki iz baze vleče koordinate lokacije in jih prikazuje na Google maps.
Sledi postavitev okenca za zemljevid na željeno mesto v s sledeči obliki (dimenzije lahko spreminjate po želji, lahko pa tudi vključite CSS stile v posebno datoteko, namesto direktno v značko):
<div id=”zemljevid” style=”width: 550px; height: 350px”></div>
Da se skripta zažene pa potrebujemo še dodati naslednji del kode v značko <BODY>:
<body onload=”initialize()” onunload=”GUnload()”>
Poglejte si, kako zadeva deluje v praksi. Če so kakšne nejasnosti glede uporabe, preglejte izvorno kodo strani, ali pa vprašajte v komentarjih.
