87 views

Cara Membuat dan Menggunakan Google Maps API Key

Posted on 87 views

Cara Membuat dan Menggunakan Google Maps API Key, Cara mendapatkan google API secara gratis, cara mudah membuat api key google map

Cara Membuat dan Menggunakan Google Maps API Key – Google Maps adalah sebuah layanan yang memberikan peta online gratis yang bisa diakses dengan mudah melalui berbagai media elektonik yang terhubung dengan internet, Sedangkan API merupakan kepanjangan dari Application Programming Interface yang berfungsi untuk menghubungkan satu aplikasi dengan aplikasi lainnya.

sudah paham dengan google maps api? jika ya kita langsung lanjut bagaimana sih cara membuat atau mendapatkan api key google map secara gratis. fungsinya adalah kita bisa menampilkan peta di website kita dengan api google map yang kita buat. yuk langsung saja

Tutorial Cara Membuat dan Menggunakan Google Maps API Key

1. Pertama anda harus memiliki email aktif contoh [email protected] jika sudah memiliki bisa di skip.

2. Buka link google API console :  https://console.developers.google.com  dan harus mensetejui persyaratan yang ada dengan memilih ya/yes. Tahapan ini untuk masuk ke Console Google Api Key.

Tutorial Cara Membuat dan Menggunakan Google Maps API Key

3. Kemudian Buat project baru dengan memilih menu “pilih project” yang terletak di pojok kanan atas dan kemudian akan ada tampilan baru di layar dan pilih menu tanda tambah (+). Folder tersebut digunakan untuk menyimpan Google Api Key yang akan kita dapatkan nantinya. lihat gambar di bawah.

Tutorial Cara Membuat dan Menggunakan Google Maps API Key

4. Buat nama project yang anda buat dan lokasi jika ingin di masukkan letak lokasi kemudian tekan buat. Usahakan nama project dibuat sederhana mungkin agar mudah diingat sebagai contoh saya membuat dengan nama webgis. dan kemudian klik buat.

Cara Membuat dan Menggunakan Google Maps API Key

5. setelah itu pilih menu “lihat semua” jika tidak ada pilih menu library atau pustaka yang ada di menu sebelah kiri dan cari nama aplikasi Google Maps JavaScript API atau Maps JavaScript API. lihat gambar di bawah.

Cara Membuat dan Menggunakan Google Maps API Key

6. Nantinya Ketika Maps JavaScript API dikilik akan muncul deskripsi tentang aplikasi tersebut dan pilih menu aktifkan atau enable. seperti gambar di bawah ini.

Cara Membuat dan Menggunakan Google Maps API Key

7. Buat Kredensial dengan memilih menu kredensial, kemudian klik “Buat Kredensial” dan pilih “Kunci API atau Google API” dan simpan atau salin kunci API yang telah dibuat tadi, Sekarang kalian telah Mendapatkan Google Maps Api Key yang kalian butuhkan. lihat gambar di bawah agar lebih jelas.

Cara Membuat dan Menggunakan Google Maps API Key
Cara Membuat dan Menggunakan Google Maps API Key

8. Selesai Bagaimana mudah bukan, cara mendapatkan google maps api key nya, nah jika kita sudah memiliki google api kita bisa menerapkannya di php yuk ikuti panduan nya di bawah ini.

bagaimana cara menggunakan google maps api key di php dan mysql

Langkah – langkahnya sebagai berikut :
1. Siapkan text editor kalian bisa menggunakan notepad++, Sublime maupun Brackets, kemudian buat index.html dan masukkan source code yang ada di bawah ini

<html>
<head>
    <title>Contoh Penggunaan GMaps API di penasihatguru.com</title>
    <meta charset="utf-8">
    <!--parsing code-->
    <meta name="viewport" content="initial-scale=1.0">
    <!--web mobile-->
    <style>
        #map {
        /* modifikasi element html yang ber-id map*/
        height: 100%;
    }
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }</style>
</head>
<body>
<script>
 var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {
                lat: -3.792391,
                lng: 114.775188
            },
            zoom: 12
        });
        var marker = new google.maps.Marker({
            position: {
                lat: -3.792391,
                lng: 114.775188
            },
            map: map,
            title: "Banjarmasin"
        });
        var infowindow = new google.maps.InfoWindow({
            content: '<img height="150" src ="https://satujam.com/wp-content/uploads/2015/11/Cute-Baby-9.jpg" />'
        });
        marker.addListener('click', function() { //memasang listener
            infowindow.open(map, marker); //meletakkan marker dengan info window
        });
    }</script>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLRXCImhLD5PxRlAk8gZ13fBXxbfbiw44&callback=initMap" async defer></script>
</body>
</html>

Contoh Penggunaan GMaps API di penasihatguru.com

2. silahkan Ganti Google Api Key yang ada di source code tersebut yaitu code yang berwarna merah kemudian running program index.html tadi maka hasilnya akan seperti berikut :

Tutorial Cara Membuat dan Menggunakan Google Maps API Key

Nah itulah Cara Membuat dan Menggunakan Google Maps API Key sangat mudah kan. nah jika teman teman masih kesulitan dengan tutorial di atas silahkan berkomentar di bawah ya.

Baca Juga :

Jika artikel ini bermanfaat silahkan di share ya 🙂

Gravatar Image
Syaiful Hadi : Belajar bukan untuk hanya sekedar pintar,Tetapi belajar untuk berbagi dan mengajarkan

One thought on “Cara Membuat dan Menggunakan Google Maps API Key

Leave a Reply

Your email address will not be published. Required fields are marked *