Googleマップ上で、オリジナルのマーカーを表示したい

Googleマップ上で、オリジナルのマーカーを表示したい

WEBサイトに表示しているミニ写真画像にマウスオーバーしたら、
Googleマップでマーカーを使ってその写真の場所を表示し、拡大写真も表示するようにしたいと思い、
下記のサイトを参考にして、作成しています。

http://ascii.jp/elem/000/000/421/421381/

Googleマップのデフォルトマーカーを使っては、希望通り、
上記のサイトのようなものができました。

ここで、表示する間隔が狭いので、わかりやすく、数字を振った
オリジナルマーカーを使って表示したいと思うのですが、
それがうまくできません。


jisファイルは下記のように書いています。


$(function(){

var map = new GMap2(document.getElementById("gmap"));

var firstData = $(".map:first").attr("longdesc").split(",");
$("#googlemap").html("<img src=" + firstData[0] + ">");

var pos = new GLatLng(parseFloat(最初に表示する緯度),parseFloat(最初に表示する経度));
map.addOverlay(new GMarker(pos));

map.setCenter(new GLatLng(最初に表示する緯度, 最初に表示する経度), 15);
map.addControl(new GSmallMapControl());


$(".map").mouseover(function(){
var shopdata = $(this).attr("longdesc").split(",");

$("#googlemap").html("<img src=" + shopdata[0] + ">");

var markerIcon1 = new GIcon();
markerIcon1.image = "./img/flg-"+shopdata[3]+".png";
markerIcon1.iconSize = new GSize(20, 34);
markerIcon1.iconAnchor = new GPoint(10, 34);

var marker1 = new GMarker(new GLatLng(shopdata[1],shopdata[2]), markerIcon1);

if($(this).attr("flag")) return;
map.panTo(marker1, 9);
map.addOverlay(marker1);
$(this).attr("flag", true);
});
})




HTMLのミニ画像を表示している部分は以下です。

<img src="./img/map-1.jpg" class="sekomap" longdesc="./img/map1-1.jpg,緯度,経度,マーカーに表示したい数字">




プログラムに間違いがあるかもしれませんが、
この状態ですと、エラーになって、オリジナルのマーカーも表示されないし、
ミニ写真の位置にも移動しなくなってしまいます。

どなたかご存じの方いらっしゃいましたら、教えてください。

色々調べましたが、もうお手上げ状態です。。（ToT）

No.2 ベストアンサー 回答者： yyr446 回答日時： 2010/09/15 17:53

どっちでもよかったですね。

すんません

他に気づいた点

×　map.panTo(marker1, 9);
○　map.panTo(marker1.getLatLng(),9);

×　var marker1 = new GMarker(new GLatLng(shopdata[1],shopdata[2]), markerIcon1);
○　var marker1 = new GMarker(new GLatLng(parseFloat(shopdata[1]),parseFloat(shopdata[2])), markerIcon1);

それから、提示されてないけど
<div id="gmap"></div>
は、サイズ指定してあるんですよね。
指定してないなら、
var map = new GMap2(document.getElementById("gmap"),{size:new GSize(640,480)});
とか

後は、情報不足なので、わかりません。

上記を直したら、ちゃんと出来ました。
（全体像が不明なので、いちぶロジックはしょりましたが）

この回答へのお礼

yyr446さん


ありがとうございました！！


できましたー！！！！

（ToT）

感動です！！！


一週間くらい悩んでいたことが、もっと早く聞けば良かったですー！！


また何かありましたらよろしくお願い致します！！！

お礼日時：2010/09/16 08:23

No.1 回答者： yyr446 回答日時： 2010/09/15 13:38

var marker1 = new GMarker(new GLatLng(shopdata[1],shopdata[2]), markerIcon1);

は、
var marker1 = new GMarker(new GLatLng(shopdata[1],shopdata[2]),
{icon:markerIcon1});
とするんじゃなかったけ、Ver2ですよね。

http://code.google.com/intl/ja/apis/maps/documen …

この回答へのお礼

yyr446さん

ありがとうございます！！

はい、そのやり方もやってみたのですが、結果は同じでした。。

オリジナルアイコンが表示されません。。。(泣)

お礼日時：2010/09/15 15:56