地図にマーカーを付けるコードは以下のとおりです。実際につけているのは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); }); //カーソルを外すと情報が消える }