サイドバーを追加しようとしています。データベースから取得されたサイドバーのリンクに変数を使用name
しており、配列として利用できます。QUERY_LIMIT
Googleデータベースに配置されるため、2回ループすることはできません。
この機能に取り組む方法について、誰かが私にロジックを提供できますか?
これが私のスクリプトです:
<script type="text/javascript">
var markers = [];
var side_html = "";
var icon1 = "prop.png";
var icon2 = "office.png";
var locations = <?php echo $add_js ?>;
var name = <?php echo $name_js ?>
//function that will be used to handle clicks on the links in the sidebar
function myclick(num) {
google.maps.event.trigger(locations[num], "click");
}
function geocodeAddress(i)
{
geocoder.geocode({'address' : locations[i]},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, i);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function createMarker(latlng,i) {
var marker = new google.maps.Marker({
map : map,
icon : icon1,
position : latlng
});
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150,50),
disableAutoPan: true
});
google.maps.event.addListener(marker, 'mouseover', function() {
marker.setIcon(icon2);
infowindow.setContent(locations[i]);
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
marker.setIcon(icon1);
infowindow.setContent(locations[i]);
infowindow.close(map, marker);
});
return marker;
}
var map = new google.maps.Map(document.getElementById('map'), {
zoom : 10,
center : new google.maps.LatLng(28.6139, 77.2089),
mapTypeId : google.maps.MapTypeId.ROADMAP
});
//var infowindow = new google.maps.InfoWindow({size: new google.maps.Size(150,50)});
var geocoder = new google.maps.Geocoder();
for (var i = 0 ; i < locations.length; i++) {
geocodeAddress(i);
// link to the sidebar HTML that will open the info window for the record being processed
side_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br />';
document.getElementById("side_bar").innerHTML = side_html;
}//end of for loop
</script>
出力で適切なマーカーを取得していますが、サイドバーのリンクとして毎回名前配列全体を取得しており、クリックイベントにもリンクが応答していません。