Anda sudah siap!

Untuk mulai mengembangkan, masuklah ke dokumentasi developer kami.

Aktifkan Google Maps JavaScript API

Untuk membantu Anda memulai, kami akan memandu Anda melalui Google Developers Console untuk melakukan beberapa hal terlebih dahulu:

  1. Buat atau pilih sebuah proyek
  2. Aktifkan Google Maps JavaScript API dan layanan terkait
  3. Buat kunci yang sesuai
Lanjutkan

Memvisualisasikan Data: Memetakan Gempa Bumi

Ringkasan

Tutorial ini menampilkan cara memvisualisasikan data pada Google Maps. Sebagai contoh, peta dalam tutorial ini memvisualisasikan data tentang lokasi gempa bumi dan kekuatannya. Pelajari berbagai teknik yang akan digunakan bersama sumber data Anda sendiri, dan buat berbagai cerita hebat di Google Maps seperti di bawah ini.

2 bingkai pertama yang terlihat di atas (dari kiri ke kanan) menampilkan peta dengan marker dasar, dan lingkaran berukuran tertentu. Bingkai terakhir menampilkan sebuah peta panas.

Mengimpor data Anda

Tutorial ini menggunakan data gempa bumi realtime dari United States Geological Survey (USGS). Situs web USGS menyediakan data mereka dalam sejumlah format, yang bisa Anda salin ke domain untuk diakses secara lokal oleh aplikasi Anda. Tutorial ini meminta JSONP secara langsung dari server USGS dengan menambahkan tag script ke kepala dokumen.

Catatan: Anda seharusnya hanya meminta data dari server yang benar-benar Anda percaya, karena ada risiko keamanan potensial pada pemuatan materi lintas-domain.

// Create a script tag and set the USGS URL as the source.
        var script = document.createElement('script');

        script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
        document.getElementsByTagName('head')[0].appendChild(script);

Menempatkan marker dasar

Karena kini Anda telah menarik data tentang lokasi gempa bumi dari umpan USGS ke dalam aplikasi, Anda bisa menampilkannya pada peta. Bagian ini menampilkan cara membuat peta yang menggunakan data hasil impor untuk menempatkan marker dasar pada pusat gempa di setiap lokasi gempa bumi.

Bagian di bawah ini menampilkan seluruh kode yang Anda butuhkan untuk membuat peta dalam tutorial ini.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(2.8,-187.3),
    mapTypeId: 'terrain'
  });

  // Create a <script> tag and set the USGS URL as the source.
  var script = document.createElement('script');
  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
  document.getElementsByTagName('head')[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
window.eqfeed_callback = function(results) {
  for (var i = 0; i < results.features.length; i++) {
    var coords = results.features[i].geometry.coordinates;
    var latLng = new google.maps.LatLng(coords[1],coords[0]);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map
    });
  }
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Cobalah sendiri

Arahkan ke atas kanan blok kode untuk menyalin kode atau membukanya dalam JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      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'), {
          zoom: 2,
          center: new google.maps.LatLng(2.8,-187.3),
          mapTypeId: 'terrain'
        });

        // Create a <script> tag and set the USGS URL as the source.
        var script = document.createElement('script');
        // This example uses a local copy of the GeoJSON stored at
        // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
        script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
        document.getElementsByTagName('head')[0].appendChild(script);
      }

      // Loop through the results array and place a marker for each
      // set of coordinates.
      window.eqfeed_callback = function(results) {
        for (var i = 0; i < results.features.length; i++) {
          var coords = results.features[i].geometry.coordinates;
          var latLng = new google.maps.LatLng(coords[1],coords[0]);
          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
        }
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Menggunakan bentuk dan peta panas untuk menyesuaikan peta

Bagian ini menampilkan cara lain untuk menyesuaikan kumpulan data yang kaya pada peta. Perhatikan peta yang dibuat di bagian sebelumnya pada tutorial ini yang menampilkan marker pada setiap lokasi gempa bumi. Anda bisa menyesuaikan marker untuk memvisualisasikan data tambahan, seperti lokasi yang memiliki gempa bumi paling banyak, dan kekuatan atau kedalamannya.

Inilah beberapa opsi untuk menyesuaikan marker dasar:

  • Menggunakan ukuran lingkaran:
    Anda bisa menggambar lingkaran (atau bentuk lainnya) dengan ukuran relatif terhadap kekuatan gempa bumi dengan menggunakan simbol. Dengan cara ini, gempa bumi yang kuat dinyatakan sebagai lingkaran terbesar pada peta.

  • Menggunakan peta panas:
    Heatmap Layer dalam pustaka visualisasi menawarkan cara sederhana sekaligus andal untuk menampilkan distribusi gempa bumi. Peta panas menggunakan beberapa warna untuk menyatakan kepadatan titik, sehingga mempermudah pemilihan area yang beraktivitas tinggi. Peta panas juga bisa menggunakan WeightedLocations sehingga, misalnya, semakin besar gempa bumi yang ditampilkan, semakin jelas peta panasnya.

Ukuran lingkaran

Peta di bawah ini menampilkan marker yang disesuaikan menggunakan lingkaran. Ukuran lingkaran bertambah sesuai kekuatan gempa bumi di lokasi tertentu.

Bagian di bawah ini menampilkan seluruh kode yang Anda butuhkan untuk membuat peta dengan marker lingkaran yang disesuaikan.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {lat: -33.865427, lng: 151.196123},
    mapTypeId: 'terrain'
  });

  // Create a <script> tag and set the USGS URL as the source.
  var script = document.createElement('script');

  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
  document.getElementsByTagName('head')[0].appendChild(script);

  map.data.setStyle(function(feature) {
    var magnitude = feature.getProperty('mag');
    return {
      icon: getCircle(magnitude)
    };
  });
}

function getCircle(magnitude) {
  return {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: 'red',
    fillOpacity: .2,
    scale: Math.pow(2, magnitude) / 2,
    strokeColor: 'white',
    strokeWeight: .5
  };
}

function eqfeed_callback(results) {
  map.data.addGeoJson(results);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Cobalah sendiri

Arahkan ke atas kanan blok kode untuk menyalin kode atau membukanya dalam JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      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'), {
          zoom: 2,
          center: {lat: -33.865427, lng: 151.196123},
          mapTypeId: 'terrain'
        });

        // Create a <script> tag and set the USGS URL as the source.
        var script = document.createElement('script');

        // This example uses a local copy of the GeoJSON stored at
        // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
        script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
        document.getElementsByTagName('head')[0].appendChild(script);

        map.data.setStyle(function(feature) {
          var magnitude = feature.getProperty('mag');
          return {
            icon: getCircle(magnitude)
          };
        });
      }

      function getCircle(magnitude) {
        return {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: 'red',
          fillOpacity: .2,
          scale: Math.pow(2, magnitude) / 2,
          strokeColor: 'white',
          strokeWeight: .5
        };
      }

      function eqfeed_callback(results) {
        map.data.addGeoJson(results);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Memahami kode

Tabel di bawah ini menjelaskan kode yang membuat marker lingkaran.

Kode dan keterangan
  map.data.setStyle(function(feature) {
    var magnitude = feature.getProperty('mag');
    return {
      icon: getCircle(magnitude)
    };
  });

Menambahkan gaya ke Data Layer yang memanggil fungsi getCircle() .
Membuat gambar khusus untuk titik sebagai ganti marker merah default.
function getCircle(magnitude) {
      var circle = {
        path: google.maps.SymbolPath.CIRCLE,
        scale: magnitude
      };
      return circle;
    }

Properti magnitude gempa bumi diteruskan ke fungsi ini.
getCircle() menggambar lingkaran yang ukurannya didefinisikan oleh nilai kekuatan gempa, dan mengirim kembali lingkaran itu untuk digunakan sebagai marker khusus gempa bumi.

Peta panas

Peta panas memudahkan pembaca memahami distribusi gempa bumi, yang dilaporkan oleh USGS. Daripada menempatkan marker di setiap pusat gempa, peta panas menggunakan warna dan bentuk untuk menyatakan distribusi data. Dalam contoh ini, merah menyatakan area aktivitas gempa bumi yang tinggi.

Bagian di bawah ini menampilkan seluruh kode yang Anda butuhkan untuk membuat peta ini.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {lat: -33.865427, lng: 151.196123},
    mapTypeId: 'terrain'
  });

  // Create a <script> tag and set the USGS URL as the source.
  var script = document.createElement('script');

  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
  document.getElementsByTagName('head')[0].appendChild(script);

}

