Google Map エラー対処

まず自分で処理できたエラーから。

You have included the Google Maps API multiple times on this page

これは、index.html内でGoogle MapのAPIを複数回読み込んでしまっているというエラーでした。注意深く確認してみると、案の定

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&language=en"></script>

上記のコードが2回書かれていました。消したらすぐエラーは消えます。

つぎは中々厄介で、OffsetWidth null or undefined のようなエラーがでてきてそもそも地図が表示されないという問題。 これは、とりあえず以下のように

 var map_canvas;

        function initialize_map() {
            var map_center = new google.maps.LatLng(33.606785, 130.418314);
            var map_options = {
                mapTypeControlOptions: {mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'sample']}, /*表示タイプの指定*/
                center: map_center,
                zoom:12
            };
            map_canvas = new google.maps.Map(document.getElementById("map_canvas"), map_options);

map→map_canvasというようにしたところ改善されました。（結局原因は良く分からず、、、）

最後に自力で解決できそうだけど出来なかったエラーです。

cannot read property 'mapTypes' of undefined

これは実際のプログラムがどのように動くのかということと、コードの配置場所を意識すれば直りました。