Event,get Latitude Longitude, & Geocode (Google Maps API Js V3)

Event Google Maps

Dalam tutorial pada source code javascript di bawah ini akan dijelaskan bagaimana memberikan event dan melakukan geocode pada google maps javascript v3. .
pada contoh di bawah menggunakan event click, adapun event lain yang disediakan oleh google maps adalah
  • 'click'
  • 'dblclick'
  • 'mouseup'
  • 'mousedown'
  • 'mouseover'
  • 'mouseout'
 pada tutorial dibawah event yang ada adalah mengambil nilai latitude dan longitude, setelah itu dengan latlng yang telah didapatkan mengubah posisi tengah pada peta, latlng yang didapatkan juga di ubah menjadi string alamat menggunakan reverse geocoding. .
berikut screenshot hasil source code diatas. .

event google maps

var geocoder = new google.maps.Geocoder();
    function initialize() {
        //deklarasi posisi awal default pada peta
        var posisi = new google.maps.LatLng(-7.813215,110.236273);
        var map = new google.maps.Map(document.getElementById('map_canvas'), {
            center: posisi,
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        //event listener click pada peta
        google.maps.event.addListener(map,'click',function(e){
            //mengambil latitude dan longitude tempat yang di click
            posisi=e.latLng;
            //merubah posisi center peta
            map.setCenter(posisi);
            //memanggil fungsi geocode
            geocode(posisi);
        });
       
    }
    function geocode(posisi){
        //melakukan reverse geocode dari posisi yang telah di click
        geocoder.geocode({'latLng': posisi},function(results, status){           
            if(status==google.maps.GeocoderStatus.OK){
                if(results[1]){
                    var alamat=results[1].formatted_address;
                    //menampilkan alert
                    alert("anda menng-click "+posisi+" : "+alamat);                   
                }
            }
        });                       
    }

sumber : (google maps js v3)

Post a Comment