Membuat Google Maps




Ketika kita ingin menuju ke suatu lokasi yang dicari, pastinya kita akan menggunakan peta sebagai penunjuk arah dan menemukan tempat yang dituju. apalagi di era teknologi saat ini, layanan google yaitu google maps adalah yang paling sering digunakan untuk mencari lokasi karena mudah digunakan dan dapat diakses baik melalui komputer (pc) maupun seluler (mobile).

Google maps telah menjadi kebutuhan bagi para traveler pastinya dalam mengunjungi tempat, bukan hanya itu, google maps ini sudah diterapkan oleh para developer dalam penggunaan sebuah aplikasi seperti gojek, grab, online shop dll. memang produk dari google ini sangat istimewa dan tentunya memudahkan kita dalam mencari tempat yang ingin dituju.

Disini saya akan berbagi trik sederhana membuat google maps. apakah kita akan membuat tiruannya? ya tentu saja tidak, kita akan membuat google maps dengan memanfaatkan API. API sendiri merupakan singkatan dari Application Programming Interface yaitu sekumpulan perintah, fungsi dan protokol program yang digunakan untuk membangun sebuah aplikasi perangkat lunak. Dengan Google Maps menawarkan API, kita dapat memanfaatkan aplikasi tersebut untuk dapat digunakan ke dalam website yang kita dibuat.

Sebelum membuatnya, pasti koneksi internet dan apache pada xampp aktif. Berikut adalah langkah-langkahnya:

  1. Buka Editor Text (Seperti biasa saya menggunakan Notepad++)

  2. Tulis skrip berikut.

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
    
            #gmaps {
                height: 100%;
            }
    
        </style>
    </head>
    
    <body>
        <div id="gmaps"></div>
    
        <script type="text/javascript">
            var gmaps;
    
            function initMap() {
                gmaps = new google.maps.Map(document.getElementById('gmaps'), {
                    center: {
                        lat: -6.9649004,
                        lng: 108.4555244
                    },
                    zoom: 14
                });
            }
    
        </script>
    
        <script async defer src="http://maps.googleapis.com/maps/api/js?key=key_api&callback=initMap">
        </script>
    </body>
    </html>
    </code>
    

    simpan ke htdocs dan beri nama file gmapkes.php


  3. Klik link berikut Google Maps api atau https://developers.google.com/maps/ untuk mendapatkan key_api

  4. Setelah berada di halaman depan, klik untuk memulai



  5. Lalu scroll ke bawah, pada Web API pilih Google Maps Javascript API



  6. Klik Get a Key (dapatkan kunci) untuk mendapatkan api key



  7. Klik Opsi Yes pada My Project, kemudian Next



  8. Akan muncul Pop up yang menampilkan API key kita (setiap akun berbeda-beda keynya)



  9. Klik API Console untuk meningkatkan keamanan aplikasi, ubah namanya terserah kemudian save



  10. copy keynya, lalu klik Done

  11. ganti kata "key_api" pada skrip dengan key api pada google, maka skrip lengkapnya seperti berikut.

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style type="text/css">
            html,
            body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
    
            #gmaps {
                height: 100%;
            }
    
        </style>
    </head>
    
    <body>
        <div id="gmaps"></div>
    
        <script type="text/javascript">
            var gmaps;
    
            function initMap() {
                gmaps = new google.maps.Map(document.getElementById('gmaps'), {
                    center: {
                        lat: -6.9649004,
                        lng: 108.4555244
                    },
                    zoom: 14
                });
            }
    
        </script>
    
        <script async defer src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCTOaApLx4pvY6LVRdg4VB3kUmQDPQgl-c&callback=initMap">
    
    
        </script>
    </body>
    
    </html>
    </code>
    

  12. Jalankan gmaps.php pada browser,

    maka skrip tersebut menampilkan google maps daerah kuningan, coba diliat-liat dulu kanan kiri atas bawah daerahnya haha...mudah bukan?
bisa tau posisi lat dan lng darimana? ada tipsnya untuk kalian
  1. ketik maps.google.com di browser

  2. klik di search, ketik daerah yang akan ditampilkan. misal kabupaten kuningan lalu enter

  3. setelah muncul petanya, kita zoom daerahnya dengan klik + (disini saya zoom sebanyak 4x, agar daerahnya jelas).



  4. lalu kita lihat di url akan terlihat lat dan lng, lalu kita copykan keduanya ke kode center untuk lat : -6.9621742 dan lng: 108.4563945



  5. Buka hasilnya pada browser localhost/gmaps.php

    maka daerah kota kalian berhasil ditampilkan.




17 comments:

  1. Makasih gan atas Informasinya, artikelnya keren ! Lumayan buat nambah ilmu pengetahuan

    ReplyDelete
    Replies
    1. semakin mudah semakin baik, lumayan buat touring dan jalan-jalan ke daerah yang belum dijamah

      Delete
  2. Replies
    1. semakin mudah dalam menggunakan aplikasi google dalam website kita

      Delete
  3. makasih informasi nya gan

    ReplyDelete
    Replies
    1. yap, jangan lupa kalo bisa dishare ke temenmu atau siapapun, biar tau

      Delete
  4. soday makasih atas info, lumayan mampir sekalian belajar

    ReplyDelete
    Replies
    1. memang perlu dipelajari, kalo bisa dikembangkan lagi...Ini masih dasar, selanjutnya kembangkan sendiri biar seperti gmaps google

      Delete
  5. Replies
    1. tinggal upload saja, sudah tampil petanya...Intinya sih manfaatkan fasilitas google karena pasti banyak fitur yang sesuai dengan kebutuhan kita

      Delete
  6. kemarin sempat berpikir kalau membuat googlemap untuk blog itu tidak banyak menguntungkan, ujung-ujungnya malah menambah beban loading aja. tapi sekarang kepikiran kalau itu perlu dilakukan juga untuk blog tertentu kali ya, misalnya buat blog penjualan sekedar memberi info market kepada pengunjung. makasih trixnya gan. salam sahabat blogger

    ReplyDelete
    Replies
    1. iyap betul sekali mas, manfaatnya besar juga untuk blog, terutama ke blog cms...Memasang gmaps untuk konten blog dengan tema marketing sangat bagus diterapkan

      Delete
  7. dapet ilmu baru dari tulisan ini.. thanks sudah berbagi informasi mas

    ReplyDelete
  8. Thanks gan, sangat bermanfaat artikelnya

    ReplyDelete
  9. A review of the best casino and slots games by - DRMCD
    A comprehensive review of the 서귀포 출장안마 best casino and slots 창원 출장마사지 games by Microgaming, 제주도 출장안마 including a review of the best 경기도 출장샵 online slots 충청북도 출장마사지 games and bonuses.

    ReplyDelete

Silahkan ketik komentar di bawah ini