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

Mengimpor Data ke Peta

Ringkasan

Pelajari selengkapnya tentang cara mengimpor data GeoJSON dari sumber lokal atau jarak jauh , dan menampilkannya pada peta. Tutorial ini menggunakan peta di bawah untuk menggambarkan berbagai teknik dalam mengimpor data ke peta.

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>

Memuat data

Bagian ini menunjukkan cara memuat data dari domain yang sama seperti aplikasiMaps JavaScript API Anda, atau dari domain yang berbeda.

Memuat data dari domain yang sama

Layer Data Google Maps menyediakan kontainer untuk data geospasial arbitrer (termasuk GeoJSON). Jika data Anda berada di file yang di-host pada domain yang sama seperti aplikasi Maps JavaScript API, Anda dapat memuatnya menggunakan metode map.data.loadGeoJson(). File harus berada di domain yang sama, namun Anda dapat meng-host di subdomain yang berbeda. Misalnya, Anda dapat melakukan permintaan ke files.example.com dari www.example.com.

map.data.loadGeoJson('data.json');

Memuat data di seluruh domain

Anda juga dapat meminta data dari domain lain jika konfigurasi domain memungkinkan permintaan tersebut. Standar untuk izin ini disebut Cross-origin resource sharing (CORS). Jika domain memungkinkan permintaan lintas domain, header respons harus menyertakan deklarasi berikut:

Access-Control-Allow-Origin: *

Gunakan Chrome Developer Tools (DevTools) untuk mengetahui apakah domain telah mengaktifkan CORS.

Memuat data dari domain tersebut sama seperti memuat JSON dari domain yang sama:

map.data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');

Meminta JSONP

Domain target harus mendukung permintaan JSONP untuk menggunakan teknik ini.

Untuk meminta JSONP, gunakan createElement() untuk menambahkan tag script ke bagian head dokumen Anda.

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);

Bila skrip berjalan, domain target akan meneruskan data sebagai argumen ke another script yang biasanya dinamai callback(). Domain target menentukan nama skrip callback yang merupakan nama pertama pada laman saat Anda memuat URL target di browser.

Misalnya, memuat http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp di jendela browser untuk membuka nama callback sebagai eqfeed_callback.

Anda harus menentukan skrip callback di kode Anda:

function eqfeed_callback(response) {
  map.data.addGeoJson(response);
}

Gunakan metode addGeoJson() untuk menempatkan data GeoJSON yang di-parse pada peta.

Menata gaya data

Anda dapat mengubah tampilan data Anda dengan menambahkan data GeoJSON pada objek Map. Baca panduan developer untuk informasi selengkapnya tentang penataan gaya data Anda.

Ketahui selengkapnya

  • GeoJSON adalah format terbuka yang digunakan secara luas untuk enkode data geografis, yang berdasarkan pada JSON (JavaScript Object Notation). Alat dan metode JavaScript yang dirancang untuk data JSON juga berfungsi dengan GeoJSON. Baca panduan developer untuk informasi selengkapnya.
  • JSONP adalah singkatan dari padded JSON. Ini adalah metode komunikasi yang digunakan di program JavaScript yang berjalan di browser web untuk meminta data dari server di domain yang berbeda.

Kirim masukan tentang...

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