複数のマーカー＋吹き出しを表示

[kin]

マップに2か所のマーカーを作りました。

それぞれのマーカーに吹き出しを表示させたつもりが、マーカーをクリックしてもすべて一か所に吹き出しが出てしまいます・・


例を見てください・・


function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(34.626732715486575, 135.51441818475723),
12);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

//大阪城
var marker = new GMarker(new GLatLng(34.626732715486575,
135.51441818475723));
map.addOverlay(marker);

GEvent.addListener(marker, "click", function()
{marker.openInfoWindowHtml("<center><br>大阪城</center>");});

//愛媛城
var marker = new GMarker(new GLatLng(34.62529123750356,
135.51445305347443));
map.addOverlay(marker);

GEvent.addListener(marker, "click", function()
{marker.openInfoWindowHtml("<center><br>愛媛城</center>");});
　　}
　 }

このように入力しました。
吹き出しを表示する場所も指定する必要があるのでしょうか？？またそうだとしたらどのようにすればいいのかわからなくて困っています・・・

できれば最初のマーカー（大阪城）にクリックをしなくても噴き出しを表示させるにはどうしたらよいでしょうか。

まだ勉強を始めたばかりの素人なので自分で入力しても
スクリプトエラーばかりでこまっています。

どなたか教えていただけますでしょうか・・お願いします<m(__)m>

[古籏一浩]

> マップに2か所のマーカーを作りました。
>
> それぞれのマーカーに吹き出しを表示させたつもりが、マーカーをクリックしてもすべて一か所に吹き出しが出てしまいます・・
　これは

var marker = ～

　として「同じ名前の変数」を使っているのが原因です。同じ名前なので一番最後に定義されたものが使われます。
今回の場合は愛媛城の座標値がマーカーに使われてしまっていることになります。

　解決方法としては以下のように別々の名前にすればOKです。

function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(34.626732715486575, 135.51441818475723),
12);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//大阪城
var marker = new GMarker(new GLatLng(34.626732715486575,
135.51441818475723));
map.addOverlay(marker);
GEvent.addListener(marker, "click", function()
{marker.openInfoWindowHtml("<center><br>大阪城</center>");});
//愛媛城

var marker2 = new GMarker(new GLatLng(34.62529123750356,
135.51445305347443));
map.addOverlay(marker2);
GEvent.addListener(marker2, "click", function()
{marker2.openInfoWindowHtml("<center><br>愛媛城</center>");});
}
}


　ただ、これだとマーカーが増えた場合には無制限に変数を用意しなければいけないので面倒です。そこで以下のようにマーカーを生成する関数を用意して、
それを呼び出すようにすると多少すっきりとします。また、簡単に異なる座標と内容を追加できるようになります。


var map;
function load() {
if (GBrowserIsCompatible()) {

map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(34.626732715486575, 135.51441818475723),
12);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//大阪城

createMarker(34.626732715486575, 135.51441818475723, "<center><br>大阪城
</center>");
//愛媛城
createMarker(34.62529123750356, 135.51445305347443, "<center><br>愛媛城
</center>");
}
}
function createMarker(lat, lng, htmlText){
var marker = new GMarker(new GLatLng(lat, lng));

map.addOverlay(marker);
GEvent.addListener(marker, "click", function()

{marker.openInfoWindowHtml(htmlText);});
}

[cru]

でも　どうしてマーカーは違う場所に出るんでしょうか？

2回目の var maker =.... で初期化してくれれば良いのに！！

[Masashi.K]

>cruさん

いい質問ですね。
実はこれはかなり陥りやすい問題です。

単純に言うと、２回目のvarの段階で「１回目のvarのメモリが上書きされる」のが原因です。

分かりやすく、イラストを作ってみました。
参考にしてみてください。

http://googlemaps.googlermania.com/uploads/marker_problem.png

[Masashi.K]

>kinさん

書き忘れましたが、最初からふきだしを開いておくのは
「GEvent.trigger」を使います。

使い方は下記を参考にしてください。

■例－22：最初からマーカーの吹き出しを表示する
http://googlemaps.googlermania.com/map_example_22.html

[kin]

ありがとうございます。
おかげさまで無事、解決しました。

[Yas55]

Masashi.Kさん。

> 分かりやすく、イラストを作ってみました。

とてもよくわかりました。
いままでもやっとしていたのが、すっきりしました。
ありがとうございます。