Tutorial Goecoding untuk mendapatkan titik koordinat Pada Google Maps

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

buat satu file baru beri nama index.html
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.
buat satu file css untuk kita menyesuai kan ukuran canvas dari maps nya
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

AK Studio

Tutorial Goecoding untuk mendapatkan titik koordinat Pada Google Maps

1. Mendapatkan Api Key Google

2.Persiapan Awal

3. Membuat View Untuk Menampilkan Maps

Penjelasan :

4.Menampilkan Google peta dan Marker Pada Maps

0 Response to "Tutorial Goecoding untuk mendapatkan titik koordinat Pada Google Maps"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel