地図にAjax通信でマーカーをつける、詳細を表示させる

kagehal 13views 更新:2017年9月12日

地図にマーカーを付けるコードは以下のとおりです。実際につけているのはmarkers[i]で、marker_optionsで条件を指定します。dataは詳細情報です。

var point = JSON.parse(response); 
        var markers = new Array();
        var icon = new google.maps.MarkerImage("pink-dot.png"); //アイコンの画像指定
        for (var i = 0; i < point.length; i++) {
          var marker_options = {
            map: map_canvas,
            position: new google.maps.LatLng(point[i].lat, point[i].lng),
            icon: icon
          };
  markers[i] = new google.maps.Marker(marker_options);
var data =
            '<div class="sample">' +
            point[i].name +
            "</div>" +
            point[i].time +
            "<div>" +
            point[i].detail +
            "</div>";
          showmarker(markers[i], data);
         }

showmarkerはクリックアクションを指示する関数です。for文の外にこの指示をださないと配列の最後の要素しか反映されません([0]にカーソルを合わせても最後の配列の情報が表示される)。

function showmarker(marker, name) {
          var infowindow = new google.maps.InfoWindow({
            content: name
          }); //詳細情報のウィンドウを作る

          google.maps.event.addListener(marker, "mouseover", function() {
            infowindow.open(map_canvas, marker);
          }); //カーソルを合わせると情報が表示される
      
          google.maps.event.addListener(marker, "mouseout", function() {
            infowindow.close(map_canvas, marker);
          }); //カーソルを外すと情報が消える
        }

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません