地図外からのリンクでの地図移動

質問

カテゴリ違いでしたらすいません。

下記の様なマップを色んなサイトのサンプル等を見て作りました。

サンプル
http://fnavi.turigane.com/map-test.html

この地図の外にリンクを貼り、「東京」「横浜」「大阪」をそれぞれセンターに表記できるようにマップを移動させたいのですが・・・

本文HTMLに

<a href="#" onclick="LatLng1(); return false;">東京</a>

と表記させ、point-test.jsの方に

function toLatLng1() {
map.panTo(LatLng1);
}

等を試してみたのですが、全く動きませんでした。

その他にも色々と試しましたが、ダメでした。

どのようにしたら出来るのでしょうか？

回答No.4

t_ohta · ベストアンサー

9行目の var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
12行目の var tokyo = new google.maps.LatLng(35.680969,139.767208);
53行目の var oosaka = new google.maps.LatLng(34.702248,135.495758);
92行目の var yokohama = new google.maps.LatLng(35.466088,139.622412);
それぞれの var を削除
代わりに、1行目と2行目の間に
var map = null;
var tokyo = null;
var oosaka = null;
var yokohama = null;
を追加します。
initialize()関数の中で宣言された変数はinitialize()関数の中だけでしか使用できません。（ローカルスコープ変数として扱われる）
そのため134行目以降に定義されている関数内では空っぽの変数を参照していることになり、処理が行われません。
関数定義の外で変数を定義する事で、ページ内のどこからでも参照できるグローバルスコープ変数になりますので、134行目以降の関数内でも値が取れるようになります。

44行目から始まる toTokyo() 関数は134行目とダブルので消す。
（134行目の関数名にタイプミスがあります）
85行目から始まる tooosaka() 関数は137行目とダブルので消す。
124行目から始まる toyokohama() 関数は140行目とダブルので消す。
これらの関数定義はinitialize()関数の中に書いてはいけません。
中に書いた関数はinitialize()の処理内だけで利用可能で、initialize()関数の外から呼ぶ事ができません。

以上の修正で動くと思います。

お礼

できましたぁぁぁぁぁぁ！！！！

本当に、本当に有難うございます！

これを機に、一から勉強してみようと思います。

いやぁ、本当にありがとうございました。

感謝、感謝です。

また何かあったらお願いします。

回答No.3

t_ohta

＞　サンプルですが、実際には動作しなかった為割愛してしまいました。

割愛していないモノを拝見できれば修正ポイントを回答できますので、アップするか補足に入れてください。
現在サンプルで上がっているモノをコピーしてmap変数とLatLng1変数をグローバルスコープになるよう修正したら地図は動きましたよ。

補足

何回もお手数をお掛けします。

http://fnavi.turigane.com/map-test2.html

こんな感じでやってみたのですが、何ともなりませんでした。

よろしくお願いします。

回答No.2

t_ohta

連投すいません。

あと、サンプルに上がっているpoint-test.jsには
function toLatLng1() {
map.panTo(LatLng1);
}
といった記述がありませんが、実際はどのように関数を書かれてていますでしょうか。
上がっているJavaScriptのプログラムだとmap変数やLatLng1変数がinitialize関数の中で宣言されているためローカルスコープ変数になってしまっているので、そのままではinitialize関数の外では使えませんが、その辺りの処理はどのように書かれていますでしょうか。

補足

早速の回答ありがとうございます。

サンプルですが、実際には動作しなかった為割愛してしまいました。

すいません。他サイトのサンプルをいくつか寄せ集めて作ったので、詳しいことはわかりません。

一から勉強しないと無理でしょうか？

回答No.1

t_ohta

point-test.js の中に全角スペースがいくつか混入してますが、そういった事が問題では？

あと、aタグのonclickイベントではLatLng1();を呼び出していて、関数定義がtoLatLng1()なのは単なる書き込みミスでしょうか。

補足

すいません実際には
function toLatLng1a() {
map.panTo(LatLng1);
}
としています。