脱力系備忘録BloG ホーム » JavaScript »Google Maps API V3でちょっとはまった

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

すでに登録してある地点一覧から任意の地点を選ぶと、そこが地図のセンターに表示され、サークルが描かれる。と言うことをやろうとした。
それに必要な情報は、緯度・経度、サークルサイズ(半径)で、それらは地点ごとに
<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

この記事へのコメント

コメントの投稿

非公開コメント

コメントは全て管理人が内容を確認してから表示されます(非公開コメント除く)。
内容によっては表示されない場合がありますことご了承願います。

プロフィール

お問い合わせ

最新記事

最新コメント

▲ Pagetop