今、データベースから抽出してきたデータを元に吹き出しを作成しようとしています。
ただ、吹き出しの<span><i class="fa-2x cc {{$tag->font_name}}"</span>こちらの部分が
どのマーカーの吹き出しでも同じように表示されてしまいます。
よろしくお願いします。
<script type="text/javascript"> var map; var marker = []; var infoWindow = []; var markerData = [ // マーカーを立てる場所名・緯度・経度 @foreach($shops as $shop) @if($shop->lati || $shop->longi ==! null) { shop_name: '{{$shop->shop_name}}', address: '{{$shop->address}}', tag: '@foreach($shop->tags as $tag)<i class="fa-2x cc {{$tag->font_name}}" title=""></i>@endforeach', lat: {{$shop->lati}}, lng: {{$shop->longi}} }, @endif @endforeach ]; function initMap() { // 地図の作成 var mapLatLng = new google.maps.LatLng({lat: markerData[0]['lat'], lng: markerData[0]['lng']}); // 緯度経度のデータ作成 map = new google.maps.Map(document.getElementById('map'), { // #mapに地図を埋め込む center: mapLatLng, // 地図の中心を指定 zoom: 15 // 地図のズームを指定 }); // マーカー毎の処理 for (var i = 0; i < markerData.length; i++) { markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}); // 緯度経度のデータ作成 marker[i] = new google.maps.Marker({ // マーカーの追加 position: markerLatLng, // マーカーを立てる位置を指定 map: map // マーカーを立てる地図を指定 }); infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加 content: '<div class="map" style="padding:0.5rem;"><h4><a href="{{ url('/shops/' . $shop->id) }}">'+ markerData[i]['shop_name'] +'</a></h4><p>' + markerData[i]['address'] + '</p>' + markerData[i]['tag'] + '</i></div>' // 吹き出しに表示する内容 }); markerEvent(i); // マーカーにクリックイベントを追加 } marker[0].setOptions({// TAM 東京のマーカーのオプション設定 icon: { url: markerData[0]['icon']// マーカーの画像を変更 } }); } // マーカーにクリックイベントを追加 function markerEvent(i) { marker[i].addListener('click', function() { // マーカーをクリックしたとき infoWindow[i].open(map, marker[i]); // 吹き出しの表示 }); } </script>
回答2件
あなたの回答
tips
プレビュー