-->

AK Studio

Tutorial Programming Bahasa Indonesia

› › ›

Tutorial Goecoding untuk mendapatkan titik koordinat Pada Google Maps

2 Comments
Tutorial-Goecoding-Google-Maps-api-key

Pada Tutorial kali ini kita akan coba membahas tetang Goecode untuk bagaimana cara mendapatkan alamat dan titik koordrinat (latidude dan Longhitude) pada peta atau maps.

untuk tutorial kali ini kita akan menggunakan bahasa pemrograman javascrpit dan HTML untuk menampilkan maps dan koordinat pada peta.

pada tutorial kali ini di asumsikan teman-teman sudah paham bagai mana cara penggunaan service web localhost di komputer atau laptop kalian.

hanya sekedar coding sederhana yang bisa di implementasikan pada project yang sedang teman-teman kembangkan. untuk membuat tutorial kali ini kita membutkan komponent utama yang akan kita gunakan yaitu.

Persiapan
1.Api Key Google  (untuk menapilkan maps)
2, Boostrap CSS   (untuk Style dari html project yang akan kita buat agar terlihat lebih rapih)


1. Mendapatkan Api Key Google

API key dari Google maps, karena pada tutorial ini kita akan menggunakan peta atau maps dari Google.
Untuk mendapatkan Api Key dari Google disini kita harus mendaftarkan terlebih dahulu project yang akan kita buat pada Google Cloud Console pada link berikut ini.

daftar Google Cloud Console : https://console.cloud.google.com/

Login dengan menggunakan Akun Gmail kalian, setelah login makan akan masuk ke halaman console dari google cloud console, dan akan langsung ada popup pertayaan, pilih negara, lalu ceklis setujui Agreement  nya dan tekan agrree and continue .

Untuk step mendapatkan API key nya mungkin tidak akan kita bahas pada tutorial kali ini, karna proses nya agak sedikit panjang,  dan terakhir pada saat tutorial ini di buat Juli 2022, untuk mendapatkan kan api key google itu sendiri sekrang harus berbayar.

berikut akan saya lampirkan link reprensi untuk bagai mana cara mendapatkan API key nya. atau teman-teman bisa memcari nya di mba google :)

Link tutorial:
link youtube : https://www.youtube.com/watch?v=OGTG1l7yin4

tutor resmi dari google cloud console https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ID

2.Persiapan Awal

buat folder baru dalam localhost kalian dan beri nama bebas, disini kita berinama maps lalu buat satu file baru dalam folder project yang sudah kita buat tadi
  1. buat satu file baru beri nama index.html
  2. buat folder dengan nama assets untuk menyimpan icon marker yang kan di gunakan pada maps nanti, untuk incon maps nya bisa bebas menggunakan apa saja utamakan memiliki background transparant. atau bisa pakai icon yang sama seperti pada tutorial ini. berikut icon nya bisa kalian gunakan.
  3. buat satu file css untuk kita menyesuai kan ukuran canvas dari maps nya
  4. untuk css dari bootstrap nya disini kita akan coba meng import nya via CND atau secara online saja.
Icon Marker Maps

Icon

3. Membuat View Untuk Menampilkan Maps

buka file custom.css dan tulisakn coding berikut ini, untuk mengtur ukuran dari maps yang akan di tampilkan

Custom.css
.bg-maps {
    background: #b0cff0;
    height: 350px;
    padding: 10px;
}
lalau dalam file index.html yang sudah kita buat tadi tuliskan coding seprti berikut ini.

Coding index.html 
  <!doctype html>
  <html lang="en">

  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Goe Coding javaScript</title>

      <!--import custome css-->
      <link href="custome.css" rel="stylesheet" />
      <!--import bootstrap css-->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  </head>

  <body>

      <div class="container">
          <div class="card mt-3">
              <div class="card-header text-center">
                  <h5 class="card-title">JavaScript GOE-CODER Whit Google Maps</h5>
              </div>
              <div class="card-body">

                  <input class="form-control mb-1" id="_01prmInput_pencarian" name="_01prmInput_pencarian" placeholder="Masukan Alamat yang akan di cari..." />
                  <div id="maps" class="bg-maps">
                  </div>

                  <div class="row mt-2">
                      <div class="col-2">Alamat</div>
                      <div class="col-10">
                          <input type="text" class="form-control" id="_02prmHasil_Alamat" name="_02prmHasil_Alamat" readonly/>
                      </div>
                  </div>

                  <!-- input untuk display 
                      Output titik kordinat maps nya
                      1.pada input Latitude value="-6.370469" 
                      2.pada input Longitude value="106.883793"

                      merupakan values untuk menentukan titik awal marker pada maps saat di buka
                      jika marker di drop makan values akan ikut berubah secara otomatis                    
                  -->
                  <div class="row mt-1">
                      <div class="col-2">Latitude</div>
                      <div class="col-4">
                          <input type="text" class="form-control" id="_03prmHasil_Latitude" name="_02prmHasil_Latitude" value="-6.370469" readonly />
                      </div>
                      <div class="col-2">Longitude</div>
                      <div class="col-4">
                          <input type="text" class="form-control" id="_04prmHasil_Longitude" name="_03prmHasil_Longitude" value="106.883793" readonly />
                      </div>
                  </div>

              </div>
          </div>
      </div>

      <!--import bootstrap js-->
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>


  </body>

  </html>

Penjelasan :

  • Line 10 : pemanggilan aseest Custome.css 
  • Line 12 : pemanggilan Assets css dari bootstrap via cnd
  • line 18-55 : view untuk menampilkan maps dan hasil dari koordinat yang  kita cari
  • line 59 : pemanggilan scriptt js dari bootstrap visa cdn 

jika step di atas dilakukan degan benar maka hasil dari view maps nya seperti gambar berikut ini

View Awal

4.Menampilkan Google peta dan Marker Pada Maps

jika step pada no 3 telah berhasil , maka selanjutnya kita akan mencoba menapilkan google maps nya pada view yang telah kita buat tadi.

disini kita perlu menambahkan coding pada file index.html yang sudah kita buat tadi. lalu kita akan menambahkan coding javascript untuk menampilkan maps nya.

buka file index,html lalu import library javascript untuk menampilakn maps nya
letakan pada bagian bawah setalah pemanggilan js dari bootstrap

Import Library javascript google maps 
<script src="https://maps.googleapis.com/maps/api/js?key=(MASUKAN_API_KEY_DISINI)&libraries=places&callback=initialize" async defer></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
Penjelasan:
pada pemanggilan library javascript dari google maps nya terdapat tulisan key=(MASUKAN_API_KEY_DISINI)&
disini lah api key yang sudah kalian buat di gunakan untuk menampilkan maps pada view yang sudah kita buat

Catatan:
masukan api key yang sudah di buat tadi tanpa tanda kurung buka dan tutup, jadi letakan api key nya di antara tanda key= apikey_disini &
lalu pada bagian bawah pemanggilan library js dari google maps nya tuliskan koding berikut ini.

Coding Javascript untuk menampilkan Maps 
<script>
        /* script */
        function initialize() {
            var lat = document.getElementById('_03prmHasil_Latitude').value;
            var lng = document.getElementById('_04prmHasil_Longitude').value;
            var latlng = new google.maps.LatLng(lat, lng);
            var map = new google.maps.Map(document.getElementById('maps'), {
                center: latlng,
                zoom: 18
            });

            /*
            Menampilkan marker dan posisi awal maps 
            saar pertama kali halam di buka
            untuk mengganti posisi awal nya
            ubah value dari input
            Latitude dan  Longitude nya di tag Value =""
            */
            var marker = new google.maps.Marker({
                map: map,
                icon: './assets/icon_marker.png', //pemanggilan asset icon merker untuk maps nya
                position: latlng,
                draggable: true,
                animation: google.maps.Animation.DROP,

                anchorPoint: new google.maps.Point(0, -29)
            });


            var input = document.getElementById('_01prmInput_pencarian');
            // map.controls[google.maps.ControlPosition.TOP].push(input);
            var geocoder = new google.maps.Geocoder();
            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.bindTo('bounds', map);
            var infowindow = new google.maps.InfoWindow();
            autocomplete.addListener('place_changed', function() {
                infowindow.close();
                marker.setVisible(false);
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                    window.alert("Autocomplete's returned place contains no geometry");
                    return;
                }

                // If the place has a geometry, then present it on a map.
                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(17);
                }

                marker.setPosition(place.geometry.location);
                marker.setVisible(true);

                // Mendapatkan lokasi sesuai marker di gerakan
                bindDataToForm(place.formatted_address, place.geometry.location.lat(), place.geometry.location.lng());
                infowindow.setContent(place.formatted_address);
                infowindow.open(map, marker);

            });

            /* fungsi event untuk dan mendapatkan koordinat dari maps
               saat marker di gerakan atau di drag
            */
            google.maps.event.addListener(marker, 'dragend', function() {
                geocoder.geocode({
                    'latLng': marker.getPosition()
                }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (results[0]) {
                            bindDataToForm(results[0].formatted_address, marker.getPosition().lat(), marker.getPosition().lng());
                            infowindow.setContent(results[0].formatted_address);
                            infowindow.open(map, marker);
                        }
                    }
                });
            });
        }

        /*
        fungsi untuk menampilkan alamat
        kordina dari maps kedalam input text pada view yang sudah kita buat
        */
        function bindDataToForm(address, lat, lng) {

         document.getElementById('_01prmInput_pencarian').value = address;
            document.getElementById('_02prmHasil_Alamat').value = address;
            document.getElementById('_02prmHasil_Latitude').value = lat;
            document.getElementById('_03prmHasil_Longitude').value = lng;
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

Penjelasan:
  • line 4 : mengambil value dari input latitude
  • line 5 : mengambil value dari input Longitude
  • line 6 : menentukan Titik awal saat maps di buka
  • line 7 -10 : menampikan maps pada tag div yang telah kita desiakan dengan id tag div nya "maps"
  • line 21 : memanggil icon marker dari assets folder
  • line 19 - 27 : menampikan marker pada maps
  • line 30 : mengambil input dari pencarian alamat yang akan di cari
  • line 32 - 61 : fungsi mencari alamat dan menampilkan maps yang di tulis pada input cari alamat
  • line 66-78 : mengaktifkan fungsi marker agar bisa di geser untuk mencari alamat di maps
  • line 85-91 : menampilkan hasil dari pencarian pada input text alamat dan koordinat 
dan saat ini isi coding secara keseluruhan pada file index.html yang kita buat seperti berikut ini

koding full Index.html 
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Goe Coding javaScript</title>

    <!--import custome css-->
    <link href="custome.css" rel="stylesheet" />
    <!--import bootstrap css-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>

<body>

    <div class="container">
        <div class="card mt-3">
            <div class="card-header text-center">
                <h5 class="card-title">JavaScript GOE-CODER Whit Google Maps</h5>
            </div>
            <div class="card-body">

                <input class="form-control mb-1" id="_01prmInput_pencarian" name="_01prmInput_pencarian" placeholder="Masukan Alamat yang akan di cari..." />
                <div id="maps" class="bg-maps">
                </div>

                <div class="row mt-2">
                    <div class="col-2">Alamat</div>
                    <div class="col-10">
                        <input type="text" class="form-control" id="_02prmHasil_Alamat" name="_02prmHasil_Alamat" readonly/>
                    </div>
                </div>

                <!-- input untuk display 
                    Output titik kordinat maps nya
                    1.pada input Latitude value="-6.370469" 
                    2.pada input Longitude value="106.883793"

                    merupakan values untuk menentukan titik awal marker pada maps saat di buka
                    jika marker di drop makan values akan ikut berubah secara otomatis                    
                -->
                <div class="row mt-1">
                    <div class="col-2">Latitude</div>
                    <div class="col-4">
                        <input type="text" class="form-control" id="_03prmHasil_Latitude" name="_02prmHasil_Latitude" value="-6.370469" readonly />
                    </div>
                    <div class="col-2">Longitude</div>
                    <div class="col-4">
                        <input type="text" class="form-control" id="_04prmHasil_Longitude" name="_03prmHasil_Longitude" value="106.883793" readonly />
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!--import bootstrap js-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

    <!--import javascript untuk Google maps 
    untuk medaptkan apikey kamu harus daftar ke google dulu 
    pada import spirt tepat dibawah ini

    https://maps.googleapis.com/maps/api/js?key=(ganti dengan token apikey yang di dapat dari goole )&libraries=places&callback=initialize
    -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initialize" async defer></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>


    <script>
        /* script */
        function initialize() {
            var lat = document.getElementById('_03prmHasil_Latitude').value;
            var lng = document.getElementById('_04prmHasil_Longitude').value;
            var latlng = new google.maps.LatLng(lat, lng);
            var map = new google.maps.Map(document.getElementById('maps'), {
                center: latlng,
                zoom: 18
            });

            /*
            Menampilkan marker dan posisi awal maps 
            saar pertama kali halam di buka
            untuk mengganti posisi awal nya
            ubah value dari input
            Latitude dan  Longitude nya di tag Value =""
            */
            var marker = new google.maps.Marker({
                map: map,
                icon: './assets/icon_marker.png', //pemanggilan asset icon merker untuk maps nya
                position: latlng,
                draggable: true,
                animation: google.maps.Animation.DROP,

                anchorPoint: new google.maps.Point(0, -29)
            });


            var input = document.getElementById('_01prmInput_pencarian');
            // map.controls[google.maps.ControlPosition.TOP].push(input);
            var geocoder = new google.maps.Geocoder();
            var autocomplete = new google.maps.places.Autocomplete(input);
            autocomplete.bindTo('bounds', map);
            var infowindow = new google.maps.InfoWindow();
            autocomplete.addListener('place_changed', function() {
                infowindow.close();
                marker.setVisible(false);
                var place = autocomplete.getPlace();
                if (!place.geometry) {
                    window.alert("Autocomplete's returned place contains no geometry");
                    return;
                }

                // If the place has a geometry, then present it on a map.
                if (place.geometry.viewport) {
                    map.fitBounds(place.geometry.viewport);
                } else {
                    map.setCenter(place.geometry.location);
                    map.setZoom(17);
                }

                marker.setPosition(place.geometry.location);
                marker.setVisible(true);

                // Mendapatkan lokasi sesuai marker di gerakan
                bindDataToForm(place.formatted_address, place.geometry.location.lat(), place.geometry.location.lng());
                infowindow.setContent(place.formatted_address);
                infowindow.open(map, marker);

            });

            /* fungsi event untuk dan mendapatkan koordinat dari maps
               saat marker di gerakan atau di drag
            */
            google.maps.event.addListener(marker, 'dragend', function() {
                geocoder.geocode({
                    'latLng': marker.getPosition()
                }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (results[0]) {
                            bindDataToForm(results[0].formatted_address, marker.getPosition().lat(), marker.getPosition().lng());
                            infowindow.setContent(results[0].formatted_address);
                            infowindow.open(map, marker);
                        }
                    }
                });
            });
        }

        /*
        fungsi untuk menampilkan alamat
        kordina dari maps kedalam input text pada view yang sudah kita buat
        */
        function bindDataToForm(address, lat, lng) {

            document.getElementById('_01prmInput_pencarian').value = address;
            document.getElementById('_02prmHasil_Alamat').value = address;
            document.getElementById('_02prmHasil_Latitude').value = lat;
            document.getElementById('_03prmHasil_Longitude').value = lng;
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</body>

</html>


jika step di atas dilaukan dengan benar maka hasil akhir dari program yang kita buat akan seperti berikut ini

Tampilan Hasil Akhir dari Step No 4



Demo runing Aplikasi

Sampai disini kita telah berhasil membuat project Goecoder sederhana dengan menggunakan google maps. untuk kedapan nya saya harap teman-teman bisa mengembangkan lebih jauh lagi sampel - sampel dari tutorial yang sudah kita buat pada tutorial kali ini

jika ada masukan atau pertanyaan, serta materi apa yang ingin di bahas dan kami buatkan tutorial nya, bisa berikan di kolom komentar, atau hubungin kontak kami yang tersedia di blog ini. 

Sekian Dan Terima kasih...

#Happy Coding

Incoming search terms:
  • Menampilkan maps di PHP
  • Menampilkan maps di HTLM
  • Menampilkan maps di Website
  • Membuat Google maps di PHP
  • Membuat maps di website
  • PHP Goe coder
  • Javascript Goe Coder
  • Google Goe Coder
  • API Key Google Maps
  • Get latitude And longitude
  • Menampilkan Titik Koordinat di maps
  • Mendapatkan Titik Koordinat di maps
  • menampilkan maps google di website
  • membuat marker di Maps
  • membuat marker 
  • Marker dragcable
  • Get location for Marker maps

2 Responses to "Tutorial Goecoding untuk mendapatkan titik koordinat Pada Google Maps"

  1. bram7 Agustus 2024 pukul 09.28

    bang lat sama lng nya ga berubah ya kalau maker nya di geser?

    BalasHapus
  2. koding 775 Oktober 2024 pukul 08.05

    Sori baru cek komentar

    iya bisa berubah lat dan long nya sesuai posisi marker nya

    BalasHapus

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel