Genel bakış
Google Harita Grafiği, Google Maps API'yi kullanarak bir harita görüntüler. Veri değerleri haritada işaretçiler olarak gösterilir. Veri değerleri koordinatlar (lat-long çiftleri) veya adresler olabilir. Harita, tanımlanan tüm noktaları içerecek şekilde ölçeklendirilir.
Haritalarınızın uydu görüntüleri yerine çizgi çizimleri olmasını istiyorsanız coğrafi grafik kullanın.
Adlandırılmış Konumlar
Aşağıda, nüfusa göre ilk on ülke haritasında gösterildiği gibi, işaretçileri yerleştireceğiniz yerleri tanımlayabilirsiniz.
Kullanıcı işaretleyicilerden birini seçtiğinde, showInfoWindow seçeneğini kullandığımız için ülke adını ve nüfusunu içeren bir ipucu görüntülenir. Ayrıca, kullanıcı kısa bir süre için işaretçilerden birinin üzerine geldiğinde, showTooltip seçeneğini kullandığımız için aynı bilgilerle bir "başlık" ipucu görünür.
Tam HTML dosyasını şu adreste bulabilirsiniz:
<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>
Coğrafi Kodlu Konumlar
Enlem ve boylama göre de konum belirtebilirsiniz. Bu işlem, adlandırılmış konumlardan daha hızlı yüklenir:
Yukarıdaki grafikte, enlem ve boylama göre dört konum tanımlanır.
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>
İşaretçileri Özelleştirme
Web'de başka bir yerde bulunan işaretçi şekillerini kullanabilirsiniz. iconarchive.com'daki mavi raptiyeleri kullanan bir örneği burada bulabilirsiniz:
Yukarıdaki grafikte raptiyeleri seçerseniz bunlar eğimlidir. PNG, GIF ve JPG dosyaları desteklenir.
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>
Birden Çok İşaretçi Seti Ekleme
Varsayılan işaretçi grubu oluşturmanın yanı sıra birden çok işaretçi grubu da oluşturabilirsiniz.
Ek bir işaretçi grubu oluşturmak için icons seçeneğine bir kimlik ekleyin ve işaretçi resimlerinizi ayarlayın. Daha sonra, Veri Tablonuza bir sütun ekleyin ve Veri Tablosundaki her bir satır için kullanmak istediğiniz işaretçi grubunun kimliğini ayarlayın. (Varsayılan işaretçileri kullanmak için 'default' veya null seçeneğini de kullanabilirsiniz).
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>
Haritaların Stilini Belirleme
Harita Görselleştirme, bir veya birkaç özel harita türü oluşturmanıza olanak tanıyan özel stiller ayarlama olanağıyla birlikte sunulur.
Bir harita stili nesnesi oluşturup, haritalar seçeneğinin altında tanımlayıcısının (mapTypeId) altına yerleştirerek özel bir harita türü tanımlayabilirsiniz. Örneğin:
var options = {
maps: {
<map style ID>: <map style object>
}
};
Daha sonra bu özel harita türüne, ona atadığınız harita stili kimliğinden yararlanabilirsiniz.
Harita stili nesneniz, harita türü kontrolündeki görünen ad olacak bir name (mapTypeId ile eşleşmesi gerekmez) ve stilini ayarlamak istediğiniz her bir öğe için stil nesnelerini içeren bir styles dizisi içerir. Google Haritalar API referansı, özel bir harita türü oluşturabileceğiniz farklı öğelerin, özelliklerin ve stil türlerinin listesini içerir.
Not: Özel mapTypeId, maps seçeneğinin altına yerleştirilmelidir.
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>
mapTypeIds harita seçeneğiyle, özel harita türleri oluşturmanın yanı sıra kullanıcının harita türü kontrolünde hangi haritaları görüntüleyebileceğini de belirtebilirsiniz. Özel harita türleriniz dahil, tüm harita türleri varsayılan olarak harita türü kontrolünde görünür. mapTypeIds seçeneği, kullanıcının görüntülemesine izin vermek istediğiniz harita türü dizelerini kabul eder. Bu dizeler, varsayılan harita stilleri (ör. normal, uydu, arazi, karma) için önceden tanımlanmış adlara veya tanımladığınız özel bir harita türünün harita stili kimliğine işaret etmelidir. mapTypeIds seçeneğini belirlediğinizde, haritanız yalnızca bu dizide belirttiğiniz harita türlerini kullanılabilir hale getirir.
Bunu bir harita stilini varsayılan olarak ayarlamak için mapType seçeneğiyle birlikte de kullanabilirsiniz, ancak mapTypeIds dizisine dahil edemezsiniz. Bu, ilgili haritanın yalnızca ilk yüklemede gösterilmesine neden olur.
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}]}
]}
}
};
Yükleniyor
google.charts.load paket adı "map".
Kullanıcılarınız için harita veri hizmetinin bozulmasını önlemek amacıyla, burada örnek olarak verileni kopyalamak yerine projeniz için kendi mapsApiKey'inizi almanız gerektiğini unutmayın. Daha fazla bilgi için
Yükleme Ayarları bölümüne bakın.
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"
});
Görselleştirmenin sınıf adı: google.visualization.Map.
Kısaltılmış Map adı JavaScript Map sınıfıyla çakıştığından, chartType: 'Map' belirttiğinizde ChartWrapper bu paketi otomatik olarak yüklemez. Ancak bunun yerine chartType: 'google.visualization.Map' değerini belirtebilirsiniz.
var visualization = new google.visualization.Map(container);
Veri Biçimi
İki alternatif veri biçimi desteklenir:
- Uzun-uzun çiftleri - İlk iki sütun sırasıyla enlem ve boylamı belirten sayılar olmalıdır. İsteğe bağlı üçüncü sütun, ilk iki sütunda belirtilen konumu açıklayan bir dize içerir.
- Dize adresi: İlk sütun, adres içeren bir dize olmalıdır. Bu adres, olabildiğince eksiksiz olmalıdır. İsteğe bağlı olarak ikinci sütun, ilk sütundaki konumu açıklayan bir dize içerir. Özellikle 10'dan fazla adresiniz varsa dize adresleri daha yavaş yüklenir.
Not: Lat-Long çiftleri seçeneği, özellikle büyük verilerle haritaları çok daha hızlı yükler. Bu seçeneği büyük veri kümelerinde kullanmanızı öneririz. Adreslerinizi enlem-boylam noktalarına nasıl dönüştüreceğinizi öğrenmek için lütfen Google Haritalar API'sı sayfasını ziyaret edin. Haritada en fazla 400 giriş görüntülenebilir. Verileriniz 400'den fazla satır içeriyorsa, yalnızca ilk 400 giriş gösterilir.
Yapılandırma Seçenekleri
| Ad | |
|---|---|
| EtkinleştirKaydırma Döngüsü |
Doğru değerine ayarlanırsa fare kaydırma tekerleğini kullanarak yakınlaştırmayı ve uzaklaştırmayı etkinleştirir. Tür: boole
Varsayılan: false
|
| simgeler |
Özel işaretçi gruplarını korur. Her işaretçi grubu bir 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'
}
}
};
Tür: nesne
Varsayılan: null
|
| çizgi rengi |
showLine doğruysa çizgi rengini tanımlar. Örneğin: "#800000". Tür: dize
Varsayılan: varsayılan renk
|
| çizgiGenişliği |
showLine doğruysa çizgi genişliğini (piksel cinsinden) tanımlar. Tür: sayı
Varsayılan: 10
|
| maps.<mapTypeId> |
Özel bir harita türünün özelliklerini içeren bir nesne. Bu özel harita türüne, özel harita türü için belirttiğiniz
Tür: nesne
Varsayılan: null
|
| maps.<mapTypeId>.ad |
Tür: dize
Varsayılan: null
|
| maps.<mapTypeId>.styles |
Özel bir harita türünün çeşitli öğeleri için stil nesnelerini tutar.
Her stil nesnesi 1-3 özellik içerebilir: {
featureType: 'roadway.highway',
elementType: 'labels.text.fill',
stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}
Farklı özellikler, öğeler ve stil araçları hakkında daha fazla bilgi için Haritalar dokümanına bakın. Tür: dizi
Varsayılan: null
|
| eşleme türü |
Gösterilecek harita türü. Olası değerler "normal", "arazi", "uydu", "karma" veya oluşturulan özel bir harita türünün kimliğidir. Tür: dize
Varsayılan: "karma"
|
| eşleme türü kimlikleri |
Harita türü kontrolünü ( Tür: dizi
Varsayılan: null
|
| BilgiBilgi Penceresi |
Doğru değerine ayarlanırsa kullanıcı tarafından bir nokta işaretçi seçildiğinde konum açıklaması ayrı bir pencerede gösterilir. Bu seçenek daha önce sürüm 45'e kadar Tür: boole
Varsayılan: false
|
| program satırı |
Doğru değerine ayarlanırsa tüm noktalarda bir Google Haritalar çoklu çizgisi gösterir. Tür: boole
Varsayılan: false
|
| Araç ipucunu göster |
Doğru değerine ayarlanırsa fare bir nokta işaretinin üzerine yerleştirildiğinde konum açıklamasını ipucu olarak gösterir. Bu seçenek daha önce sürüm 45'e kadar Tür: boole
Varsayılan: false
|
| eşleme Türü Kontrolü'nü kullanın |
Görüntüleyenin [harita, uydu, karma, arazi] arasında geçiş yapabilmesini sağlayan bir harita türü seçici gösterin. useMapTypeControl yanlış (varsayılan) olduğunda herhangi bir seçici sunulmaz ve tür, eşleme türü seçeneği tarafından belirlenir. Tür: boole
Varsayılan: false
|
| Yakınlaştırma Seviyesi |
Haritanın ilk yakınlaştırma düzeyini belirten, 0 tamamen (tüm dünya) ve 19'un maksimum yakınlaştırma düzeyi olan bir tam sayı. (Google Haritalar API'sında "Yakınlaştırma Seviyeleri" bölümünü inceleyin.) Tür: sayı
Varsayılan: otomatik
|
Yöntemler
| Yöntem | |
|---|---|
draw(data, options) |
Haritayı çizer. Dönüş Türü: yok
|
getSelection() |
Standart
Dönüş Türü: Seçim öğeleri dizisi
|
setSelection(selection) |
Standart
Dönüş Türü: yok
|
Etkinlikler
| Ad | |
|---|---|
error |
Grafik oluşturulmaya çalışılırken bir hata oluştuğunda tetiklenir. Özellikler: kimlik, mesaj
|
select |
Standart seçme etkinliği Özellikler: Yok
|
Veri Politikası
Harita, Google Haritalar tarafından görüntülenir. Veri politikası hakkında daha fazla bilgi için lütfen Google Haritalar Hizmet Şartları'nı inceleyin.