Google Maps API V3でちょっとはまった

2013/11/20 Wed.

すでに登録してある地点一覧から任意の地点を選ぶと、そこが地図のセンターに表示され、サークルが描かれる。と言うことをやろうとした。
それに必要な情報は、緯度・経度、サークルサイズ（半径）で、それらは地点ごとに
<input type="hidden" value="">
に入っている。

で、一覧表の地点をクリックするとJavaScriptの関数が呼び出され地図に反映されるはずなんですが、API内部でエラーが発生してしまう。

なぜ？

原因がわかったが、絶対忘れるので備忘録。

地点一覧のHTMLは大まかにこのようになっています。

【地点1】
<input type="hidden" value="35.893639,137.478962" id="a1">
<input type="hidden" value="100" id="b1">

【地点2】
<input type="hidden" value="35.625716,139.884496" id="a2">
<input type="hidden" value="50" id="b2">

id「a*」が緯度経度。
id「b*」がサークル半径(m)です。
で、地点をクリックすると以下の関数が呼び出される。

function view(number)
{
  var latlng = document.getElementById("a" + number).value.split(",");
  var populationOptions = {
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map: Map,
    center: new google.maps.LatLng(latlng[0], latlng[1]),
    radius: document.getElementById("b" + number).value
  };
  Circle = new google.maps.Circle(populationOptions);
  map.panTo(Circle.getCenter());
};

Map オブジェクトはすでに定義済みとする。

うまく動くと思うのだが動かない。
populationOptions オブジェクトの内容を出力しても、ちゃんと値が入っている。

もう、？？？？？？

状態。

しかたないので、あれこれ試行錯誤していたら原因がわかりました。
「radius」の値が文字列型になっていたらエラーになるようです。
ここを、
radius: document.getElementById("b" + number).value - 0
このように「0」を引くことで数値型にしてあげると動きました。

いやー、こんなことでつまずくとは・・・。ずいぶん時間を使ったもんだ。
ふー。

関連記事

category: JavaScript

コメント: 0