Google taulukkolaskennan käyttöesimerkki Google mapsissa

Jatkoa aikaisempaan: Googlen taulukkolaskennan käyttö sovelluksen backendinä

Aikaisemmasta kirjoituksesta puuttui oikea käyttötapaus, jossa käytetään taulukkolaskentaan vietyä tietoa. Tämän vuoksi loin skenaarion, jossa tavoitteena on paikkojen sijoittaminen kartalle.

Skenaariota varten olen tehnyt Google-taulukon aikaisemman kirjoituksen mukaisesti. Taulukoiden ensimmäinen ja toinen sarake ovat karttakoordinaatteja ja kolmas kartalla näkyvään paikkaan sidottu teksti. Ainoana poikkeuksena edelliseen on se, että tällä kertaa dokumentti on avoin, joten voitte itse lisäillä paikkoja ja testata tätä käytännössä. Tämän lisäksi tarvitaan vain karttasivu, joka hakee sisällön JSONP:nä.

Alla esimerkki, miten tieto saadaan luettua ja sen perusteella luotua kartalleklikattavia paikkamerkintöjä.

<div id="canvas-map" style="width: 800px; height:600px;"></div>
<script>

    var map = new google.maps.Map(
        document.getElementById("canvas-map"),
        {
            center: new google.maps.LatLng(60.146632, 24.988403),
            zoom: 11,
            maxZoom: 20,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    );

    var marker = 0;
    function callback(data) {
        console.log('raw data from spreadsheet', data);

        data.forEach(function(row) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(row[0], row[1]),
                map: map,
                title: row[2]
            });

            addMessagePopup(marker, row[2]);
        })
    }

    function addMessagePopup(marker, message) {
        var infowindow = new google.maps.InfoWindow({
            content: message,
            size: new google.maps.Size(50,50)
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
        });
    }

    var dataServiceUrl = "https://script.google.com/macros/s/AKfycbxxRPL8j8gq8-u1GzDL2TSA_TPYbAs9T1tS5V67G6r7yPIw2SBr/exec?jsonp=callback"
    var scriptElement = document.createElement('script');
    scriptElement.src = dataServiceUrl;
    document.getElementsByTagName('head')[0].appendChild(scriptElement);
</script>

Skenaarion kaltaista tapausta ei kannata tehdä itse, koska esimerkiksi Mapmaker tarjoaa tähän jo olemassa olevan ja paljon kattavamman ratkaisun. Toisaalta, jos palvelulta vaaditaan räätälöityä toiminnallisuutta, ulkopuolisten sovellusten käyttämisen rajat tulevat nopeasti vastaan. Tässä tapauksessa taulukkolaskentaa hyödyntävä karttasovellus on kelpo lähtökohta alkaa rakentamaan sovellusta eteenpäin.