解決了 google maps api 多重引入的問題

blogger 內引用 google map 會遇到的問題:

 blogger 電腦版主頁會引用多個文章與載入內文

(mobile版主頁只會引入文章標題，不載入內文)

但如果多個文章都有 initial google map 

照官方初始 hello world 的作法 

是在 head script 引入一行 script 拉入 google maps api 

但兩個文章就會拉兩次

於是 console 就會看到 

"You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors." 

 終於找到了解藥: 

https://stackoverflow.com/questions/39994448/prevent-googlemaps-javascript-loaded-twice/39995721

每個文章的 initial google map 都改裝成

<script>

  if(window.google && window.google.maps){

      // the map API is already be loaded (from a previous button click, maybe)

      initMap();

  

  } else if(!document.getElementById('google-map-script')) {

      // the script tag is not present so add it to the DOM

      var scriptTag = document.createElement('script');

      scriptTag .id = 'google-map-script';

      scriptTag .src = 'https://maps.googleapis.com/maps/api/js?key=...&callback=initMap';

      var head = document.getElementsByTagName('head')[0];

      head.appendChild(scriptTag);

  }

  </script>

其中 initMap() 即是自己建構的 function

scriptTag.src 這邊裝 google maps api 的那個 script

後續:

blogger 電腦版主頁只要某處有引用 maps api

目前已知可以引入 script 的有 "HTML/JavaScript 小工具" 與 "文章"

但 HTML/JavaScript 小工具 只限電腦版首頁與文章，mobile皆不載入

故 mobile 各個文章內的 script 都得自行引入

對於 mobile 各文章來說是獨立門戶，但切換到電腦版時就會遇到首頁引入文章載入script 的問題

為了避免 script 重複載入，應該都得改成這樣的形態去引入 script

或是避免電腦版首頁預先載入文章

或是各文章內容能掌控

(還得注意所有文章內的 js global 是共用的)

maps api 只要載入了，後續文章內的 initMap 即可作用

主要問題是 initMap js 優先而 maps api 載入需要時間

所以才在 maps api 載入後接著便用 callback 的方式呼叫起始 map 的 function
但是文章是個別的，每個文章都必須要偵測 maps api 有載入了才可以初始 map