google map api 外部js化

###前提・実現したいこと
下のコードはgooglemap apiの実装方法を解説しているサイトに紹介されていたものです。
このコードではjs部分(initMap関数)がhtml内部に記載されていますが、外部化したほうが見栄えが良くなると思います。
その場合どのような方法で外部化できますでしょうか？(そもそも外部化すべきでしょうか？)

それと少しタイトルとずれているかもしれませんが、
私は現在JavaScript,JQueryを勉強中なのですが、どのような要領でjsの外部化は行うべきなのでしょうか？
色々なサイトのコードを見ても、綺麗に外部化されているものもあれば、javascriptも全てhtml内に記載され、ギッシリとしたコードも見ます。
皆様はどのような要領でjsの外部化を行っていますか？
もしよければアドバイスお願いします。

###該当のソースコード

sample.html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>Google Maps API サンプル</title>
6  </head>
7  <body>
8    <p>自宅の地図です。</p>
9
10    <div id="map" style="width:620px; height:400px"></div>
11
12    <script type="text/javascript">
13    function initMap() {
14      var opts = {
15        zoom: 15,
16        center: new google.maps.LatLng(35.709984,139.810703)
17      };
18      var map = new google.maps.Map(document.getElementById("map"), opts);
19    }
20    </script>
21
22    <script async defer
23      src="https://maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap">
24    </script>
25  </body>
26</html>

行動規範の内容に同意します

回答1件

ベストアンサー

知りたいこととずれていたら申し訳ございません。
私は基本的には外部化しています。理由はインラインに書くとその処理が終わるまでレンダリングが止まってしまうからです。挙動が問題ないのであればなるべくbodyの終わりかheader内ではansyncやdefer属性を付与したほうがいいです。
ただ、依存関係のあるもの（例：jQueryで書いたファイルとjQuery自体を読み込むファイル）は読み込み順がずれると動かなくなります。
GoogleMapの場合、先にAPIを読み込まないと、うまく描画されないと思います。

投稿2017/11/10 05:17