昨天講完地圖的種類，
今天想介紹如何設定地圖的語言——在 Google 稱為 Localizing the Map
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&language=ja®ion=JP"
async defer>
</script>
一般未設定的情況下就是自動預設瀏覽器使用的語言，
這段 JS 程式碼最後加了一小段的設定 language=ja®ion=JP"，關於語言以及地區
所以當我們去展開這張地圖的時候，會發現地圖上的資訊都會用日文來做註記。
我們常在 JS 中去設定某些事件例如 .click on，
在 Google 地圖中其實也有類似的使用技巧：
<!DOCTYPE html>
<html>
<head>
<title>Simple Click Events</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
/* 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;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var taiwan = {lat: 23.5, lng: 121};
var taipei = {lat: 25.03746, lng: 121.564558};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: taiwan
});
var marker = new google.maps.Marker({
position: taipei,
map: map,
title: 'Click to zoom'
});
map.addListener('center_changed', function() {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 3000);
});
marker.addListener('click', function() {
map.setZoom(12);
map.setCenter(marker.getPosition());
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YourKeyHere&callback=initMap">
</script>
</body>
</html>
先說明一下這段程式碼做了什麼事，
map.addListener('center_changed', function() {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 3000);
});
在 add.Listener() 你可以決定要用什麼要素來觸發事件，
這裡的 center_changed 是指當你把地圖移開中心點後便會觸發以下的事件：
set 一個 timer,將 map 指向 marker 的位置。
marker.addListener('click', function() {
map.setZoom(12);
map.setCenter(marker.getPosition());
});
這裡則是對 marker 做了一個事件觸發：
當你點擊 marker 的時候會將地圖放大倍率並將地圖中心點改為 marker 所指定的經緯度座標。
觸發要素其實還有許多可玩性～
對 map 你可以做以下行為
對 marker 則可以選擇這些動作：
讓我們一起好好把玩 google map吧 ：）
iThome鐵人賽
看影片追技術