雲端教學課程



Google map API




這簡報在
http://163.17.136.249/

第一步,直接搜尋

Google map api


(看不懂英文的話右下角可以切換語言,但還是要練習看)
https://developers.google.com/maps/?hl=zh-tw

照Getting Started流程走

註冊API權限


啟用google map api


建立金鑰

在你會用到這服務的地方帶上金鑰,google就會知道是你

練習:複製範例程式碼貼上

將台灣調整於地圖正中央


疊加層


新增一個marker在台中市

並且試一下HTML5的Geolocation定位、Info windows
https://developers.google.com/maps/documentation/javascript/overlays?hl=zh-tw#Markers

折線

https://developers.google.com/maps/documentation/javascript/overlays?hl=zh-tw#Polylines

事件


教學頁
https://developers.google.com/maps/documentation/javascript/events?hl=zh-tw

完整的事件清單
https://developers.google.com/maps/documentation/javascript/reference?hl=zh-tw

練習:用click event畫折線

當點擊到地圖時觸發一個事件
https://developers.google.com/maps/documentation/javascript/reference?hl=zh-tw#MouseEvent

 google.maps.event.addListener(map, 'click', function(event) {
	console.log(event);
});

解答

var flightPlanCoordinates = [
			new google.maps.LatLng(24.25,120.7),
			new google.maps.LatLng(21.291982, -157.821856),
			new google.maps.LatLng(-18.142599, 178.431),
			new google.maps.LatLng(-27.46758, 153.027892)
  ];
var flightPath = new google.maps.Polyline({
			path: flightPlanCoordinates,
			strokeColor: "#FF0000",
			strokeOpacity: 1.0,
			strokeWeight: 2,
			editable: true
  });google.maps.event.addListener(map, 'click', function(event) {
			console.log(event);
			flightPlanCoordinates.push(event.latLng);
		flightPath.setMap(null);
		flightPath.setMap(map);
});

Code Samples


還有更多程式碼範例,有空可以去研究。

https://developers.google.com/maps/documentation/javascript/examples/?hl=zh-tw

標記太多的處理方式
https://developers.google.com/maps/articles/toomanymarkers
Library
https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries
Made with Slides.com