20-2 Google Maps JavaScript API

一、Google Maps JavaScript API V3

1. 可以不需要金鑰，但https:// 請求會放阻止，解決方案就是申請金鑰
2. 每個API每天最多25,000次地圖載入
3. 每天最多可以使用“樣式地圖”功能修改的2500張地圖載入量
4. 取得金鑰：https://developers.google.com/maps/documentation/javascript/get-api-key#key

二、簡易的google maps

1. 載入 google maps api
2. 指定地圖DOM元素(使用div標記)
3. 透過地圖屬性，建立地圖
4. 此方法僅適合 http:// ，若是https:// 請用 第6點的方法。
5. 程式碼

       <script type="text/javascript">
         //載入Google Maps API 3
         window.onload = loadScript;
         function loadScript() { 
            var script = document.createElement("script");  
            script.type = "text/javascript";  
            script.src = "http://maps.google.com/maps/api/js?callback=initialize";   
            document.body.appendChild(script);
         } 
   
         function initialize() {
           //設定地圖屬性，建立地圖
           var myLatlng = new google.maps.LatLng(23.009676,120.2670563); 
           //Google Map初始化
           var myOptions = {    
             zoom: 18,   
             center: myLatlng,   
             mapTypeId:
             google.maps.MapTypeId.ROADMAP 
           }  
             var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
         } 
       </script>

   一定要指定寬度、高度，否則將不會顯示地圖

         <div id="map_canvas" style="width: 100%;height:300px;"></div>

    

6. https:// 引入方法

   
   <!-- https:// 引入方式 請自行替換 YOUR_API_KEY -->
   
   <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
   
   <script type="text/javascript"> 	
     function initialize() {
       var uluru = {lat: 23.056511, lng: 120.268975};//緯度,經度
       var mapOptions = {
         center: uluru,
         zoom: 16
       };
       var map = new google.maps.Map(document.getElementById('mg-map'),mapOptions);
   
       var infowindow = new google.maps.InfoWindow({
         content: "<strong>競鴻事業有限公司</strong><br>台南市永康區和平路258巷60號<br />0980-229609<br />陳世男",
         maxWidth: 200
       });
       var marker = new google.maps.Marker({
         position: uluru,
         map: map,
         title: "競鴻事業有限公司"
         //, icon:"https://www.jinghung.com/modules/ugm_jinghung/images/maps.png"
       });
       marker.addListener('click', function() {
         infowindow.open(map, marker);
       });
     }
     google.maps.event.addDomListener(window, 'load', initialize);
   </script>

    

7.