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）
お礼
ありがとうございました。いい地図でちゃんと確認できました。