HTML データから Google マップを実行していますが、関連するマーカーを開くには行 (div) をクリックできる必要があります。関数内に onclick を追加したいと思っていましたが、.each()
機能しようとしたものは何も得られません。
基本的に、各行をクリックして関連する情報ウィンドウを開くことができれば、すべての問題が解決します:)
助けていただければ幸いです。
<script type="text/javascript" language="javascript">
var infowindow = new google.maps.InfoWindow();
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-40.900557, 174.885971),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var icon = "img/marker.png";
$(function() {
map = new google.maps.Map(document.getElementById("map"), myOptions);
// grab data attributes from html
$('.row').each(function( index ){
var rLat = $(this).data("coordinates").lat;
var rLong = $(this).data("coordinates").long;
var rTitle = $(this).find('.itemtitle a').html();
var rTel = $(this).find('.tel').html();
var rAdd = $(this).find('.add').html();
var contentString = '<div style="text-align:left"><h4 style="color:#0068a6;font-size:16px;margin:0px 0px 10px 0px;">' + rTitle + '</h4><strong>' + rTel + '</strong><br /><br />' + rAdd + '</div>';
var myLatLng = new google.maps.LatLng( rLat, rLong );
var otherMarkers = new google.maps.Marker({
position: myLatLng,
map: map,
icon: icon
});
// click actions
google.maps.event.addListener(otherMarkers, 'click', (function(otherMarkers, index) {
return function() {
infowindow.setContent( contentString );
infowindow.open( map, otherMarkers );
}
})(otherMarkers, index));
});
});
$(function() {
$(".leftblock .ctrlholder:nth-child(2)").addClass("last");
$(".leftblock .ctrlholder:nth-child(3)").addClass("last");
});
</script>
HTML
<div class="row" data-coordinates='{"lat" : -41.407493, "long" : 174.584122}'>
<h4 class="itemtitle"><a href="">Title</a></h4>
<p class="centralregion">Address</p>
<ul>
<li class="add">Post Address</li>
<li class="tel">tel</li>
</ul>
<span class="filter3"></span>
</div>
前もって感謝します。