Google Maps webbisivullesi

Interaktiivinen Google Maps -kartta sivuillesi

Epävirallinen opas, jonka kirjoitti Esa. Päivitetty kakkosversion syntaksille: huhti -06. Modernisoitu heinä -09.

Näitä ohjeita noudattaen saat upotettua Google Maps ajax-kartan webbisivullesi ilman aikaisempaa JavaScript-kokemusta. Reilussa puolessa tunnissa kartta näkyy sivuillasi. Ohjeet version 2 syntaksilla.

Hae Google Maps API avain
Avainta haettaessa sinulta kysytään sivustosi URL. Pelkkä domain-osa riittää (esim. http://koti.mbnet.fi). Sama avain pätee silloin koko sivustoosi.
Saat tämän näköisen koodin:
<script src="http://maps.google.com/maps?file=api &v=2&sensor=true_or_false &key=ABQIAAAAYxpy0HiKBWXiyhVrpVqkshRJmIwR4Jein9pLzw-cpnhyQKPdtRQV-ysQoEX1QTSEwi7yi5pREVsOaA" type="text/javascript"></script>
Siitä on editoitava &sensor=true_or_false jompi kumpi pois. 99% sivuista se kuuluu olla sensor=false. Sensor tarkoittaa esim. GPS-paikannusta sivun koodissa.
Kartan käyttöliittymän saa nykyisin suomeksikin lisäämällä kieliparametrin:
&hl=fi
Siis:
<script src="http://maps.google.com/maps?file=api &v=2&sensor=false&hl=fi &key=ABQIAAAAYxpy0HiKBWXiyhVrpVqkshRJmIwR4Jein9pLzw-cpnhyQKPdtRQV-ysQoEX1QTSEwi7yi5pREVsOaA" type="text/javascript"></script>
Tunge muokattu avainkoodi sivusi lähdekoodin <head>-osaan.
Eli jonnekin <head>ja </head>-tagien väliselle alueelle.
Tee kartallesi paikka sivulla

Sijoita seuraava html-koodi sivullesi haluttuun kohtaan. Se voi hyvin olla taulukon sisällä:
<div id="kartta" style="width:300px; height:200px"> Kartta latatuu...</div>
Editoi <div>:n tyylimääritteistä kartan koko. Koko on varminta määritellä tässä. Jos se tehdään erillisessä CSS-osassa tai erillisessä CSS-tiedostossa, niin tieto kartan koosta saattaa tulla API:lle myöhässä. (Tyypillinen IE-ongelma).
Tervetuliaisteksti näkyy pienen hetken sivun latautuessa kunnes api pyyhkii sen pois ja pistää karttaruutuja tilalle.
Tarvitset koordinaatit

jotka saat vaikkapa tästä.

Kartta latatuu...

Hae osoitteella tai paikkakunnan nimellä. Yleensä pitää muistaa kijoittaa loppuun myös 'Suomi'. Myös maatunnus 'fi' kelpaa. Koordinaatteja voi tarkentaa raahamalla nuppineulaa.
JavaScript
<script type="text/javascript"> var map = new GMap2(document.getElementById("kartta")); map.setCenter(new GLatLng(60.175,24.926), 15); map.setUIToDefault(); </script> Palauta
Muuta (60.175,24.926) omiksi kartan keskipisteen koordinaateiksesi ja 15 haluamaksesi zoom-tasoksi. Editoinnin voit tehdä tässä.
Sijoita JavaScript-osuus html-koodisi loppuun, vaikkapa juuri ennen </body>-tagia.
Julkaise

kartta latautuu...

Helppoa kuin heinän teko. Jos et editoinutkaan parametrejä, sivullasi pitäisi olla samanlainen Töölön kartta kuin yllä.
Nuppineula ja infoikkuna
Seuraavassa koodiin on lisätty kahden nuppineulan vaatimat lisärivit. Tarvitset koordinaatit kullekin neulalle ja mahdollisen sisällön puhekuplaan. Infokuplaan voi sijoittaa kaikkea, mitä html-koodilla saa aikaan: linkkejä, kuvia, vaikka toisen kartan. Tekstikenttää voi käyttää editointiin.
//<![CDATA[ <script type="text/javascript"> var map = new GMap2(document.getElementById("kartta2")); map.setCenter(new GLatLng(60.175,24.926), 15); map.setUIToDefault(); var neula = new GMarker(new GLatLng(60.17524,24.92484)); map.addOverlay(neula); neula.bindInfoWindowHtml("KuuKuu"); neula = new GMarker(new GLatLng(60.1741,24.9307)); map.addOverlay(neula); neula.bindInfoWindowHtml("Jaskan<br/>Grilli"); </script>//]]> Palauta
Julkaise

kartta latautuu...

Nyt kun kartta on isompi (440px x 320px), api laittoi automaattisesti isommat hallintalaitteet.
Opiskele lisää
- Dokumentaatio
- Googlen suosittelemat linkit
- Google Maps Mania blog Iso linkkikokoelma
- W3Schools Luotettava HTML, CSS ja JavaScript tietopankki
- JavaScript FAQ Paljon valmiita vastauksia
- JSLint JavaScript validaattori
- W3C Html validaattori
- Takaisin indexiin
Edistyneempi esimerkki
Ylläolevan koordinaattien hakukartan koodi kommentoituna. //<![CDATA[ <div id="koord-kartta" style="width:512px; height:400px;"> Kartta latatuu...</div> <form action="#" onsubmit="showAddress(this.haku.value); return false"> <input type="text" size="40" name="haku" title="osoite, kunta ja Suomi (tai fi)"/> <input type="submit" value="Haku" title="Tai [Enter]"/> </form> <script type="text/javascript"> /** * koordinaattien hakukartta */ var koordKartta = new GMap2(document.getElementById("koord-kartta")); koordKartta.setCenter(new GLatLng(65,26), 4); // setCenter tehtävä alussa koordKartta.setUIToDefault(); // vakio hallintalaitteet var pointer = new GMarker(new GLatLng(90,0),{draggable:true}); koordKartta.addOverlay(pointer); // nuppineula Pohjoisnavalla jemmassa function iwContents(){ var tarina = []; // infoikkunan sisältö-array tarina.push("Nuppineulan koordinaatit (lat, lng)<br/>"); tarina.push("<br/>"); tarina.push("<input type='text' size='20'"); tarina.push("onclick='this.focus();this.select()'"); tarina.push("value='"); tarina.push(pointer.getLatLng().toUrlValue());//markkerin koordinaatit tarina.push("'/><br/><br/>"); tarina.push("Zoom: "); tarina.push(koordKartta.getZoom()); tarina = tarina.join(""); // array muutetaan stringiksi return tarina; } GEvent.addListener(koordKartta, "click", function(overlay,point){ if(point) pointer.setLatLng(point); // markkeri siirtyy klikkauspaikkaan }); GEvent.addListener(pointer, "click", function(){ pointer.openInfoWindowHtml(iwContents());//markkerin klikki avaa infoikkunan }); GEvent.addListener(pointer, "dragstart", function(){ koordKartta.closeInfoWindow(); // infoikkuna kiinni markkeria raahatessa }); GEvent.addListener(koordKartta, "zoomend", function(){ if(!koordKartta.getInfoWindow().isHidden()){ pointer.openInfoWindowHtml(iwContents());// päivitetään zoom-lukema } // jos infoikkuna auki zoomattaessa }); /** * geokooderi */ var geocoder = new GClientGeocoder(); function showAddress(address){ geocoder.getLatLng(address,function(point){ if(!point){ alert("Sorry, ei löytynyt: \n\n"+address); }else{ koordKartta.setCenter(point, 14); // kartan keskikohta tulokseen koordKartta.savePosition(); // tallennus keskipainikkeeseen pointer.setLatLng(point); // siirretään markkeri tulokseen pointer.openInfoWindowHtml(iwContents());// avataan infoikkuna } // tuoreilla tiedoilla }); } /** * mainos kartalle */ var adsManagerOptions = { maxAdsOnMap : 1, style: 'adunit', channel: '1414411154' }; var publisherID = "pub-3649938975494252"; var adsManager = new GAdsManager(koordKartta, publisherID, adsManagerOptions); adsManager.enable(); </script> //]]> Palauta

Interaktiivinen Google Maps -kartta sivuillesi

Hae Google Maps API avain

Tunge muokattu avainkoodi sivusi lähdekoodin <head>-osaan.

Tee kartallesi paikka sivulla

Tarvitset koordinaatit

JavaScript

Julkaise

Nuppineula ja infoikkuna

Julkaise

Opiskele lisää

Edistyneempi esimerkki