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.
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>
<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.
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>
<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).
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>
<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.
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>
<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:
- 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.
- 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 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
Objek Type:
Default: null
|
| maps.<mapTypeId>.name |
Nama peta yang akan ditampilkan dalam kontrol peta jika 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: '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 ( 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 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 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
Jenis Hasil: Array elemen pilihan
|
setSelection(selection) |
Implementasi
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.