function eqfeed_callback(results) {
  var heatmapData = [];
  for (var i = 0; i < results.features.length; i++) {
    var coords = results.features[i].geometry.coordinates;
    var latLng = new google.maps.LatLng(coords[1], coords[0]);
    heatmapData.push(latLng);
  }
  var heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatmapData,
    dissipating: false,
    map: map
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=visualization&callback=initMap" async defer></script>

Cobalah sendiri

Arahkan ke atas kanan blok kode untuk menyalin kode atau membukanya dalam JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      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'), {
          zoom: 2,
          center: {lat: -33.865427, lng: 151.196123},
          mapTypeId: 'terrain'
        });

        // Create a <script> tag and set the USGS URL as the source.
        var script = document.createElement('script');

        // This example uses a local copy of the GeoJSON stored at
        // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
        script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
        document.getElementsByTagName('head')[0].appendChild(script);

      }

      function eqfeed_callback(results) {
        var heatmapData = [];
        for (var i = 0; i < results.features.length; i++) {
          var coords = results.features[i].geometry.coordinates;
          var latLng = new google.maps.LatLng(coords[1], coords[0]);
          heatmapData.push(latLng);
        }
        var heatmap = new google.maps.visualization.HeatmapLayer({
          data: heatmapData,
          dissipating: false,
          map: map
        });
      }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization&callback=initMap">
    </script>
  </body>
</html>

Memahami kode

Tabel di bawah ini menjelaskan kode yang membuat peta panas.

Kode dan keterangan
<script
async defer
src="https://maps.googleapis.com/maps/api/js?key
=YOUR_API_KEY&libraries=visualization&callback=initMap">
</script>

Pustaka visualization digunakan untuk menampilkan peta panas.
Pustaka ini berisi kelas HeatmapLayer.
Saat menggunakan pustaka, ia akan dimuat bila Maps API JavaScript telah dipanggil.
  function eqfeed_callback(results) {
    var heatmapData = [];
    for (var i = 0; i &lt; results.features.length; i++) {
      var coords = results.features[i].geometry.coordinates;
      var latLng = new google.maps.LatLng(coords[1], coords[0]);
      heatmapData.push(latLng);
    }
    var heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapData,
      dissipating: false,
      map: map
    });
  }

Sebagaimana dengan contoh sebelumnya, data USGS diteruskan ke fungsi eqfeed_callback .
Iuni menambahkan koordinat setiap gempa bumi ke larik heatmapData.
Larik itu kemudian diteruskan ke konstruktor HeatmapLayer , yang akan membuat peta panas dan menampilkannya pada peta.
  function eqfeed_callback(results) {
    var heatmapData = [];
    for (var i = 0; i &lt; results.features.length; i++) {
      var coords = results.features[i].geometry.coordinates;
      var latLng = new google.maps.LatLng(coords[1], coords[0]);
      var magnitude = results.features[i].properties.mag;
      var weightedLoc = {
        location: latLng,
        weight: Math.pow(2, magnitude)
      };
      heatmapData.push(weightedLoc);
    }
    var heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapData,
      dissipating: false,
      map: map
    });
  }

Untuk menimbang hasil menurut kekuatan gempa, Anda bisa meneruskan objek WeightedLocation ke larik heatmapData sebagai gantinya.

Informasi selengkapnya

Baca selengkapnya tentang topik berikut:

Kirim masukan tentang...

Google Maps JavaScript API
Google Maps JavaScript API
Butuh bantuan? Kunjungi halaman dukungan kami.