Cara membuat dan memasang google maps API dengan PHP

Pada hari yang cerah ini, belajar coding akan memberikan sebuah tutorial mengenai bagaimana cara membuat dan memasang google maps API dengan PHP. Langkah awal untuk membuat google API teman-teman harus mempunyai akun google jika teman-teman belum punya maka harus buat sendiri.

Baiklah daripada penasaran langsung saja kita praktekkan....

Langkah-langkahnya sebagai berikut :

1. Buka browser dan masukkan akun google kalian jika tidak punya maka harus buat terlebih dahulu

2. Buka link google API console : https://console.developers.google.com dan harus mensetejui persyaratan yang ada dengan memilih ya/yes.

3. 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 (+).

4. Buat nama project dan lokasi jika ingin di masukkan letak lokasi kemudian tekan buat

5. Kemudian pilih menu "lihat semua" jika tidak ada pilih menu library yang ada di menu sebelah kanan dan cari nama aplikasi Google Maps JavaScript API atau Maps JavaScript API.

6. Ketika Maps JavaScript API dikilik akan muncul deskripsi tentang aplikasi tersebut dan pikih aktifkan atau enable.

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

8. Kemudian buat Index.html menggunakan text editor yang kalian punya dan masukkan source code seperti berikut dan ubah kunci API yang telah dibuat tadi pada baris kode terakhir yang berwarna merah

<html>
<head>
<title>Praktikum WebGis 1</title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<style>
#map{/* modifikasi element html yang ber-id map*/
height: 100%;
}
html, body{
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap(){
map = new google.maps.Map(document.getElementById('map'),{
center: {lat:-3.397, lng:114.644},
zoom: 10
});
var marker = new google.maps.Marker({
position:{lat: -3.792391, lng:114.775188},
map : map,
title :"Rumah Muhammad Syahrul Rizal"
});
var infowindow = new google.maps.InfoWindow({
content:'<b>Rumah Muhammad Syahrul Rizal A1316076</b> <br> <a href="https://www.google.co.id/search?safe=active&biw=1366&bih=662&tbm=isch&sa=1&ei=aILhWquAOsn1vgS29YDgCA&q=baby+imut&oq=baby+imut&gs_l=psy-ab.3...78152.81855.0.82794.18.10.0.0.0.0.0.0..0.0....0...1c.1.64.psy-ab..18.0.0.0...0.NvehCRE4PdU#imgrc=kX_Nx-TvcI7J2M:">klik disini</a> <br><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>
<script src="https://maps.googleapis.com/maps/api/js?key= AIzaSyB9rPG637E1ZFT8aKm0Dt36II0GvoBxtMg&callback=initMap" async defer></script>
</body>
</html>

9. Tampilan Index.html yang akan dihasilkan :

Sekian dari tutorial cara membuat dan memasang google maps API dengan PHP semoga dapat bermanfaat dan menjadi tambahan ilmu bagi kita semua, jika terdapat kesalahan dan saran silahkan berikan komentar kalian di kolom comment. Terima Kasih...!!!

Cara membuat dan memasang google maps API dengan PHP