Mengimpor Data ke Maps

Ringkasan

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

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

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    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.
  const 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.
const eqfeed_callback = function (results: any) {
  for (let i = 0; i < results.features.length; i++) {
    const coords = results.features[i].geometry.coordinates;
    const latLng = new google.maps.LatLng(coords[1], coords[0]);

    new google.maps.Marker({
      position: latLng,
      map: map,
    });
  }
};

declare global {
  interface Window {
    initMap: () => void;
    eqfeed_callback: (results: any) => void;
  }
}
window.initMap = initMap;
window.eqfeed_callback = eqfeed_callback;

JavaScript

let 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.
  const 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.
const eqfeed_callback = function (results) {
  for (let i = 0; i < results.features.length; i++) {
    const coords = results.features[i].geometry.coordinates;
    const latLng = new google.maps.LatLng(coords[1], coords[0]);

    new google.maps.Marker({
      position: latLng,
      map: map,
    });
  }
};

window.initMap = initMap;
window.eqfeed_callback = eqfeed_callback;

CSS

/*
 * 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;
}

HTML

<html>
  <head>
    <title>Earthquake Markers</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>

Mencoba Contoh

Memuat data

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

Memuat data dari domain yang sama

Lapisan Data Google Maps menyediakan penampung untuk data geospasial arbitrer (termasuk GeoJSON). Jika data Anda berada dalam file yang dihosting di domain yang sama dengan aplikasi Maps JavaScript API, Anda dapat memuatnya menggunakan metode map.data.loadGeoJson(). File tersebut harus berada di domain yang sama, tetapi Anda dapat menghostingnya di subdomain berbeda. Misalnya, Anda dapat mengajukan permintaan ke files.example.com dari www.example.com.

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

Memuat data dari berbagai domain

Anda juga dapat meminta data dari domain selain domain Anda sendiri, jika konfigurasi domain mengizinkan permintaan tersebut. Standar untuk izin ini disebut Cross-origin resource sharing (CORS). Jika sebuah domain telah mengizinkan permintaan lintas domain, header responsnya akan menyertakan deklarasi berikut:

Access-Control-Allow-Origin: *

Gunakan Chrome Developer Tools (DevTools) untuk mengetahui apakah sebuah 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 untuk JSONP agar dapat 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);

Saat skrip berjalan, domain target meneruskan data sebagai argumen ke skrip lain, biasanya bernama callback(). Domain target menentukan nama skrip callback yang merupakan nama pertama di halaman saat Anda memuat URL target di browser.

Misalnya, muat http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp di jendela browser untuk menampilkan 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 diuraikan pada peta.

Menata gaya data

Anda dapat mengubah tampilan data dengan menambahkan data GeoJSON ke objek Peta. Baca panduan developer untuk mengetahui informasi selengkapnya tentang gaya visual data Anda.

Pelajari lebih lanjut

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