Google Map APIでのUncaught initialize is not a functionのエラー
意外なことに今回初でGoogle Map APIを触ることになった。
Google Map APIはJSONとかを気にしなくてもジェネレータなどがありふれているし、今回は他のサイトと似たような色で出してくるので、コピペでの設定となった。
そんなときにUncaught initialize is not a functionのエラー遭遇して頭を悩ませた。
旧来のクセで、自分は<head />内部にスクリプトなどを書くのだけれども、これが良くないのか、何度やっても当該のエラーが発生する。
なんだろうなんだろうと小一時間くらい悩んだのだが、どうもこのエラーに書いてある内容って、読んでそのままそんな関数存在しないよ！って言う意味だ。
けど、google.maps.event.addDomListenerで読んでいるので、引数に書かれたイベントやコールバックは当然ページ読み込み後に実行されるもんだと思った。
でも、これ実は違っていて、単純にgoogle.maps.event.addDomListenerは、Google Map APIのロードを見ているだけであり、ページが読み込まれた際と言ったところは見ていない。似たような形のJSのプレーンメソッドでaddEventListenerとかあるけど、これみたいな扱いというわけではないらしい。
まさしく原因はそれであり、ページを読み込み終わった後に、google.maps.event.addDomListenerを実行する必要がある。
そこで以下のようにコードを書いてあるべき形とした。
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=Google MapのAPIキー"></script>
<script type="text/javascript">
function initialize(){
// 国内・海外サイトのソースのコピペのコンパチスクリプト
var latLng = new google.maps.LatLng(XXXXXX, XXXXXX);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: latLng,
scrollwheel: true
});
var markerImg = {
url: 'images/mappoint.png'
};
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: markerImg
});
var mapStyle =[
{
"stylers": [
{ "saturation": -100 },
]
}
];
var mapType = new google.maps.StyledMapType(mapStyle);
map.mapTypes.set('GrayScaleMap', mapType);
map.setMapTypeId('GrayScaleMap');
}
// コンパチスクリプトを実行する ※重要
window.addEventListener('load', function() {
google.maps.event.addDomListener(window, 'load', initialize);
});
</script>
</head>
<body>
<div id="map"><!--Google Map読み込み部分--></div>
</body>
これで、Uncaught initialize is not a functionは解消されて正常にGoogle Mapが表示されるようになる。jQueryを併用しているなら$(window).bind(‘load’, function(){});とかでもOK。
ちなみに、<div id=”map” />に何もスタイルを付けていないとheightが0で表示されるので注意。
・・・JavaScriptは昔より遥かにやりやすくなったとはいえ、エラー起こすと何か崖から突き飛ばされたようなそんな感覚になるのは相変わらずだなぁ。
PS：
・・・やっと、100件程度までは記事は復旧（再掲載）できた。
どうしてもURLが変わったり、記事に張った画像が完全にお釈迦になったりして正直涙ながらの作業でしたが・・・。
でも、ブログ開設当初～今までの軌跡が確認できた。
「ああ、このときはそういえばこういうこと思いながら書いてたな～」とかねｗ
とりあえず、完全な復旧は無理にしても、今までの全240件強の内、200件程度までは復旧したいと思う。
それまで、Googleさんのキャッシュが待っててくれればいいんだけど・・・。
でも、インデックスは既に始まっていて、ちゃんと前の記事から、復旧した記事にきちんとURLが変更されていて、それでもって過去に投稿した日付もきちんと継承されてきていてちょっと涙ほろり。Googleさんありがとう。