質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • PHP

    20295questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16358questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Google マップ

    356questions

    Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

グーグルマップの吹き出しについて

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 306

eq_space

score 30

今、データベースから抽出してきたデータを元に吹き出しを作成しようとしています。
ただ、吹き出しの<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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Yasha_Wedyue

    2018/07/11 14:34

    $tag を宣言、代入している部分も記入していただけますか?

    キャンセル

  • eq_space

    2018/07/11 14:40

    ありがとうございます。ここでの$shopのリレーションの$tagとなります。

    キャンセル

回答 2

checkベストアンサー

0

下記部分で複数タグがあった場合も最後のものしか評価されないと思います。(少なくともtagに入るのは1つのみになる)

@foreach($shop->tags as $tag)
   tag: '{{$tag->font_name}}',
@endforeach

あと、こうでは。

// '</p><span><i class="fa-2x cc {{$tag->font_name}}"></i></div>'
// ↓
   '</p><span><i class="fa-2x cc ' + markerData[i]['tag'] + '"></i></div>'

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/11 16:51

    回答ありがとうございます!
    複数表示させるためにはどのように書いたらよろしいでしょうか?

    おっしゃる通り書き方がまちがっていました....

    キャンセル

  • 2018/07/11 16:53

    「複数表示」とは?何をどこにどうしたいのでしょうか。

    キャンセル

  • 2018/07/11 17:03

    抽象的で申し訳ないです。
    $tagには[りんご、みかん、おれんじ]のような情報が入っておりまして
    実際吹き出しで見るとりんごだけしか表示されていない状態です。すべての吹き出しがそのような状態です。

    キャンセル

  • 2018/07/11 17:07

    テンプレートエンジンが見たこと無い記法のため具体的には回答しにくいですが、下記のようにすれば複数はいるのでは。

    tag: [@foreach($shop->tags as $tag)
    ,{{$tag->font_name}}
    @endforeach],

    で、取り出し側で markerData[i]['tag']ごとに<i></i>が生成できるように処理をすればよいです。

    キャンセル

  • 2018/07/11 21:14

    ありがとうございます。
    上記を含めいろいろ試したのですがうまくいかない感じです。
    テンプレートはlaravelのbladeを使っております。

    キャンセル

  • 2018/07/11 21:20

    具体的に何を試して、どういう問題が起こっているかがわからないので、質問文に追記するなりされたほうがよいですよ。質問タグにlaravelを追加するなどしてみては?

    キャンセル

  • 2018/07/11 23:03

    おさわがせしてすみません!
    今上記に上がっているコードで動きました。
    早く答えがほしいということもあり横着してました.....

    キャンセル

0

見たところ$tagが出てくるのがforeach内だけですが、
foreachスコープが終わればアクセスできなくなるのではないでしょうか?
(JavaScriptのforeachに関して無知なので推測で申し訳ありません…)

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/11 21:15

    ありがとうございますl
    コードを修正したのですがまだ動かない状態です。
    自分はphpとjavascriptも初心者に毛が生えた状態です

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    20295questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16358questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Google マップ

    356questions

    Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。