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

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

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

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

JavaScript

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

Google マップ

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

Q&A

解決済

2回答

404閲覧

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

eq_space

総合スコア38

PHP

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

JavaScript

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

Google マップ

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

0グッド

0クリップ

投稿2018/07/11 05:30

編集2018/07/11 14:02

今、データベースから抽出してきたデータを元に吹き出しを作成しようとしています。
ただ、吹き出しの<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>

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Yasha_Wedyue

2018/07/11 05:34

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

2018/07/11 05:40

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

回答2

0

ベストアンサー

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

js

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

あと、こうでは。

js

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

投稿2018/07/11 07:32

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

eq_space

2018/07/11 07:51

回答ありがとうございます! 複数表示させるためにはどのように書いたらよろしいでしょうか? おっしゃる通り書き方がまちがっていました....
kei344

2018/07/11 07:53

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

2018/07/11 08:03

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

2018/07/11 08:07

テンプレートエンジンが見たこと無い記法のため具体的には回答しにくいですが、下記のようにすれば複数はいるのでは。 tag: [@foreach($shop->tags as $tag) ,{{$tag->font_name}} @endforeach], で、取り出し側で markerData[i]['tag']ごとに<i></i>が生成できるように処理をすればよいです。
eq_space

2018/07/11 12:14

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

2018/07/11 12:20

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

2018/07/11 14:03

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

0

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

投稿2018/07/11 05:48

Yasha_Wedyue

総合スコア830

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

eq_space

2018/07/11 12:15

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問