[PHP] Membuat Peta Lokasi Dengan Google Maps API

Waktu Membaca: 4 menit

 

Diartikel ini kita akan belajar membuat peta lokasi dengan Google Maps API. Peta lokasi tersebut akan ditandai oleh Marker. Data marker tersebut diambil dari  database MySQL sehingga data bersifat dinamis.

Sebelum kita mulai, anda harus mempunyai Google Maps API Key (untuk web) terlebih dahulu. API Key tersebut anda bisa mendapatkannya di https://developers.google.com/maps/web/ , cukup dengan klik tombol Get A Key.

Pendahuluan

Di peta lokasi yang akan kita buat, akan menampilkan secara default peta Indonesia dengan beberapa lokasi yang ditandai oleh markers. Jika markers tersebut di klik, maka menampilkan informasi berupa InfoWindow yang berisi alamat.

Data markers yang disimpan pada tabel di MySQL berformat DD (decimal degree). Perlu diperhatikan, jika anda mempunyai data lokasi berformat DMS (degrees, minutes, seconds)  dan ingin menampilkannya di tutorial ini, maka anda harus melakukan konversi terlebih dahulu ke format DD .

Persiapan Data

Buat dahulu Database baru bernama map, dan tabel bernama lokasi. Ditabel lokasi kita buat 4 kolom yaitu lokasi_id, lat, long dan alamat.

lokasi (table)

Data table lokasi

Jika anda ingin menggunakan sample data (berserta script table) yang saya gunakan, dapat didownload di Google Drive saya.

File Koneksi

buat file bernama koneksi.php, ketik kode berikut:

<?php 
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'map');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>
File Map

Selanjutnya buat lagi file php bernama map.php, tulis kodenya sebagai berikut :

<?php
include("koneksi.php");
?>
  <div id="dvMap" style="width: 1000px; height: 550px"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_ANDA" async defer></script>
  <script type="text/javascript">
    var markers = [
    <?php
    $sql = mysqli_query($db, "SELECT * FROM lokasi");
    while(($data =  mysqli_fetch_assoc($sql))) {
    ?>
    {
                 "lat": '<?php echo $data['lat']; ?>',
         "long": '<?php echo $data['long']; ?>',
         "alamat": '<?php echo $data['alamat']; ?>'
    },
    <?php
    }
    ?>
    ];
    </script>
    <script type="text/javascript">
        window.onload = function () {

            var mapOptions = {
            center: new google.maps.LatLng(-2.2459632,116.2409634),
                zoom: 5,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }; 
            var infoWindow = new google.maps.InfoWindow();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

            for (i = 0; i < markers.length; i++) {
                var data = markers[i];
        var latnya = data.lat;
        var longnya = data.long;
        
        var myLatlng = new google.maps.LatLng(latnya, longnya);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.alamat
                });
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent('<b>Lokasi</b> :' + data.alamat + '<br>');
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
            }
        }
    </script>

 

note : pastikan file koneksi.php dan map.php berada dalam satu folder yang sama di c:\xampp\htdocs\, lokasi folder htdocs tergantung dimana anda saat menginstal xampp 🙂

Penjelasan Kode
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY_ANDA" async defer></script>

string API_KEY_ANDA diisi dengan API key yang anda punya.

<script type="text/javascript">
    var markers = [
    <?php
    $sql = mysqli_query($db, "SELECT * FROM lokasi");
    while(($data =  mysqli_fetch_assoc($sql))) {
    ?>
    {
                 "lat": '<?php echo $data['lat']; ?>',
         "long": '<?php echo $data['long']; ?>',
         "alamat": '<?php echo $data['alamat']; ?>'
    },
    <?php
    }
    ?>
    ];
    </script>

membuat array di javascript bernama markers, isi array (lat,long dan alamat) diambil dari tabel lokasi dengan looping menggunakan script PHP, dan isi dari markers akan terlihat seperti berikut :

center: new google.maps.LatLng(-2.2459632,116.2409634),

atur posisi map berada di latlong Indonesia.

var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

inisiasi infowindow dan google map, sementara google map berada dielement div dengan id dvMap.

for (i = 0; i < markers.length; i++) {
        var data = markers[i];
  var latnya = data.lat;
  var longnya = data.long;
        
  var myLatlng = new google.maps.LatLng(latnya, longnya);
        var marker = new google.maps.Marker({
             position: myLatlng,
             map: map,
             title: data.alamat
        });
        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
            infoWindow.setContent('<b>Lokasi</b> :' + data.alamat + '<br>');
            infoWindow.open(map, marker);
        });
     })(marker, data);
}

lakukan looping sebanyak data pada array markers. Disini juga dilakukan penambahan marker sesuai koordinat latlong dan menambahkan event addlistener click pada marker. Sehingga ketika marker diklik oleh user, akan menampilkan infowindow.

Hasilnya:

Kita coba klik salah satu marker, maka akan memunculkan InfoWindow :

Semoga Bermanfaat

Referensi : 

https://en.wikipedia.org/wiki/Geographic_coordinate_conversion
https://developers.google.com/maps/documentation/javascript/examples/map-simple

Artikel ini dibuat oleh Yudha Tri Putra sebagai penulis artikel, diperbolehkan menyalin artikel ini secara utuh tanpa mengubah atau menambah isi artikel.

Leave a comment

Leave a Reply

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