画像クリックで地図上のマーカー位置へ移動する方法


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行目から、アイコンをクリックするとマーカーを疑似クリックしたように設定しています。
クリックされたタイミングで、地図をマーカーの位置まで移動しています。

スポンサード・リンク

日本で一番簡単にビットコインが買える取引所 coincheck bitcoin