Omówienie
Wykres Map Google wyświetla mapę za pomocą Google Maps API. Wartości danych są wyświetlane na mapie jako znaczniki. Wartościami mogą być współrzędne (dłuższe pary) lub adresy. Mapa zostanie przeskalowana tak, aby zawierała wszystkie zaznaczone punkty.
Jeśli chcesz, by Twoje mapy były w postaci linii, a nie zdjęć satelitarnych, skorzystaj z geometrii.
Nazwane lokalizacje
Miejsca, w których możesz umieszczać znaczniki, możesz określić według listy znajdującej się poniżej na 10 krajach z największą liczbą ludności.
Gdy użytkownik wybierze jeden ze znaczników, wyświetli się etykietka z nazwą i populacją kraju, ponieważ użyliśmy opcji showInfoWindow. Oprócz tego, gdy użytkownik najedzie kursorem na jeden ze znaczników, przez krótki czas pojawi się wskazówka „tytuł” z tymi samymi informacjami, ponieważ użyta została opcja showTooltip.
Pełny kod HTML:
<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>
Lokalizacje geokodowane
Możesz też określać lokalizacje według szerokości i długości geograficznej, która wczytuje się szybciej niż lokalizacje nazwane:
Powyższy wykres przedstawia 4 lokalizacje według szerokości i długości geograficznej.
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>
Dostosowywanie znaczników
Kształtów znaczników możesz używać w innych miejscach w internecie. Oto przykład z użyciem niebieskich pinezek z iconicon.com:
Jeśli wybierzesz pinezki na powyższym wykresie, będą one skośne. Obsługiwane są pliki PNG, GIF i JPG.
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>
Dodawanie wielu zestawów znaczników
Oprócz utworzenia domyślnego zestawu znaczników możesz też utworzyć wiele zestawów znaczników.
Aby utworzyć dodatkowy zestaw znaczników, dodaj identyfikator do opcji icons i ustaw obrazy znaczników. Następnie dodaj kolumnę do tabeli danych i ustaw identyfikator zestawu znaczników, którego chcesz używać w poszczególnych wierszach tabeli (możesz też użyć 'default' lub null, aby użyć domyślnych znaczników).
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>
Mapy stylu
Wizualizacja mapy umożliwia ustawienie stylów niestandardowych, dzięki którym można utworzyć jeden lub kilka własnych typów map.
Możesz zdefiniować niestandardowy typ mapy, tworząc obiekt stylu mapy i umieszczając go pod identyfikatorem (mapTypeId) w opcji map. Przykład:
var options = {
maps: {
<map style ID>: <map style object>
}
};
Niestandardowy typ mapy możesz później sprawdzić po przypisanym do niej identyfikatorze stylu mapy.
Obiekt stylu mapy zawiera name, która będzie nazwą wyświetlaną w elemencie sterującym typem mapy (nie musi być zgodna z jego mapTypeId) oraz tablicę styles, która będzie zawierać obiekty stylu dla każdego elementu, który chcesz dostosować. Dokumentacja API Map Google zawiera listę różnych typów elementów, funkcji i stylów, za pomocą których można utworzyć niestandardowy typ mapy.
Uwaga: niestandardowy mapTypeId musi być umieszczony w opcji 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>
Oprócz tworzenia niestandardowych typów map za pomocą opcji mapTypeIds możesz też określić, które mapy użytkownicy będą mogli wyświetlać w ustawieniach typów map. Domyślnie widoczne są wszystkie typy map, w tym niestandardowe typy map. Opcja mapTypeIds akceptuje tablicę z typami map, które użytkownicy mogą wyświetlać. Te ciągi muszą odnosić się do wstępnie zdefiniowanych nazw domyślnych stylów mapy (np. normalnych, satelitarnych, terenowych, hybrydowych) lub identyfikatora stylu mapy zdefiniowanego przez Ciebie. Jeśli ustawisz opcję mapTypeIds, na mapie będą dostępne tylko typy map, które określisz w tej tablicy.
Możesz też użyć tej opcji razem z opcją mapType, aby ustawić styl mapy jako domyślny, ale nie dodawać go do tablicy mapTypeIds. Spowoduje to wyświetlanie mapy tylko podczas początkowego wczytywania.
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}]}
]}
}
};
Wczytuję
Nazwa pakietu google.charts.load to "map".
Pamiętaj, że będziesz potrzebować własnego mapsApiKey do swojego projektu, zamiast kopiować go służącego w przykładach, aby uniknąć degradacji usługi danych map dla użytkowników. Więcej informacji znajdziesz w sekcji Ustawienia wczytywania.
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"
});
Nazwa klasy wizualizacji to google.visualization.Map.
Skrócona nazwa Map koliduje z klasą JavaScript Map, więc ChartWrapper nie będzie automatycznie wczytywać tego pakietu, gdy podasz chartType: 'Map'. Zamiast tego możesz podać właściwość chartType: 'google.visualization.Map'.
var visualization = new google.visualization.Map(container);
Format danych
Obsługiwane są 2 alternatywne formaty danych:
- Pary długie i dłuższe – pierwsze 2 kolumny powinny zawierać liczby określające szerokość i długość geograficzną. Opcjonalna trzecia kolumna zawiera ciąg znaków opisujący lokalizację określoną w pierwszych dwóch kolumnach.
- Adres ciągu tekstowego – pierwsza kolumna powinna być ciągiem zawierającym adres. Ten adres powinien być jak najbardziej kompletny. Opcjonalna druga kolumna zawiera ciąg znaków opisujący lokalizację w pierwszej kolumnie. Ciągi adresów wczytują się wolniej, zwłaszcza jeśli masz więcej niż 10 adresów.
Uwaga: opcja par długości i długości geograficznej znacznie przyspiesza wczytywanie map, zwłaszcza w przypadku dużych danych. Zalecamy korzystanie z tej opcji w przypadku dużych zbiorów danych. Informacje o tym, jak przekształcić adresy, aby były dłuższe, znajdują się na stronie dotyczącej interfejsu Google Maps API. Mapa może zawierać maksymalnie 400 wpisów. Jeśli dane zawierają więcej niż 400 wierszy, wyświetlane będą tylko pierwsze 400.
Opcje konfiguracji
| Nazwa | |
|---|---|
| włącz kółko przewijania |
Jeśli ma wartość Prawda, umożliwia powiększanie i pomniejszanie za pomocą kółka przewijania myszy. Typ: wartość logiczna
Wartość domyślna: false
|
| ikony |
Blokuje zbiory niestandardowych znaczników. Każdy zestaw znaczników może określać obrazy znaczników 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'
}
}
};
Typ: obiekt
Domyślne:null
|
| kolor linii |
Jeśli parametr showLine ma wartość true (prawda), definiuje kolor linii. Na przykład: „#800000”. Typ: ciąg znaków
Domyślny: kolor domyślny
|
| szerokość wiersza |
Jeśli parametr showLine ma wartość true (prawda), definiuje szerokość linii (w pikselach). Typ: liczba
Wartość domyślna: 10
|
| maps.<mapTypeId> |
Obiekt zawierający właściwości niestandardowego typu mapy. Dostęp do tego typu mapy niestandardowej będzie się prowadził przez
Typ: obiekt
Domyślne: null
|
| maps.<identyfikator_typu_map>.name |
Nazwa mapy, która będzie wyświetlana w ustawieniach kontroli, jeśli Typ: ciąg znaków
Domyślne: null
|
| maps.<identyfikator_typu_map>.styles |
Przytrzymuje obiekty stylu różnych elementów niestandardowego typu mapy.
Każdy obiekt stylu może zawierać od 1 do 3 właściwości: {
featureType: 'roadway.highway',
elementType: 'labels.text.fill',
stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}
Więcej informacji o różnych funkcjach, elementach i stylach znajdziesz w dokumentacji Map. Typ: tablica
Domyślne:null
|
| typMap |
Typ mapy do wyświetlenia. Możliwe wartości to „normal”, „terrain”, „satellite”, „„hybrid” lub identyfikator niestandardowego typu mapy (jeśli został utworzony). Typ: ciąg znaków
Domyślny: „hybrydowy”
|
| identyfikatory typów map |
Jeśli używasz elementu sterującego typem mapy ( Typ: tablica
Domyślne:null
|
| pokażinformacje |
Jeśli zasada ma wartość Prawda, opis lokalizacji jest wyświetlany w osobnym oknie po wybraniu przez użytkownika znacznika punktu. Ta opcja nazywała się Typ: wartość logiczna
Wartość domyślna: false
|
| ShowLine |
Jeśli to pole ma wartość Prawda, wyświetla linię w Mapach Google przez wszystkie punkty. Typ: wartość logiczna
Wartość domyślna: false
|
| wskazówka |
Jeśli zasada ma wartość Prawda, opis lokalizacji jest etykietką, gdy kursor myszy znajduje się nad znacznikiem punktu. Ta opcja nazywała się Typ: wartość logiczna
Wartość domyślna: false
|
| użyj ustawieniatypu mapy |
Pokaż selektor typu mapy, który umożliwia użytkownikowi przełączanie między [mapą, satelitą, hybrydową, terenem]. Gdy zasada ta ma wartość Fałsz (ustawienie domyślne), nie wyświetla się selektor, a typ jest określany przez opcję mapType. Typ: wartość logiczna
Wartość domyślna: false
|
| PoziomPoziom |
Liczba całkowita wskazująca początkowy poziom powiększenia mapy, gdzie 0 jest całkowicie pomniejszone (cały świat), a 19 to maksymalny poziom powiększenia. Zobacz Poziomy powiększenia w interfejsie API Map Google. Typ: liczba
Domyślna: automatycznie.
|
Metody
| Metoda | |
|---|---|
draw(data, options) |
Rysuje mapę. Typ zwrotu: brak
|
getSelection() |
Standardowa implementacja Typ zwrotu: tablica elementów wyboru.
|
setSelection(selection) |
Standardowa implementacja Typ zwrotu: brak
|
Zdarzenia
| Nazwa | |
|---|---|
error |
Uruchamiane, gdy podczas próby renderowania wykresu wystąpi błąd. Właściwości: id, message
|
select |
Standardowe zdarzenie wyboru Właściwości: brak
|
Zasady dotyczące danych
Mapa jest wyświetlana w Mapach Google. Więcej informacji o zasadach dotyczących danych znajdziesz w Warunkach korzystania z Map Google.