WEBサイトで地図上のマーカーとリストや画像なんかを下記のように紐づけたい時があります。
下記のプログラムはリスト上の画像をクリックすると地図上の（画像と紐づけられた）マーカーの位置へ移動するようになっています。
それではソースです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PolygonTest</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry"></script>
<script type="text/javascript" src="js/click_mock.js"></script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<table class="tb07">
<tbody>
<tr>
<th style="width:20px;"></th>
<th style="width:300px;">項目名</th>
<th style="width:120px;">備考</th>
</tr>
<tr>
<td class="td11">
<img id="image1" src="images/ico_point1.png" height="14">
</td>
<td class="td11"> サンプル1</td>
<td class="td11"></td>
</tr>
<tr>
<td class="td11">
<img id="image2" src="images/ico_point2.png" height="14">
</td>
<td class="td11">サンプル2</td>
<td class="td11"></td>
</tr>
<tr>
<td class="td11">
<img id="image3" src="images/ico_point3.png" height="14">
</td>
<td class="td11">サンプル3</td>
<td class="td11"></td>
</tr>
</tbody>
</table>
</body>
</html>
HTMLではスタイルシートの記述は長くなるので省いています。
今回はimgタグのid属性ににわかりやすいように名前を付けました。
スポンサード・リンク
続いてjavascripです。
var latlngArray=[
{lat:35.37333808,lng:132.7411567},
{lat:35.37414296,lng:132.7453771},
{lat:35.37302246,lng:132.7521162}
];
var mapObj;
function initialize(){
var latlng = new google.maps.LatLng(35.37333808, 132.7411567);
var options = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//マップの取得
mapObj = new google.maps.Map(document.getElementById("map_canvas"),options);
//マーカー作成
addMarker();
}
function addMarker(){
for(var i=0;i<latlngArray.length;i++){
//icon設定//////////////////////////
var icon_style = new google.maps.MarkerImage(
'./images/ico_point'+(i+1)+'.png',
new google.maps.Size(12,12),
new google.maps.Point(0,0),
new google.maps.Point(0,0),
new google.maps.Size(12,12)
);
//マーカー作成
var marker = new google.maps.Marker({
position: latlngArray[i],
map:mapObj,
icon: icon_style
});
//マーカーとイメージアイコンのリンク付け
addClickListener(marker,"image"+(i+1));
}
}
function addClickListener(marker,imageName){
var icnoImage = document.getElementById(imageName);
//アイコンがクリックされたら、マーカーを擬似クリックしたことにする
google.maps.event.addDomListener(icnoImage, "click", function(){
google.maps.event.trigger(marker, "click");
//アイコンがクリックされたときの処理
placeMarker(marker.position);
});
}
function placeMarker(location){
mapObj.setZoom(18);
mapObj.panTo(location);
}
肝になる部分は、43行目から、アイコンをクリックするとマーカーを疑似クリックしたように設定しています。
クリックされたタイミングで、地図をマーカーの位置まで移動しています。
