タイトルのようなメッセージが出ました。
Uncaught TypeError: Cannot set property 'position' of undefined
Google Maps Api for JavaScript V3 を使ってみようと思い、
色んな方のサンプルコードを参考にしていたら、このエラーメッセージで詰まりました。
jQueryが好きで、サンプルコードをそれ用に書き換えているときに、
私の理解不足が原因で起きていたエラーのようです。
JavaScriptの問題箇所
map = new google.maps.Map($("#map_canvas"), options);
HTML部分
<div id="map_canvas"></div>
サンプルコードでは問題のJavaScript部分をこう書かれていました。
map = new google.maps.Map(document.getElementById("map_canvas"), options);
上の書き方の違いが原因のようです。
Googleで調べると、以下の記事が見つかりました。
stackoverflow.com
I looked up google.maps.Map() and the Google reference says that the first parameter should be a mapDiv:Node which is the container for the map and is typically a div element. You are passing $(this) which is likely a jQuery object which is not what Google maps is expecting. I don't know the rest of your code, but perhaps you should just be passing this instead of $(this).
純粋なDOM要素ではなくjQuery要素を渡しているのが原因、と書いている人が居ました。
検証したわけではないですが、以下が結論ですかね。
1. document.getElementById("map_canvas") 2. $("#map_canvas") この2つは異なるもので、Google Maps Api の引数にはDOM要素を渡す。
今まで、この2つは同じものだと思っていました。