【GOOGLE MAP API 基本教學】

admin

1.首先要去google API 新增一個專案並開通『Google Maps JavaScript API』

申請網址: https://console.developers.google.com/?hl=zh-tw

2. 新增一個憑證並且將 KEY 記下就可以使用囉



使用範例：

1.建立一個基本的 google map

1.   <div id="map"></div>
   
2.     <script>
   
3.       function initMap() {
   
4.         // Create a map object and specify the DOM element for display.
   
5.         var map = new google.maps.Map(document.getElementById('map'), {
   
6.           center: {lat: -34.397, lng: 150.644},
   
7.           scrollwheel: false,
   
8.           zoom: 8
   
9.         });
   
10.       }
    
11. 
    
12.     </script>
    
13.     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    
14.     async defer></script>

複製代碼

預覽畫面

2.建立信息座標

1. var contentString = '<div id="content">你要輸入的資訊</div>';
   
2. 
   
3.   var infowindow = new google.maps.InfoWindow({
   
4. 　　content: contentString
   
5.   });
   
6. 
   
7.   var marker = new google.maps.Marker({
   
8. 　　position: uluru,
   
9. 　　map: map,
   
10. 　　title: 'Uluru (Ayers Rock)'
    
11.   });
    
12.   marker.addListener('click', function() {
    
13. 　　infowindow.open(map, marker);
    
14.   });

複製代碼

預覽畫面

3.在地圖上畫線條

1. var flightPlanCoordinates = [
   
2. 　　{lat: 37.772, lng: -122.214},
   
3. 　　{lat: 21.291, lng: -157.821},
   
4. 　　{lat: -18.142, lng: 178.431},
   
5. 　　{lat: -27.467, lng: 153.027}
   
6.   ];
   
7.   var flightPath = new google.maps.Polyline({
   
8. 　　path: flightPlanCoordinates,
   
9. 　　geodesic: true,
   
10. 　　strokeColor: '#FF0000',
    
11. 　　strokeOpacity: 1.0,
    
12. 　　strokeWeight: 2
    
13.   });
    
14. 
    
15.   flightPath.setMap(map);

複製代碼

預覽畫面