Mencantumkan kode program di posting Anda, tolong ikuti aturan yang sesuai, baca http://diskusiweb.com/discussion/39204/aturan-cara-menyisipkan-kode-program-di-diskusiweb
Tolong pilih kategori sesuai, jenis posting (pertanyaan atau bukan) dan sertakan tag/topik yang sesuai misal komputer, php, mysql, dll. Promosi atau posting tidak pada tempatnya akan kami hapus.
Membuat GeoLocation dengan HTML5 dan Google Maps API
  • thePinkFighterthePinkFighter
    Posts: 16
    image
    Jika Anda saat ini mengembangkan website bisnis ataupun yang mengandalkan informasi lokasi. Akan sangat bagus rasanya kalau ditambahkan fitur Geolocation. Fitur ini memang sangat berguna sekali untuk dapat mendeteksi keberadaan visitor Anda, sehingga Anda pun akan dengan mudah menemukan lokasi calon customer dari bisnis Anda yang berdekatan lokasinya. Kebiasaan yang dilakukan oleh seseorang ketika ingin membeli sesuatu, maka yang dicari adalah tempat membeli produk yang mudah dijangkau. Selain tidak membuang banyak waktu, juga lebih cepat proses membelinya karena lebih dekat.

    Nah, ada cara cukup mudah untuk memasang fitur geolocation ini di website Anda. Cukup dengan bantuan HTML5 serta API Google Maps saja, yuk kita mulai membuatnya.

    Langkah 1

    Dalam contoh ini kita akan menggunakan 1 file HTML saja yang mana di dalamnya akan diisi dengan CSS serta Javascript juga. Untuk memulai kita harus membuat box yang akan menampung tampilan maps lokasi dari visitor
    <div id="mapDiv"></div>

    Langkah 2

    Tambahkan CSS sederhana agar tampilan geolocation nanti tampil lebih bagus
    #mapDiv {
        width:500px;
        height:300px;
        border:1px solid #efefef;
        margin:auto;
        -moz-box-shadow:5px 5px 10px #000;
        -webkit-box-shadow:5px 5px 10px #000;
    }

    Langkah 3

    Untuk dapat menampilkan maps lokasi dibutuhkan API Google Maps, tambahkan script ini pada HEAD script HTML Anda
    <script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=true'></script>

    Untuk mengetahui apakah browser kita mendukung Javascript kita harus menambahkan JS bagian ini sebagai pengecekan :
    if(navigator.geolocation) {
     
    }

    Di dalam IF di atas kita harus membuat fungsi yang mana di dalamnya menggunakan fungsi HTML5 getCurrentPosition, dalam contoh ini kita menggunakan fungsi buatan yang kita namai visitorLocation().
    function visitorLocation(position) {
        //Creates a variable called point and sends the latitude and longitude to Google Maps to get your position
        var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
     
        //Settings for the map  
        myOptions = {
            zoom: 15,
            center: point,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
     
        //Finding the div we want the map to be in
        mapDiv = document.getElementById("mapDiv"),
        //Pass in the div and map settings to the map
        map = new google.maps.Map(mapDiv, myOptions),
     
        //
        marker = new google.maps.Marker({
            position: point,
            map: map,
            title: "You are here"
        });
    }

    Setelah menaruh fungsi visitorLocation() di dalam pengecekan IF, kita juga harus menambahkan script ini di bawah fungsi visitorLocation() :
    navigator.geolocation.getCurrentPosition(visitorLocation);

    Langkah 4

    Gabungkan script HTML, CSS dan Javascript semuanya menjadi utuh seperti ini :
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>HTML5 Geolocation</title>
    <script  type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script&gt;
    <script>
     
        if(navigator.geolocation) {
     
            function visitorLocation(position) {
                var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
     
                myOptions = {
                    zoom: 15,
                    center: point,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                },
     
                mapDiv = document.getElementById("mapDiv"),
                map = new google.maps.Map(mapDiv, myOptions),
     
                marker = new google.maps.Marker({
                    position: point,
                    map: map,
                    title: "You are here"
                });
            }
            navigator.geolocation.getCurrentPosition(visitorLocation);
        }
    </script>
    <style>
    #mapDiv {
        width:500px;
        height:300px;
        border:1px solid #efefef;
        margin:auto;
        -moz-box-shadow:5px 5px 10px #000;
        -webkit-box-shadow:5px 5px 10px #000;
    }
    </style>
    </head>
    <body>
    <div id="mapDiv"></div>
    </body>
    </html>

    Cukup sederhana bukan? Selamat mencoba :)

    (thePinkFighter)
  • golek_ngilmugolek_ngilmu
    Posts: 37
    wah bagus sekali mas tutorialnya, maunanay kalo misalnya nerima koordinat yg dikirimkan dari gps yang disimpan di database caranya gimana ya?
  • saefullohsaefulloh
    Posts: 902
    thank;s...
  • saefullohsaefulloh
    Posts: 902
    kalo kita pengin buat kaya gitu tapi yang langsung muncul tuh desa atau tempat rumah saya gimana ? itu kan muncule di jogja/atau tempat kita ..
  • adiputra_adiputra_
    Posts: 6
    wah, ilmu baru..
    terimakasih..
    :)
  • indranetdefacerindranetdefacer
    Posts: 5
    sip aja
  • melinuxidmelinuxid
    Posts: 4
    @saefulloh Tinggal di buatkan koneksi ke database yg berisi informasi latitude longitude... untuk koordinat bisa menggunakan aplikasi di android (gps coordinates)... ada ide membuat aplikasi android yg parsing lat long secara berkala ke aplikasi web yg menerima variabel lat long....dan menampilkannya di g map....hehe
  • UDAYUDAY
    Posts: 3
    mantaf gan ntar di coba
  • ramsyahramsyah
    Posts: 2
    coba dulu ya
Beri Tanggapan

Selamat datang,

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Daftar jadi Anggota

Kategori

In this Discussion

Tagged

Top Posters