Press "Enter" to skip to content

Menampilkan Informasi Gempa Di Google Maps

Halo, akhirnya bisa nulis lagi deh! Alhamdulillah inspirasi lagi banyak nongol akhir-akhir ini. OK, sesuai dengan judul diatas kita akan mencoba menampilkan informasi gempa di Google Maps. Fungsinya ? sudah jelas, kita akan menampilkan gempa terkini dengan data yang kita peroleh dari situs resmi BMKG.

Buat yang mungkin belum tahu apa itu BMKG, BMKG adalah singkatan dari Badan Meteorologi, Klimatologi, dan Geofisika tapi biasanya kalau orang-orang di TV suka menyebutnya dengan nama Badan Meteorologi dan Geofisika saja.

BMKG ini adalah sebuah Badan Lembaga Pemerintah Non Departemen yang kebetulan fokus dalam mengurusi tentang cuaca, info gempa dan juga masalah gunung berapi, itu yang saya tahu. 😀

Informasi Gempa Di Google Maps # Persiapan Data

OK kita mulai aja ya! pertama-tama yang kita butuhkan adalah alamat URL dari web service situ BMKG. kita bisa mendapatkannya di sini. Selain info gempa terkini, kita juga bisa memanfaatkan data dari BMKG yang lainnya lho! asal jangan dipake buat hal yang ga bener aja ya. hehehehe 😀

OK, URL sudah ada sekarang kita akan mulai masuk ke script untuk menampilkan informasi gempa di Google Maps.

Informasi Gempa Di Google Maps # Script

Pertama kita buat script PHP untuk melakukan parsing data dari web service BMKG. Karena adanya masalah CORS yang diblok, jadi saya sedikit kesulitan untuk melakukan parsing dengan metode AJAX / Jquery, jadi ya mau ga mau parsingnya pake PHP.  Untungnya dengan PHP, kita dapat dengan mudah memparsing data XML tersebut dengan function simplexml_load_file. Setelah kita berhasil melakukan parsing, kita convert data tersebut menjadi bentuk JSON. Agak ribet sih, tapi yaa….gini deh -____-

parse.php
<?php
header('Content-Type: application/json');
$bmkg = simplexml_load_file("http://data.bmkg.go.id/gempaterkini.xml");

$i = 0;
foreach ($bmkg as $key=>$val) {
    $coordinates = explode(",", (string)$val->point->coordinates);
    $gempa[$i]['tanggal'] = (string)$val->Tanggal;
    $gempa[$i]['jam'] = (string)$val->Jam;
    $gempa[$i]['wilayah'] = (string)$val->Wilayah;
    $gempa[$i]['kedalaman'] = (string)$val->Kedalaman;
    $gempa[$i]['latitude'] = (string)$coordinates[1];
    $gempa[$i]['longitude'] = (string)$coordinates[0];
    $gempa[$i]['mag'] = (string)$val->Magnitude;
    $i++;
}

echo json_encode($gempa);

Nah, setelah kita berhasil mengkonversi data tersebut ke bentuk JSON, barulah kita buat script untuk menampilkan markernya di peta, pada tutorial ini saya menggunakan Markercluster agar marker tidak menumpuk di peta.

Baca Juga : Menghitung Tarif Berdasarkan Jarak di Google Maps

index.php
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0" />
    <title>Sistem Informasi Gempa</title>
    <style type="text/css">
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script async defer src="https://maps.googleapis.com/maps/api/js"></script>
    <!-- load library untuk Marker Cluster -->
    <script type="text/javascript" src="https://google-maps-utility-library-v3.googlecode.com/svn-history/r287/trunk/markerclusterer/src/markerclusterer.js"></script>
    <script>
    var map;
    function initMap() {
      map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: -2.548926, lng: 118.0148634 },
        zoom: 5
      });
      var url = "parse.php";
      $.ajax({
          url: url,
          dataType: 'json',
          cache: false,
          success: function(msg){
              var markers = [];
              for(i=0;i < msg.length;i++){
                  var point = new google.maps.LatLng(parseFloat(msg[i].latitude), parseFloat(msg[i].longitude));
                  tanda = new google.maps.Marker({
                      position: point,
                      map: map,
                      clickable: true
                  });

                  var infowindow = new google.maps.InfoWindow();

                  google.maps.event.addListener(tanda, 'click', (function(tanda, i) {
                  return function() {
                    var contentString = [
                                          '<div style="padding:10px; width:400px; height:auto;">',
                                            '<table width="100%" cellpadding="3" cellspacing="3">',
                                              '<tr>',
                                                '<td>',
                                                'Wilayah',
                                                '</td>',
                                                '<td>',
                                              ''+msg[i].wilayah+'',
                                                '</td>',
                                              '</tr>',
                                              '<tr>',
                                                '<td>',
                                                'Waktu',
                                                '</td>',
                                                '<td>',
                                              ''+msg[i].tanggal+'   '+msg[i].jam+'',
                                                '</td>',
                                              '</tr>',
                                              '<tr>',
                                                '<td>',
                                                'Kedalaman Gempa',
                                                '</td>',
                                                '<td>',
                                              ''+msg[i].kedalaman+'',
                                                '</td>',
                                              '</tr>',
                                              '<tr>',
                                                '<td>',
                                                'Skala Gempa',
                                                '</td>',
                                                '<td>',
                                              ''+msg[i].mag+'',
                                                '</td>',
                                              '</tr>',
                                            '</table>',
                                          '</div>'
                                        ].join('');
                      infowindow.setContent(contentString);
                      infowindow.open(map, tanda);
                  }
                })(tanda, i));
                  markers.push(tanda);
              }
              var markerCluster = new MarkerClusterer(map, markers);
          }
      });
    }
    </script>
  </head>
  <body onload="initMap()">
    <div id="map"></div>
  </body>
</html>


Informasi Gempa Di Google Maps # Output

Dari script tersebut, output yang akan kita dapatkan adalah sebagai berikut

Output - Menampilkan Informasi Gempa Di Google Maps

Cukup gampang kan ? Kamu bisa melihat demo dari script diatas dan juga mendownload source code nya pada link di bawah ini. Silahkan dicoba dan semoga bermanfaat 😀

Download Link
demo

5 Comments

  1. Pak Kapten Pak Kapten Januari 17, 2016

    piye pak? katane mau ngoding bareng. heuheu

    • El Cicko El Cicko Post author | Januari 18, 2016

      lagi sibuk nyiapin buat merit pak…mbuahahahaha 😀

  2. Sugrahaku Sugrahaku April 2, 2016

    maaf mas, gimana caranya biar waktu marker di klik muncul info dari lokasi tersebut, misalnya nama tempat atau nama jalan tersebut? terima kasih

    • El Cicko El Cicko Post author | April 2, 2016

      Perasaan udah ada informasi daerah / lokasinya deh gan

  3. DHANIE DHANIE Juli 30, 2016

    Permisi mas, untuk link source code nya kok ga bisa buat download yah.??

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *