Visualisasi: Peta

Ringkasan

Diagram Google Maps menampilkan peta menggunakan Google Maps API. Nilai data ditampilkan sebagai penanda pada peta. Nilai data dapat berupa koordinat (pasangan lintang/bujur) atau alamat. Peta akan diskalakan sehingga mencakup semua titik yang diidentifikasi.

Jika Anda ingin peta Anda berupa gambar garis, bukan citra satelit, gunakan geochart.

Lokasi yang Ditentukan

Anda dapat mengidentifikasi tempat untuk menempatkan penanda berdasarkan nama, seperti yang ditunjukkan di bawah pada peta sepuluh negara teratas ini berdasarkan populasi.

Saat pengguna memilih salah satu penanda, tooltip dengan nama dan populasi negara akan ditampilkan, karena kita menggunakan opsi showInfoWindow. Selain itu, jika pengguna mengarahkan kursor ke salah satu penanda untuk sementara waktu, tip 'judul' akan muncul dengan info yang sama, karena kita menggunakan opsi showTooltip. Berikut adalah HTML lengkapnya:

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('current', {
    'packages': ['map'],
    // Note: you will need to get a mapsApiKey for your project.
    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
    'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
    
    });
    google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['Country', 'Population'],
        ['China', 'China: 1,363,800,000'],
        ['India', 'India: 1,242,620,000'],
        ['US', 'US: 317,842,000'],
        ['Indonesia', 'Indonesia: 247,424,598'],
        ['Brazil', 'Brazil: 201,032,714'],
        ['Pakistan', 'Pakistan: 186,134,000'],
        ['Nigeria', 'Nigeria: 173,615,000'],
        ['Bangladesh', 'Bangladesh: 152,518,015'],
        ['Russia', 'Russia: 146,019,512'],
        ['Japan', 'Japan: 127,120,000']
      ]);

    var options = {
      showTooltip: true,
      showInfoWindow: true
    };

    var map = new google.visualization.Map(document.getElementById('chart_div'));

    map.draw(data, options);
  };
  </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Lokasi yang Di-geocoding

Anda juga dapat menentukan lokasi menurut lintang dan bujur, yang dimuat lebih cepat daripada lokasi bernama:

Diagram di atas mengidentifikasi empat lokasi menurut lintang dan bujur.

Data
  var data = google.visualization.arrayToDataTable([
    ['Lat', 'Long', 'Name'],
    [37.4232, -122.0853, 'Work'],
    [37.4289, -122.1697, 'University'],
    [37.6153, -122.3900, 'Airport'],
    [37.4422, -122.1731, 'Shopping']
  ]);
HTML lengkap
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {
        "packages":["map"],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        "mapsApiKey": "AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY"
      });
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Lat', 'Long', 'Name'],
          [37.4232, -122.0853, 'Work'],
          [37.4289, -122.1697, 'University'],
          [37.6153, -122.3900, 'Airport'],
          [37.4422, -122.1731, 'Shopping']
        ]);

        var map = new google.visualization.Map(document.getElementById('map_div'));
        map.draw(data, {
          showTooltip: true,
          showInfoWindow: true
        });
      }

    </script>
  </head>

  <body>
    <div id="map_div" style="width: 400px; height: 300px"></div>
  </body>
</html>

Menyesuaikan Penanda

Anda dapat menggunakan bentuk penanda yang diletakkan di tempat lain di web. Berikut adalah contoh penggunaan pin biru dari iconarsip.com:

Jika Anda memilih pin pada diagram di atas, pin tersebut akan miring. PNG, GIF, dan JPG didukung.

Data
  var options = {
    icons: {
      default: {
        normal: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
        selected: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
      }
    }
  };
HTML lengkap
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {
        "packages":["map"],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        "mapsApiKey": "AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY"
      });
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Lat', 'Long', 'Name'],
          [37.4232, -122.0853, 'Work'],
          [37.4289, -122.1697, 'University'],
          [37.6153, -122.3900, 'Airport'],
          [37.4422, -122.1731, 'Shopping']
        ]);

        var options = {
          icons: {
            default: {
              normal: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
              selected: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
            }
          }
        };

        var map = new google.visualization.Map(document.getElementById('map_markers_div'));
        map.draw(data, options);
      }

    </script>
  </head>

  <body>
    <div id="map_markers_div" style="width: 400px; height: 300px"></div>
  </body>
</html>

Menambahkan Beberapa Set Penanda

Selain membuat kumpulan penanda default, Anda juga dapat membuat beberapa kumpulan penanda.

Untuk membuat kumpulan penanda tambahan, tambahkan ID ke opsi icons dan tetapkan gambar penanda Anda. Kemudian, tambahkan kolom ke Tabel Data, dan tetapkan ID kumpulan penanda yang ingin Anda gunakan untuk setiap baris dalam Tabel Data (Anda juga dapat menggunakan 'default' atau null untuk menggunakan penanda default).

Opsi
      var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';

      var options = {
        zoomLevel: 6,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        icons: {
          blue: {
            normal:   url + 'Map-Marker-Ball-Azure-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
          },
          green: {
            normal:   url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
            selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
          },
          pink: {
            normal:   url + 'Map-Marker-Ball-Pink-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
          }
        }
      };
    
HTML lengkap
<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['map'],
      // Note: you will need to get a mapsApiKey for your project.
      // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
      'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
    });
    google.charts.setOnLoadCallback(drawMap);

    function drawMap () {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Address');
      data.addColumn('string', 'Location');
      data.addColumn('string', 'Marker')

      data.addRows([
        ['New York City NY, United States', 'New York',   'blue' ],
        ['Scranton PA, United States',      'Scranton',   'green'],
        ['Washington DC, United States',    'Washington', 'pink' ],
        ['Philadelphia PA, United States',  'Philly',     'green'],
        ['Pittsburgh PA, United States',    'Pittsburgh', 'green'],
        ['Buffalo NY, United States',       'Buffalo',    'blue' ],
        ['Baltimore MD, United States',     'Baltimore',  'pink' ],
        ['Albany NY, United States',        'Albany',     'blue' ],
        ['Allentown PA, United States',     'Allentown',  'green']
      ]);
      var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';

      var options = {
        zoomLevel: 6,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        icons: {
          blue: {
            normal:   url + 'Map-Marker-Ball-Azure-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
          },
          green: {
            normal:   url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
            selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
          },
          pink: {
            normal:   url + 'Map-Marker-Ball-Pink-icon.png',
            selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
          }
        }
      };
      var map = new google.visualization.Map(document.getElementById('map_div'));

      map.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="map_div" style="height: 500px; width: 900px"></div>
</body>
</html>

    

Menata Gaya Peta

Visualisasi Peta dilengkapi dengan kemampuan untuk menetapkan gaya kustom, sehingga Anda dapat membuat satu, atau beberapa, jenis peta kustom.

Anda dapat menentukan jenis peta kustom dengan membuat objek gaya peta dan menempatkannya di bawah ID (mapTypeId) di bawah opsi peta. Contoh:

  var options = {
    maps: {
      <map style ID>: <map style object>
    }
  };

Anda nanti dapat merujuk ke jenis peta kustom ini dengan ID gaya peta yang Anda tetapkan.

Objek gaya peta Anda berisi name, yang akan menjadi nama tampilan dalam kontrol jenis peta (tidak harus cocok dengan mapTypeId), dan array styles, yang akan berisi objek gaya untuk setiap elemen yang ingin Anda tentukan gayanya. Referensi Google Maps API berisi daftar berbagai elemen, fitur, dan jenis gaya yang dapat digunakan untuk membuat jenis peta kustom.

Catatan: mapTypeId kustom harus ditempatkan di bawah opsi maps.

Opsi
      var options = {
        mapType: 'styledMap',
        zoomLevel: 12,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        maps: {
          // Your custom mapTypeId holding custom map styles.
          styledMap: {
            name: 'Styled Map', // This name will be displayed in the map type control.
            styles: [
              {featureType: 'poi.attraction',
               stylers: [{color: '#fce8b2'}]
              },
              {featureType: 'road.highway',
               stylers: [{hue: '#0277bd'}, {saturation: -50}]
              },
              {featureType: 'road.highway',
               elementType: 'labels.icon',
               stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
              },
              {featureType: 'landscape',
               stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
              }
        ]}}
      };
HTML lengkap
<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {
      'packages': ['map'],
      // Note: you will need to get a mapsApiKey for your project.
      // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
      'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
    });
    google.charts.setOnLoadCallback(drawMap);

    function drawMap () {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Address');
      data.addColumn('string', 'Location');

      data.addRows([
        ['Lake Buena Vista, FL 32830, United States',                  'Walt Disney World'],
        ['6000 Universal Boulevard, Orlando, FL 32819, United States', 'Universal Studios'],
        ['7007 Sea World Drive, Orlando, FL 32821, United States',     'Seaworld Orlando' ]
      ]);

      var options = {
        mapType: 'styledMap',
        zoomLevel: 12,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        maps: {
          // Your custom mapTypeId holding custom map styles.
          styledMap: {
            name: 'Styled Map', // This name will be displayed in the map type control.
            styles: [
              {featureType: 'poi.attraction',
               stylers: [{color: '#fce8b2'}]
              },
              {featureType: 'road.highway',
               stylers: [{hue: '#0277bd'}, {saturation: -50}]
              },
              {featureType: 'road.highway',
               elementType: 'labels.icon',
               stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
              },
              {featureType: 'landscape',
               stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
              }
        ]}}
      };

      var map = new google.visualization.Map(document.getElementById('map_div'));

      map.draw(data, options);
    }
  </script>
</head>
<body>
<div id="map_div" style="height: 500px; width: 900px"></div>
</body>
</html>

Selain membuat jenis peta kustom, Anda juga dapat menentukan peta mana yang dapat dilihat pengguna di kontrol jenis peta dengan opsi mapTypeIds. Secara default, semua jenis peta, termasuk jenis peta kustom, akan muncul di kontrol jenis peta. Opsi mapTypeIds menerima array jenis peta yang Anda izinkan untuk dilihat oleh pengguna. String ini harus merujuk pada nama yang telah ditetapkan sebelumnya untuk gaya peta default (yaitu normal, satelit, medan, hybrid), atau ID gaya peta dari jenis peta kustom yang Anda tentukan. Dengan menetapkan opsi mapTypeIds, peta Anda hanya akan menyediakan jenis peta yang Anda tentukan dalam array ini.

Anda juga dapat menggunakan opsi ini bersama dengan opsi mapType untuk menetapkan gaya peta sebagai default, tetapi tidak menyertakannya dalam array mapTypeIds. Hal ini akan menyebabkan peta hanya ditampilkan pada saat pemuatan awal.

      var options = {
        mapType: 'styledMap',
        zoomLevel: 7,
        showTooltip: true,
        showInfoWindow: true,
        useMapTypeControl: true,
        // User will only be able to view/select custom styled maps.
        mapTypeIds: ['styledMap', 'redEverything', 'imBlue'],
        maps: {
          styledMap: {
            name: 'Styled Map',
            styles: [
              {featureType: 'poi.attraction',
               stylers: [{color: '#fce8b2'}]},
              {featureType: 'road.highway',
               stylers: [{hue: '#0277bd'}, {saturation: -50}]},
              {featureType: 'road.highway', elementType: 'labels.icon',
               stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]},
              {featureType: 'landscape',
               stylers: [{hue: '#259b24'}, {saturation: 10},{lightness: -22}]}
          ]},
          redEverything: {
            name: 'Redden All The Things',
            styles: [
              {featureType: 'landscape',
               stylers: [{color: '#fde0dd'}]},
              {featureType: 'road.highway',
               stylers: [{color: '#67000d'}]},
              {featureType: 'road.highway', elementType: 'labels',
               stylers: [{visibility: 'off'}]},
              {featureType: 'poi',
               stylers: [{hue: '#ff0000'}, {saturation: 50}, {lightness: 0}]},
              {featureType: 'water',
               stylers: [{color: '#67000d'}]},
              {featureType: 'transit.station.airport',
               stylers: [{color: '#ff0000'}, {saturation: 50}, {lightness: -50}]}
          ]},
          imBlue: {
            name: 'All Your Blues are Belong to Us',
            styles: [
              {featureType: 'landscape',
               stylers: [{color: '#c5cae9'}]},
              {featureType: 'road.highway',
               stylers: [{color: '#023858'}]},
              {featureType: 'road.highway', elementType: 'labels',
               stylers: [{visibility: 'off'}]},
              {featureType: 'poi',
               stylers: [{hue: '#0000ff'}, {saturation: 50}, {lightness: 0}]},
              {featureType: 'water',
               stylers: [{color: '#0288d1'}]},
              {featureType: 'transit.station.airport',
               stylers: [{color: '#0000ff'}, {saturation: 50}, {lightness: -50}]}
          ]}
        }
      };

Memuat

Nama paket google.charts.load adalah "map".

Perlu diketahui bahwa Anda harus mendapatkan mapsApiKey Anda sendiri untuk project Anda, bukan hanya menyalin yang digunakan dalam contoh di sini, untuk menghindari degradasi layanan data peta bagi pengguna Anda. Untuk detail selengkapnya, lihat Setelan Pemuatan.

      google.charts.load("current", {
        "packages":["map"],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        "mapsApiKey": "AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY"
      });

Nama class visualisasinya adalah google.visualization.Map. Karena nama yang disingkat, Map, bertentangan dengan class Map JavaScript, ChartWrapper tidak akan otomatis memuat paket ini saat Anda menentukan chartType: 'Map'. Namun, Anda dapat menentukan chartType: 'google.visualization.Map'.

  var visualization = new google.visualization.Map(container);

Format Data

Dua format data alternatif didukung:

  1. Pasangan Lat-Long - Dua kolom pertama harus berupa angka yang menentukan garis lintang dan bujur. Kolom ketiga opsional berisi string yang menjelaskan lokasi yang ditentukan dalam dua kolom pertama.
  2. String address - Kolom pertama harus berupa string yang berisi alamat. Alamat ini harus sudah lengkap dan dapat dibuat. Kolom kedua opsional berisi string yang mendeskripsikan lokasi di kolom pertama. Alamat string dimuat lebih lambat, terutama jika Anda memiliki lebih dari 10 alamat.

Catatan: Opsi Lat-Long pair memuat peta jauh lebih cepat, terutama dengan data yang besar. Sebaiknya gunakan opsi ini untuk set data yang besar. Kunjungi Google Maps API untuk mengetahui cara mengubah alamat Anda menjadi titik lintang/bujur. Peta dapat menampilkan maksimum 400 entri; jika data Anda berisi lebih dari 400 baris, hanya 400 baris pertama yang akan ditampilkan.

Opsi Konfigurasi

Name
enableScrollWheel

Jika disetel ke benar (true), akan memperbesar dan memperkecil menggunakan roda scroll mouse.

Jenis: boolean
Default: false (salah)
ikon

Menyimpan kumpulan penanda kustom. Setiap kumpulan penanda dapat menentukan gambar penanda normal dan selected. Dapat menetapkan kumpulan default dengan menetapkan opsi default, atau menetapkan penanda kustom dengan menetapkan ID penanda unik.

var options = {
  icons: {
    default: {
      normal:   '/path/to/marker/image',
      selected: '/path/to/marker/image'
    },
    customMarker: {
      normal:   '/path/to/other/marker/image',
      selected: '/path/to/other/marker/image'
    }
  }
};
Objek Type:
Default: null
garisWarna

Jika showLine adalah benar, menentukan warna garis. Misalnya: '#800000'.

Jenis: string
Default: warna default
lebar baris

Jika showLine true, menentukan lebar garis (dalam piksel).

Jenis: angka
Default: 10
maps.<mapTypeId>

Objek yang berisi properti jenis peta khusus. Jenis peta kustom ini akan diakses oleh mapTypeId yang Anda tentukan untuk jenis peta kustom. mapTypeId baru harus diberikan untuk setiap jenis peta kustom yang dibuat. Setiap jenis peta kustom harus berisi dua properti:

  • name: Nama tampilan untuk jenis peta bergaya
  • style: Array yang berisi objek gaya untuk jenis peta bergaya
Objek Type:
Default: null
maps.<mapTypeId>.name

Nama peta yang akan ditampilkan dalam kontrol peta jika useMapTypeControl ditetapkan ke true.

Jenis: string
Default: null
maps.<mapTypeId>.styles

Menyimpan objek gaya untuk berbagai elemen jenis peta khusus.

Setiap objek gaya dapat berisi 1 hingga 3 properti: featureType, elementType, dan stylers. Jika featureType dan elementType dihilangkan, gaya akan diterapkan ke semua fitur/elemen peta.

{
  featureType: 'roadway.highway',
  elementType: 'labels.text.fill',
  stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}

Lihat dokumentasi Maps untuk informasi selengkapnya tentang berbagai fitur, elemen, dan styler.

Jenis: array
Default: null
MapType

Jenis peta yang akan ditampilkan. Nilai yang mungkin adalah 'normal', 'terrain', 'satellite', 'hybrid', atau ID dari jenis peta kustom, jika ada.

Jenis: string
Default: 'hibrida'
mapTypeIds

Jika menggunakan kontrol jenis peta (useMapTypeControl: true), ID yang ditentukan dalam array ini akan menjadi satu-satunya jenis peta yang ditampilkan dalam kontrol jenis peta. Jika opsi ini tidak ditetapkan, kontrol jenis peta akan ditetapkan secara default ke opsi kontrol jenis peta Google Maps standar ditambah jenis peta khusus yang mungkin tersedia.

Jenis: array
Default: null
showInfoWindow

Jika disetel ke benar (true), deskripsi lokasi akan ditampilkan di jendela terpisah saat penanda titik dipilih oleh pengguna. Opsi ini sebelumnya disebut showTip hingga versi 45. Lihat juga showTooltip

Jenis: boolean
Default: false (salah)
showLine

Jika ditetapkan ke true, polyline Google Maps akan ditampilkan di semua titik.

Jenis: boolean
Default: false (salah)
showTooltip

Jika disetel ke benar, menampilkan deskripsi lokasi sebagai tooltip saat mouse diposisikan di atas penanda titik. Opsi ini sebelumnya disebut showTip hingga versi 45. Perhatikan bahwa saat ini HTML tidak didukung, sehingga tooltip akan menampilkan tag HTML mentah.

Jenis: boolean
Default: false (salah)
useMapTypeControl

Tampilkan pemilih jenis peta yang memungkinkan pembaca beralih antara [peta, satelit, hibrida, medan]. Jika useMapTypeControl bernilai false (default), tidak ada pemilih yang ditampilkan dan jenisnya ditentukan oleh opsi mapType.

Jenis: boolean
Default: false (salah)
tingkat zoom

Bilangan bulat yang menunjukkan tingkat zoom awal peta, dengan 0 diperkecil sepenuhnya (seluruh dunia) dan 19 adalah tingkat zoom maksimum. (Lihat "Tingkat Zoom" di Google Maps API.)

Jenis: angka
Default: otomatis

Metode

Metode
draw(data, options)

Menggambar peta.

Jenis Hasil: tidak ada
getSelection()

Implementasi getSelection() standar. Elemen pemilihan merupakan elemen baris. Dapat menampilkan lebih dari satu baris yang dipilih.

Jenis Hasil: Array elemen pilihan
setSelection(selection)

Implementasi setSelection() standar. Memperlakukan setiap entri pemilihan sebagai pilihan baris. Mendukung pemilihan beberapa baris.

Jenis Hasil: tidak ada

Acara

Name
error

Dipicu jika terjadi error saat mencoba merender diagram.

Properties: ID, pesan
select

Peristiwa pemilihan standar

Properti: Tidak ada

Kebijakan Data

Peta ditampilkan oleh Google Maps. Lihat Persyaratan Layanan Google Maps untuk mengetahui informasi selengkapnya tentang kebijakan data.