Show Static Map Location in PhoneGap

  • Posted on: 28 January 2013
  • By: oon
Google Static Maps in PhoneGap

Setidaknya ada dua mekanisme dalam menampilkan lokasi di peta Google:

  1. Menggunakan static map, sehingga peta hanya akan tampil sebagai gambar [1]
  2. Menggunakan Google Maps JavaScript API [2]

Dalam artikel ini akan dibahas menampilkan peta static dengan menggunakan PhoneGap. Intinya adalah membuat sebuah image dengan src berupa alamat berikut

http://maps.googleapis.com/maps/api/staticmap?center=latitude,longitude&zoom=12&size=200x200&maptype=roadmap&markers=color:red%7Ccolor:red%7Clabel:O%7Clatitude,longitude&sensor=false

Langkah yang dilakukan sama seperti artikel sebelumnya tentang menggunakan geolocation pada PhoneGap [3].

Dalam file index.html ditambahkan sebuah tag img dan berikan id misalnya "map".



Kemudian ubah file index.js dengan fungsi Geolocation dimana jika fungsi tersebut berhasil maka akan mengubah gambar img dengan id="map" tersebut menjadi gambar dari situs Google Static Maps. (kondisi simulator ataupun device harus online karena gambar diambil dari situs Google Maps). Jika kesulitan copy-paste gunakan teks src sama dengan teks di atas.


    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicity call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        navigator.geolocation.getCurrentPosition(onSuccess, onError);
        // onSuccess Geolocation
        //
        function onSuccess(position) {
            console.log("geo: "+position.coords.latitude+","+position.coords.longitude);
            document.getElementById('map').src="http://maps.googleapis.com/maps/api/staticmap?center="+position.coords.latitude+","+position.coords.longitude+"&zoom=12&size=200x200&maptype=roadmap&markers=color:red%7Ccolor:red%7Clabel:O%7C"+position.coords.latitude+","+position.coords.longitude+"&sensor=false";
        }

        // onError Callback receives a PositionError object
        //
        function onError(error) {
            console.log('code: '    + error.code    + '\n' +
                  'message: ' + error.message + '\n');
        }
    },

Jika berhasil maka akan muncul gambar seperti yang ada pada artikel ini.

Dilain kesempatan akan dibuat artikel yang menggunakan Google Maps JavaScript API dan tentunya artikel yang menggunakan peta Open Source yakni OpenStreetMap.

[1] https://developers.google.com/maps/documentation/staticmaps/
[2] https://developers.google.com/maps/documentation/javascript/
[3] http://oo.or.id/content/working-geolocation-phonegap

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.