Google map api php mysql

20 September 2021

Perlu diketahui bersama bahwa Google Maps Platform dapat dijalankan di banyak bahasa pemrograman. Basis pemrograman dalam pengembangan aplikasi Google Maps Platform ini untuk website adalah Javascript. Namun, dalam artikel ini akan membahas bagaimana mengkombinasikan PHP dan Javascript untuk penulisan kode serta MySQL sebagai penyimpanan datanya. Simak dalam intip cara menampilkan marker Google Maps Platform API menggunakan PHP dan MySQL.

Berikut ini hal-hal yang perlu Anda persiapkan untuk memulainya:

1. Local Server, dalam artikel ini pengembangan di laptop/ komputer Anda masing-masing menggunakan software XAMPP yang telah menjalankan module Apache dan MySQL.
2. Text Editor, dalam hal ini menggunakan Visual Studio Code sebagai text editor
3. API Key Google Maps Platform yang sudah dijalankan service Dynamic Maps atau Maps Javascript API

Bagi Anda yang merupakan website developer, bukan hal yang baru lagi dalam menggunakan XAMPP dan Visual Studio Code pun dengan PHP dan MySQL. Dalam hal ini, kita akan menampilkan titik-titik persebaran beberapa kota dan kabupaten. Langsung saja kita sama-sama belajar cara menampilkan marker Google Maps API menggunakan PHP dan MySQL, berikut ini:

1. Jalankan terlebih dahulu XAMPP untuk module Apache dan MySQL.
2. Buka phpmyadmin untuk membuat database dengan nama “db_rnd”.
3. Setelah membuat database “db_rnd”, buatlah table dengan nama “latlng_kota_kab”, silahkan ikuti script SQL berikut agar lebih cepat.

--
-- Table structure for table `latlng_kota_kab`
--

CREATE TABLE latlng_kota_kab[
  `id` int[11] NOT NULL,
  `kota_kab` varchar[100] NOT NULL,
  `latitude` varchar[50] NOT NULL,
  `longitude` varchar[50] NOT NULL
] ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `latlng_kota_kab`
--

INSERT INTO `latlng_kota_kab` [`id`, `kota_kab`, `latitude`, `longitude`] VALUES
[1, 'Jakarta Pusat', '-6.2060905', '106.8475342'],
[2, 'Jakarta Utara', '-6.1554034', '106.8926811'],
[3, 'Jakarta Selatan', '-6.2614652', '106.810627'],
[4, 'Jakarta Barat', '-6.1674356', '106.7637634'],
[5, 'Jakarta Timur', '-6.2248623', '106.9004059'],
[6, 'Kota Depok', '-6.4024778', '106.7942333'],
[7, 'Kota Bogor', '-6.5971469', '106.8060388'],
[8, 'Kab. Bogor', '-6.5517758', '106.6291304'],
[9, 'Kota Sukabumi', '-6.9277901', '106.9299316'],
[10, 'Kab. Sukabumi', '-7.2134052', '106.6291304'],
[11, 'Kab. Cianjur', '-7.3579773', '107.1957203'],
[12, 'Kab. Bekasi', '-6.3668231', '107.1736908'],
[13, 'Kota Bekasi', '-6.2381727', '106.9755936'];

--
-- Indexes for dumped tables
--

--
-- Indexes for table `latlng_kota_kab`
--
ALTER TABLE `latlng_kota_kab`
  ADD PRIMARY KEY [`id`];

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `latlng_kota_kab`
--
ALTER TABLE `latlng_kota_kab`
  MODIFY `id` int[11] NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11

4. Buka teks editor Anda dan kemudian mulai ketikkan kode HTML yang dimulai dari deklarasi HTML terlebih dahulu

5. Kemudian, lanjut dengan tag buka HTML, head, title,style dan body seperti dibawah ini.

    Intip Cara Menampilkan Marker Google Maps API Menggunakan PHP dan MySQL | Terralogiq
 
    
        #map {
            height: 100%;
        }
 
        /* Opsional: Untuk menampilkan map dengan full */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    


 

6. Setelah menambahkan kode tersebut, selanjutnya langsung mendeklarasikan #map atau id=map dalam div di antara tag body.

    Intip Cara Menampilkan Marker Google Maps API Menggunakan PHP dan MySQL | Terralogiq
 
    
        #map {
            height: 100%;
        }
 
        /* Optional: Makes the sample page fill the window. */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    


 
  

 

7. Agar dapat menampilkan Dynamic Maps Google Maps API, Anda perlu melakukan deklarasi dengan memasukkan tag script di bawah tag div. Perlu diketahui juga bahwa dalam artikel ini akan menggabungkan objek marker dan objek infoWindow. Anda dapat melakukan copy paste script yang sudah disediakan seperti dibawah ini agar prosesnya lebih cepat.

    Intip Cara Menampilkan Marker Google Maps API Menggunakan PHP dan MySQL | Terralogiq
 
    
        #map {
            height: 100%;
        }
 
        /* Optional: Makes the sample page fill the window. */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
    


 
  

 

   
    
    let map;
    let infoWindow;
    let mapOptions;
    let bounds;
 
    function GMPStart[]{
        // infoWindow ini digunakan untuk menampilkan pop-up diatas marker terkait lokasi markernya
        infoWindow = new google.maps.InfoWindow;
        //  Variabel berisi properti tipe peta yang bisa diubah-ubah
        mapOptions = {
            mapTypeId: google.maps.MapTypeId.ROADMAP
        } 
        // Deklarasi untuk melakukan load map Google Maps API
        map = new google.maps.Map[document.getElementById['map'], mapOptions];      
        // Variabel untuk menyimpan batas kordinat
        bounds = new google.maps.LatLngBounds[];
        // Pengambilan data dari database MySQL