[GoogleAPI]Google Maps

申請 Google API Key

• Google Console

生成地圖

1、建立【map資訊物件】

•   var mapProp = {
•   center:new google.maps.LatLng(51.508742,-0.120850),
•   zoom:5,
•   mapTypeId:google.maps.MapTypeId.ROADMAP

  };

2、建立【地圖物件】，需【tag位置】、【地圖資訊物件】

•   var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

在地圖上插上Marker

1、建立【Marker物件】並傳入【資訊物件】-->{position:myCenter}

•   var marker=new google.maps.Marker({
•   position:myCenter,
•   });

2、在地圖上插上Marker

•   marker.setMap(map);

Animate on Marker

建立Marker物件時，資訊物件內加入【Animate 參數】

•    marker=new google.maps.Marker({
•    position:myCenter,
•   【animation:google.maps.Animation.BOUNCE】/
•   【animation:google.maps.Animation.DROP】
•   });

Marker 換成 自己的圖檔/GIF

• 建立Marker物件時，資訊物件加入【icon參數】
•   var marker=new google.maps.Marker({
•   position:myCenter,
•   【icon:'pinkball.png'】
•   });

在Map上畫多邊線
1、建立【多邊形節點陣列】

•   var stavanger=new google.maps.LatLng(58.983991,5.734863);
•   var amsterdam=new google.maps.LatLng(52.395715,4.888916);
•   var london=new google.maps.LatLng(51.508742,-0.120850);
•   var myTrip=[stavanger,amsterdam,london];

2、建立路線物件並傳入【資訊物件】

•   var flightPath=new google.maps.Polyline({
•   path:myTrip,
•   strokeColor:"#0000FF",
•   strokeOpacity:0.8,
•   strokeWeight:2
•   });

3、在地圖上畫上【路線物件】
  flightPath.setMap(map);

在Map上畫多邊形

1、建立【多邊形節點陣列】

•   var stavanger=new google.maps.LatLng(58.983991,5.734863);
•   var amsterdam=new google.maps.LatLng(52.395715,4.888916);
•   var london=new google.maps.LatLng(51.508742,-0.120850);
•   var myTrip=[stavanger,amsterdam,london];

2、建立路線物件並傳入【資訊物件】

•   var flightPath=new google.maps.Polygon({
•   path:myTrip,
•   strokeColor:"#0000FF",
•   strokeOpacity:0.8,
•   strokeWeight:2,
•   fillColor:"#0000FF",
•   fillOpacity:0.4
•   });

3、在地圖上畫上【路線物件】

•   flightPath.setMap(map);

在地圖上畫【圈】

•   var myCity = new google.maps.Circle({
•   center:amsterdam,
•   radius:20000,
•   strokeColor:"#0000FF",
•   strokeOpacity:0.8,
•   strokeWeight:2,
•   fillColor:"#0000FF",
•   fillOpacity:0.4
•   });

在Marker上加上InfoWindow

1、建立InfoWindow物件並傳入【資訊物件】

•   var infowindow = new google.maps.InfoWindow({
•   content:"Hello World!"
•   });

2、將InfoWindow加入map與marker上

•   infowindow.open(map,marker);

在Marker上加入監聽器使得點擊Marker後Zoom到中央位置

•   google.maps.event.addListener(marker,'click',function() {
•   map.setZoom(9);
•   map.setCenter(marker.getPosition());
•   });

在Map上加入監聽器使得當中央位置改變時，3秒後Zoom回中央位置

•   google.maps.event.addListener(map,'center_changed',function() {
•   window.setTimeout(function() { map.panTo(marker.getPosition()); },3000);
•   });

在Marker上加監聽器使得點擊Marker後出現InfoWindow

•   google.maps.event.addListener(marker, 'click', function() {
•   infowindow.open(map,marker);
•   });

參考資料

• 北藝大謝尚偉助教