複数のマーカーを設置してクリックしたときにalertを出すようにプログラミングしたところ、全部のマーカーが同じ表示になってしまった
対応方法が下記のページに出ていたので組み込んでみた
http://www.nanchatte.com/map/showDifferentInfoWindowOnEachMarker.html
しかし、alertではうまく動作しなかったので吹き出しのまま使用した
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<script type="text/javascript" src="jsWaffle.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ja"></script>
<script type="text/javascript">
window.onload = function () {
// マップ(map_canvas)を画面全体に表示する
var disp = droid.getDisplayInfo();
$("map_canvas").style.width = disp["width"] + "px";
$("map_canvas").style.height = disp["height"] + "px";
// Googleマップを初期化する
var latlng = new google.maps.LatLng(36.323433,139.356441);
var mypos = new google.maps.LatLng(36.323433,139.356441);
// 自分の位置
var mapOptions = {
// ズームは大きくなるほど拡大される
zoom:15,
center:latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var gmap = new google.maps.Map($("map_canvas"), mapOptions);
// 目的地にマーカー
var poslist=[
[36.323433,139.356441,"目的地2"],
[36.328433,139.356441,"目的地1"]
];
function attachMessage(marker, msg) {
google.maps.event.addListener(marker, 'click', function(event) {
new google.maps.InfoWindow({
content: msg
}).open(marker.getMap(), marker);
});
}
for(var i=0;i<poslist.length;i++){
var lat=poslist[i][0];
var lng=poslist[i][1];
var txt=poslist[i][2];
var latlng = new google.maps.LatLng(lat, lng);
var marker=new google.maps.Marker({
position: latlng,
map:gmap
});
attachMessage(marker,txt);
}
// 自分にマーカー
var mymarker=new google.maps.Marker({
position: mypos,
map: gmap,
icon: "man.png"
});
// 情報ウィンドウの設定
var infowindow=new google.maps.InfoWindow({
content: "最初の目的地",
maxWindow:300
});
// マーカーをクリックした時のイベント
// 位置情報を定期的にチェックする
var posOptions = {
enableHighAccuracy: true,
timeout: 1000 * 10,
maximumAge: 1000 * 3
};
droid.watchPosition(positionHandler, errorHandler, posOptions);
function positionHandler(position) {
// 緯度
var lat = position.coords.latitude;
// 経度
var lon = position.coords.longitude;
// 精度
var acc = position.coords.accuracy;
// 現在位置まで線を引く
var latlng = new google.maps.LatLng(lat, lon);
var mypos = new google.maps.LatLng(lat,lon);
gmap.panTo(latlng);
mymarker.setPosition(latlng);
// 距離の計算
var dis=Math.floor(Math.sqrt((Math.pow((36.323433-lat)*100*1110,2)+Math.pow((139.356441-lon)*100*910,2))));
// 情報ウィンドウの設定
var myinfo=new google.maps.InfoWindow({
content: "目的地までの距離" + dis + "m。" + "確認したら閉じてください",
maxWindow:300
});
// マーカーをクリックした時のイベント
google.maps.event.addListener(mymarker,'click',function(event){
myinfo.open(gmap,mymarker);
});
}
function errorHandler(errorObj) {
droid.log(errorObj.message);
}
};
</script>
<style>
* { margin:0; padding:0; }
</style>
</head><body>
<div id="map_canvas"></div>
</body></html>
0 件のコメント:
コメントを投稿