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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

4回答

5818閲覧

xmlでグーグルマップとホットペッパーAPIのマッシュアップをしてみた。

aba623ky

総合スコア63

PHP

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2016/10/11 07:24

編集2016/10/12 14:50

コードを全文提示します。

写真のようになりました。

イメージ説明

このように書きました。

<?php $key='My key'; $count='10'; $large_area='Z014'; $start =1; $format='xml'; $url='http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key='.$key.'&count='.$count.'&large_area='.$large_area.'&start='.$start.'&format='.$format; $xml=simplexml_load_file($url); $total_count=$xml->results_available; if(!$xml->shop){ echo 'We can not find!!'; } else { foreach($xml->shop as $rest){ echo '<table border="1">'; echo '<tr>'; echo '<td>'; echo $rest->name; echo '</td>'; echo '</tr>'; echo '<tr class="map">'; echo '<td>'; echo $rest->lng; echo $rest->lat; echo '</td>'; echo '</tr>'; echo '<tr>'; echo '<td>'; echo $rest->address; echo '</td>'; echo '</tr>'; echo '</table>'; ?> ///下記のphpタグのコードは各店舗の緯度経度がちゃんと入っているか確認するものです。実際入っていました。 <?php echo $rest->lng; echo $rest->lat; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Google Maps V3</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?&sensor=false"></script> <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', function() { var lat =35.60472; var lng =140.12333 ; var latlng = new google.maps.LatLng(lat, lng); var mapOptions = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); var marker = new google.maps.Marker({ position: {lat:$rest->$lat, lng:$rest->$lng }, map: mapObj }); }); </script> </head> <body> <div id="gmap" style="width: 500px; height: 370px; border: 1px solid Gray;"> </div> </body> </html> <?php } } ?>

ホットペーパーapiのレスポンスフィールドの$latと$lng (緯度経度)をgoogle map apiにその値を渡し、地図に位置情報を表したいです。

php

1$rest->$lat; 2$rest->$lng;

としました。
http://qiita.com/ShibuyaKosuke/items/452928e235d4b1d10475
参照しているサイトによると,

php

1var bounds = new google.maps.LatLngBounds(); 2 3 for (var i = 0; i < shops.length; i++) { 4 var marker = new google.maps.Marker({ 5 position: { 6 lat: parseFloat(shops[i].getAttribute('data-lat')) 7 , lng: parseFloat(shops[i].getAttribute('data-lng')) 8 }, 9 map: map 10 }); 11 bounds.extend(marker.position); 12 } 13 map.fitBounds(bounds);

この部分がヒントになりそうです。
このコードを見ると、店舗のlat, lngをpositionに入れて、markerを作成しているため僕も見よう見まねで

php

1var marker = new google.maps.Marker({ 2 position: {lat: <?= $lat ?>, lng: <?= $lng ?>}, 3 map: mapObj 4 });

と作成しましたが、マップ自体が表示されません。
どうやればレスポンスフィールドで得た緯度経度をgooglemapapiのpositionに渡しmarkerを作成して地図を表示できるのかわかりません。

ご教授お願いします。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Google Maps V3</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?&sensor=false"></script> <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', function() { var lat =35.68944; var lng =139.69167 ; var latlng = new google.maps.LatLng(lat, lng); var mapOptions = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); var marker = new google.maps.Marker({ position: {lat: <?= $r->$lat ?>, lng: <?= $r->$lng ?>}, map: mapObj }); }); </script>

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

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

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

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

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

aba623ky

2016/10/11 07:42

もとにして作成しているのですが、わからないんです。まず、このmapってなんですか?どうやって値を渡せているのですか?<div class="map" data-lat="<?= h($rest->lat); ?>" data-lng="<?= h($rest->lng); ?>">
退会済みユーザー

退会済みユーザー

2016/10/11 07:50 編集

理解できないならコピペすればいいのに。 PHPから渡しているのではなく、JavaScript側から取得しに行っています。
aba623ky

2016/10/11 07:50

どうやって値を渡せているのですか?<div class="map" data-lat="<?= h($rest->lat); ?>" data-lng="<?= h($rest->lng); ?>">気になるんです。それにコピペじゃなくてどういう仕組みでマッシュアップできるのか知りたいんです。
aba623ky

2016/10/11 07:50

コピペじゃなく、こうすれば緯度経度をgoogle map apiに渡せるみたいな説明が欲しんです。
退会済みユーザー

退会済みユーザー

2016/10/11 07:54

PHPから渡しているのではなく、JavaScript側から取得しに行っています。
aba623ky

2016/10/11 08:10

つまり、google map api から取得しているんでしょう?googlemapapiから取得するにはどうやってやるのですか?
退会済みユーザー

退会済みユーザー

2016/10/11 08:12

コードを読め。
aba623ky

2016/10/11 08:12

class=mapって、どこにclass=mapがあるのですか?
退会済みユーザー

退会済みユーザー

2016/10/11 08:14

質問の意味がわからん
date

2016/10/11 08:16

この質問の2つ目をよく見てください、自身でclass="map"と書いています
aba623ky

2016/10/11 08:17

スタイルシートのclassですか?
aba623ky

2016/10/11 08:21

間違えました。元々、kosuke_shibuyaさんが提示したコードにid=mapのところがあったので真似て書いたんです。
Lhankor_Mhy

2016/10/11 09:30

$lat に何も入っていないのではないかと拝察。中身を確認してみるのがいいでしょう。
aba623ky

2016/10/11 09:39

数字だと、緯度経度の数字が表れます。つまり、mapを使わない時です。
Lhankor_Mhy

2016/10/11 09:43

では、$lat$lng に緯度経度を入れてやればいいでしょうね。
aba623ky

2016/10/11 11:41

だから、その緯度経度をどうやってgooglemapapiに渡せばいいのか分からないんです。
Lhankor_Mhy

2016/10/11 11:55

$latと$lngは*PHPの変数*なので、PHPの中で代入してやればいいんですけれども、分からないことはなんですか?
aba623ky

2016/10/11 12:01

phpの中で代入してやればいいとおっしゃいましたが、tableの中に代入しても実行できないんです。
hnw

2016/10/11 13:31

tableはhtmlですよ。tableの中だろうと外だろうとhtmlは関係ありません。どのように代入したのですか?
aba623ky

2016/10/11 13:37

笑わないでくださいよ。tableの中にmapを挿入しようと思い、<table><tr><td id=map>$rest->$lat $rest->$lng</td></tr></table>としました。もしよければ、回答欄に書いてくれませんか?返信し易いので
Lhankor_Mhy

2016/10/11 13:43

PHPタグの中に書かないと、PHPは動作しません。
aba623ky

2016/10/11 13:51

これはphpの中のtableなんです笑実は
toutou

2016/10/11 13:53

拡張子がPHPなら動くと思ってる疑惑出てきたな。
Lhankor_Mhy

2016/10/12 02:27

もし本当に<table><tr><td id=map>$rest->$lat $rest->$lng</td></tr></table>として緯度経度が出力されるなら、$rest->$lat $rest->$lngに緯度経度が入っているはずです。なのでPHPの中で$lat $lng に代入してやればいいでしょう。
aba623ky

2016/10/12 02:36

phpの中で$lat $lng に代入してやるって、どうやってやるのですか?
date

2016/10/12 02:47

具体的に$rest->$lat $rest->$lng これでどう表示されたのですか?実際に表示された内容を答えてください。
date

2016/10/12 02:52

ちなみに私が実際に表示される内容はNotice: Undefined variable: lat in ¥ on line xxx Notice: Undefined variable: lng in on line xxx -> -> ただのエラー文と->の文字列だけ
aba623ky

2016/10/12 03:11

lhankor_mhyさんへの回答があるように、tableの中に入れて出力しました。
aba623ky

2016/10/12 03:14

<table><tr><td id=map>$rest->$lat $rest->$lng</td></tr></table>としました。
date

2016/10/12 03:15

だからそれでどう表示されたの
aba623ky

2016/10/12 03:20

だから、数字で表示されるんですよ。
toutou

2016/10/12 03:24

キャプって画像で出してもらえば早いのでは?まさかキャプはどうすればいいですか?とかはさすがにないだろう。いくら言葉重ねるよりそっちのほうが早い。
aba623ky

2016/10/12 03:27

だから、<td></td>の中に各店舗の緯度経度が表示されます。
Lhankor_Mhy

2016/10/12 08:33

『<td></td>の中に各店舗の緯度経度が表示されます』え、マジですか。どういうコードなんだろ。まあ、それならそれで、position: {lat: <?= $lat ?>, lng: <?= $lng ?>}, をposition: {lat: <?= $rest->$lat ?>, lng: <?= $rest->$lng ?>}, とすればいいんじゃないですか?全体のコードが見えないのでよく分かりませんが。
aba623ky

2016/10/12 09:04

それでも、地図に表示されません。後に全体のコードを表示します。
aba623ky

2016/10/12 09:05

というより、lhankor_mhyさん、回答欄に書いてくれませんか?
Lhankor_Mhy

2016/10/12 09:16

『地図に表示されません』ということは地図*は*表示されてるんですね。それは素晴らしい、もう少しですよ。コードのご提示お待ちしてます。
aba623ky

2016/10/12 09:38

>は地図*は*表示されてるんですね どういう意味ですか?笑
Lhankor_Mhy

2016/10/12 09:43

『地図に(マーカーが)表示されません』と読みましたが違うんですか? マーカーが表示されないだけなら地図自体は表示されていると読みました。
aba623ky

2016/10/12 09:46

マーカーという字が表示されませんでした。
aba623ky

2016/10/12 09:46

マーカーと地図が表示されません。
Lhankor_Mhy

2016/10/12 09:49

プログラミング言語の前に日本語がんばったほうがいいかもね…… でも地図以外は表示されているということはPHPエラーはないということで大変めでたいですね。
aba623ky

2016/10/12 09:51

はい、そうです。また、分かりづらい日本語でごめんなさい。上手く伝わっていませんでした。
Lhankor_Mhy

2016/10/12 10:30

コードの提示と一緒にjavascriptのエラーも提示いただけるとありがたいです。
aba623ky

2016/10/12 10:32

分かりました。10時過ぎに公開します。本当にすみません。
Lhankor_Mhy

2016/10/13 00:09

コード拝見。繰り返しになりますが、PHPタグの中に書かないとPHPは動作しません。
date

2016/10/13 00:25

コードを見たのだが、一度でもソースを表示したら、動くけどHTMLとしてあり得ない。
aba623ky

2016/10/13 01:41

つまり、地図のコードをphpタグの中に書かないとダメってことですか?
Lhankor_Mhy

2016/10/13 01:45

position: {lat:$rest->$lat, lng:$rest->$lng }, ←この部分はPHPタグの外ですよね、ということです。
aba623ky

2016/10/13 01:48

でも、地図のコードはjavascriptタグの中です。どうやってphpタグの中に入れるのですか?
Lhankor_Mhy

2016/10/13 01:50

ていうか、<table><tr><td id=map>$rest->$lat $rest->$lng</td></tr></table>ってコードではなかったじゃないですか。動くわけないと思ったんだ。
aba623ky

2016/10/13 01:56

すみませんでした。説明不足で。地図のコードをphpタグの中で実行するにはどうすればいいですか?
Lhankor_Mhy

2016/10/13 03:34

それマジで言ってるんですか。Hellow World からやり直した方がいいんじゃないですか? <?php echo $rest->lat; ?> です。
aba623ky

2016/10/13 03:36

だから、それはできているんですよ。
aba623ky

2016/10/13 03:39

position: {lat:$rest->$lat, lng:$rest->$lng }, ←この部分はPHPタグの外ですよね、だからこれをどうやってphpタグの中に入れればいいのですか?
Lhankor_Mhy

2016/10/13 03:41

できていません。ソースを良く見てみましょう。position: {lat:$rest->$lat, lng:$rest->$lng }, と書いてありますよね? これはPHPタグの外にありますよね? これをPHPタグの中で出力するには<?php echo $rest->lat; ?>と書く必要があります。
退会済みユーザー

退会済みユーザー

2016/10/13 03:41

あなたの「できた」は、「理解した」という意味じゃないということです。
aba623ky

2016/10/13 03:42

僕のコードを見ればわかりますが、javascriptのコードの上に書いてあるのですが・・・
退会済みユーザー

退会済みユーザー

2016/10/13 03:45

あなたのコードを見た限りでは、HTMLの基礎もわかっていないんだなとしか考えられません。
aba623ky

2016/10/13 03:46

lhankor_mhyさん、javascriptの上に書いてあるのですが・・・
Lhankor_Mhy

2016/10/13 03:46

(投げ出したくなってきたな……)そのとおりです。でもPHPタグの内側にないですよね? ということはPHPのコードとして認識されないんですよ。だからPHPタグの内側に書く必要があるんです。ここまでは理解できますか?
aba623ky

2016/10/13 03:47

理解できます。
aba623ky

2016/10/13 03:48

javascriptをphpタグの中に入れるコードはわかりましたが、 <?php echo <<<EOM <script type="text/javascript"> alert( "TEST" ) </script> EOM; ?>
Lhankor_Mhy

2016/10/13 03:52

ていうか、自分でも position: {lat: <?= $lat ?>, lng: <?= $lng ?>}, と書いてるじゃないですか。これが書けるのに <?php echo $rest->lat; ?> が理解できないのは何故なんでしょう? もしかして、PHP省略形タグをご存知ない?
date

2016/10/13 03:53

phpの中にjavascriptを入れるのではなく、javascriptの中にphpを入れる この違いわかる
date

2016/10/13 03:53

$rest->$lat $rest->lat この二つの違い理解できる?
Lhankor_Mhy

2016/10/13 04:13

(つーか、四の五の言わずにまずやってみろと言いたい)<?= $lat ?>というのは<?php echo $lat; ?>の省略記法なんです。なので、position: {lat: <?= $lat ?>, lng: <?= $lng ?>}, はブラウザに表示される時に、position: {lat: 【$latの中身】, lng: 【$lngの中身】}, になるんです。ここまではいいですか?
date

2016/10/13 04:14

よく見るとその考えとコードを伝授したのは https://teratail.com/questions/50663 icchiiさんで質問者では無かったですね。理解できないのも理解した
aba623ky

2016/10/13 04:23

省略形は知っています。
aba623ky

2016/10/13 04:25 編集

というと、position: {lat: <?php $rest->lat ?>, lng: <?php $rest->$lng ?>}, ですか?
Lhankor_Mhy

2016/10/13 04:33

間違ってます。もう一度よく見直してください。というか、まず自分でやってみては? 他の回答者の指摘のHTML構造云々はたぶんブラウザが良きに計らってくれると思います。悩むよりまず自分でコードを書いてエラーを出すことの方が、あなたにとっては大切なことだと思います。
hnw

2016/10/13 04:34

phpでの表示と取得、代入などの違いをまずは調べてみましょう。
aba623ky

2016/10/13 04:34

分かりました。やってみます。
guest

回答4

0

この数日、何度も連投されているので、一覧から質問を見ても、
「あっ、ホットペッパーの人だ」と覚えてしまいました(笑)。

ご質問の意図とは違ってしまうんですけど、一連の質問に対して、
何人もの回答者の方が、すでに何度も回答されていますよね。
だから、ここで回答しても、同じ展開になりそうな予感が(笑)。

それで、質問者の方がもぐら叩きみたいに、
同じ問題に何度も引っかかってしまうのは、
根本的な理解が浅いから
だと思うんですよ。

だから、いったん「急がば回れ」で、
理解を深める時期が必要だと思います。
何度も同じような問答を繰り返すより有益でしょう。


どういう仕組みでマッシュアップできるのか知りたいんです

たとえばAmazonで、「Google Maps API」と検索すれば、本が見つかりますよね。
ほかにも、JavaScriptとかPHPの本を見て理解を深めるとか、
回答されたサンプルコードを何度も読み込むとかして、理解を深めましょう。

どうしても動かしながら覚えたいのであれば、いったんは難易度を下げて、
自分で大枠は理解できるプログラムを、少し工夫して改造してみるとか。

あるいは、MapsのAPIとホットペッパーのAPIを、別々に少しいじってみるとか。
一輪車に乗りながらお手玉をするのは難しいので、別々に練習するみたいなことです。

難しいことを意味が分からないままやるより、問題を分割して、
少しずつでも着実に前進した方が、結果的に良いと思います。

時間は掛かりますが、そういう訓練はみんなやってるから仕様がないです。
プログラミング以外の分野でも、スポーツとか美術・音楽とかでも、
自分の自由にできるようになるには、長い時間が掛かってるはずです。

たとえば、すぐにピアノが弾けたりせず、地味な練習をしてるわけです。
自分の弾きたい曲以外も何曲も練習するんです。絵のデッサンもそうですね。

もし、それがどお~しても嫌なら、ビジネスなど他のセンスを磨いて、
プログラムは外注、という形でも別にいいわけです。

投稿2016/10/11 08:33

編集2016/10/11 08:37
LLman

総合スコア5592

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

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

退会済みユーザー

退会済みユーザー

2016/10/11 09:04

一連の質問がいつから始まったかというと、4ヶ月以上前の話 https://teratail.com/questions/36927 普通に考えて、どんな初心者でもそれなりにコードが書けるようになるには十分な時間だと思われます。質問を繰り返すよりよっぽど効率的だと思います。
aba623ky

2016/10/11 09:14

誰のコードを持ち出してきているんですか?笑
takaw

2016/10/11 10:23

別人のコードを持ち出してますよ。 それがなにか?
LLman

2016/10/11 11:13 編集

>Kosuke_Shibuyaさん >質問を繰り返すよりよっぽど効率的 詳しい事情は知りませんでしたが、 まったくその通りですね。 >aba623kyさん サービスを作りたい、という熱意はあるのかもしれませんが、 それをたんに同じ質問を繰り返すのではなく、 学習して理解を深めることに注いでください。 コピペでもなく一から十まで教えてもらうのでもなく、 自分で自由にプログラムを作れるようになるためには、 どうしても乗り越える必要がある壁です。 ですから、難しかったり退屈な部分があっても、 ぜひ落ち着いてじっくり取り組んでください。
archiver

2016/10/11 15:50

目的意識を持って取り組むというのも重要ですよね。漠然と「作りたい」ではなく、もっと確固とした目的意識。 ものの毛色等は違いますが、このサイトでも中学生が2ヶ月でものを作っていますからね(状況的にはこの質問者さんよりも厳しいものだったと思いますけど。なかなか情報が集まりにくい題材だったので)。その中学生が作り上げることができたのも、確固とした目標(発表会があって、それに出品するため)があったからだと思います。
jm1156

2016/10/11 23:36

そして自分の理解できるズバリ答えそのものの解答以外のコメントは、すべて無視するという紙対応; リアル世界でどういう生活をしているのか気になりますねぇ;
退会済みユーザー

退会済みユーザー

2016/10/12 00:40

> jm1156さん 「紙対応」言い得て妙なw
退会済みユーザー

退会済みユーザー

2016/10/19 07:05

相変わらずやってますねぇ…やはり別垢に行ってましたか… 予想通りすぎてもはや笑うしかないですね。 >jm1156さん 「紙対応」…ぴったりな言葉ですね!
guest

0

HTML
Google Maps
PHP


#サンプルコード

(XML版)ホットペッパーAPIからレストラン検索するサンプル その2

まあ、期待はしてないが、各種リファレンスと、コード文中に多少解説を加えておいた。


#ソース(PHP実行結果)の確認の仕方

画面上で、右クリック(2本指タップ)
「ページのソースを表示」をクリック

イメージ説明

ソースを確認できます。

イメージ説明

投稿2016/10/11 13:43

編集2016/10/13 03:10
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

ベストアンサー

この問題にはPHPとjavascriptはどっちが先に処理されるか分からないと難しいのでしょう
答えはPHP処理->javascript
の順番です。ですのでKosuke_Shibuyaさんの

<div class="map" data-lat="<?= h($rest->lat); ?>" data-lng="<?= h($rest->lng); ?>"></div> の処理はjavascriptの処理前にdata-latとdata-lngにはすでにデータが入っています。 <script> alert(); </script> を入れて実行すれば、javascript処理前、既にホットペッパーの情報が入っていることが確認できるでしょう。

2016-10-12 9:53 追記

<?php $lat = 35.68944; $lng = 139.69167; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Google Maps V3</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?&sensor=false"></script> <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', function() { var lat =35.68944; var lng =139.69167; var latlng = new google.maps.LatLng(lat, lng); var mapOptions = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); var marker = new google.maps.Marker({ position: {lat: <?= $lat ?>, lng: <?=$lng ?>}, map: mapObj }); }); </script> </head> <body> <div id="gmap" style="width: 400px; height: 300px;"></div> </body> </html>

googlemapを表示するにはある程度の高さheightを設定していないと表示されていないように見えてしまいます。

2016/10/13 16:30

<?php $key = 'apikey'; $count = '10'; $large_area = 'Z014'; $start = 1; $format = 'xml'; $url = 'http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=' . $key . '&count=' . $count . '&large_area=' . $large_area . '&start=' . $start . '&format=' . $format; $xml = simplexml_load_file ( $url ); $total_count = $xml->results_available; if (! $xml->shop) { echo 'We can not find!!'; } else { $i = 0; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Google Maps V3</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?&sensor=false"></script> <script type="text/javascript"> function hottomap(g_lat,g_lng,g_count){ google.maps.event.addDomListener(window, 'load', function() { var lat =35.60472; var lng =140.12333; var latlng = new google.maps.LatLng(lat, lng); var mapOptions = { zoom: 12, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true }; var mapObj = new google.maps.Map(document.getElementById("gmap_" + g_count), mapOptions); var marker = new google.maps.Marker({ position: {lat:g_lat, lng:g_lng}, map: mapObj }); }); } </script> </head> <body> <?foreach ( $xml->shop as $rest ) { ?> <table border="1"> <tr> <td><?php echo $rest->name; ?></td> </tr> <tr class="map"> <td><?=$rest->lng;?><?=$rest->lat;?></td> </tr> <tr> <td><?=$rest->address; ?></td> </tr> </table> <script> hottomap(<?=$rest->lng;?>,<?=$rest->lat;?>,<?=$i?>) </script> <div id="gmap_<?=$i?>" style="width: 500px; height: 370px; border: 1px solid Gray;"></div> <?php $i++; } } ?> </body> </html>

投稿2016/10/11 09:27

編集2016/10/13 07:32
date

総合スコア1820

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

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

aba623ky

2016/10/11 09:38

つまり、data-latとdata-lngをjavascriptの処理前に入れるってことですか?
date

2016/10/11 09:40

<?php echo h($rest->lat); ?> <?php echo h($rest->lng); ?> と出力して確かめてみる
date

2016/10/11 09:43

その前にありました $rest->$lat; $rest->$lng; これは間違い $rest->lat; $rest->lng;
aba623ky

2016/10/11 11:59

これはどこに書けばですか?
toutou

2016/10/11 12:03

これはどこに書けばいいですかはさすがにおかしいだろ。これはわかってないとみなされても仕方ない。
date

2016/10/11 12:35

多分私が思っている分からないと質問者の分からないは次元が違うのでしょう
toutou

2016/10/11 12:46

ここまでコードを書いてるならこれはわかるはずなんですがね。所詮コピペ厨か。プラモデルみたいに設計図とパーツがないとできないか。自分で作れるようにならないと意味ないのに。このやり取りの質問がまた増えると思うと悲しくなるな。質問もコピペみたいなことしてるし。
退会済みユーザー

退会済みユーザー

2016/10/11 13:15

この質問と回答の無限ループはいつまで続くんでしょうね‥
ynakano

2016/10/11 13:30

そもそも一連の話は業務でやってるのでしょうか? だとしたら周りの人に協力を仰ぐべきです。 個人事業主で一人でやっているとしたら、力量不足のものに手を出したとしか言いようがないです。今からでも断るべきでしょう。 趣味でやっているのならもっと簡単なところから手を出すべきです。 もう一つの回答の方をじっくり読み返してみてはいかがでしょうか。
aba623ky

2016/10/11 13:39

dataさん、つまり先に <?php echo h($rest->lat); ?> <?php echo h($rest->lng); ?> と出力して、のちに <div class="map" data-lat="<?= h($rest->lat); ?>" data-lng="<?= h($rest->lng); ?>"></div> とするのですか?
toutou

2016/10/11 13:41

>>ynakano そこらへんは大丈夫だと思います。この人が事業主であるはずがない。言葉遣い、態度、理解力のなさ、どれを取っても事業主なはずがないんです。趣味の可能性が高いでしょう。趣味でやってても楽しくはないでしょうね。なんも出来てないわけですから。人が作ってるのを動かして、動いてるのだけ見て楽しいのならば、それでいいんですが。どちらにせよ向いてないとは思いますがね。天才でもなければ、地道にやろうとしない人ができるはずがない。
toutou

2016/10/11 13:46

>>aba623ky なんでechoするかわかってます?そもそもechoってわかってます?それがわかってれば、 出力して、のちに <div class="map" data-lat="<?= h($rest->lat); ?>" data-lng="<?= h($rest->lng); ?>"></div> とするのですか?、というのはでてこないはず。
aba623ky

2016/10/11 13:55

echoっていうのは引数に指定した文字列を出力するんでしょ
aba623ky

2016/10/11 13:57

だから、各店舗の緯度経度はとっくに出力していますよ笑
toutou

2016/10/11 13:57

じゃあ、echoをする理由はなぜ?
toutou

2016/10/11 14:07

仮に経度が出たとしましょうか。10が出たとします。それが文字列として画面に映し出されています。画面には10が写ってます。その画面を見ました。これは数字を確認と言う行為です。のちに<div class="map" data-lat="<?= h($rest->lat); ?>" data-lng="<?= h($rest->lng); ?>"></div>とするといわれても、関連性がないと思うんですが何の関連性があるの?
ttyp03

2016/10/11 23:54

相変わらずやってますね! 回答者ではなく見てるだけなら、なかなか楽しい流れなんですけどねw
date

2016/10/11 23:54

出力できていたとは思えない $rest->$lat;が間違いだから
aba623ky

2016/10/12 01:51

今、確認したところできました。 ```var marker = new google.maps.Marker({ position: {lat: 35.8986469, lng: 153.9875216}, map: mapObj }); ``` 店舗の緯度経度を調べて打ち込むとちゃんと地図に出ます。
date

2016/10/12 02:30

いったい何をそんなに急いでいるんでしょうか、期限でもあるんですかね
aba623ky

2016/10/12 03:30

冒頭はこっちじゃないですか? <?php $rest->$lat = 35.68944; $rest->$lng = 139.69167; ?>
date

2016/10/12 03:50

一つ確認しておきたいのだがそれでエラーにならないの
aba623ky

2016/10/12 03:58

tableの中で出力しているため、エラーになりません!
aba623ky

2016/10/12 03:58

dateさんに聞きますが、どうやって出力しているのですか?
退会済みユーザー

退会済みユーザー

2016/10/12 04:02

画面で、右クリック、「ソースを表示」で確認せい。
date

2016/10/12 04:05

$rest->lat $rest->lng 私はこう出力している。
ynakano

2016/10/12 04:09

みんな優しいね
aba623ky

2016/10/12 14:28

大変お待たせしました。今載せます。
date

2016/10/13 07:29

解決してしまったが、本当の意味で解決になるのはいったいいつになることか。作っておいたもう一つのサンプルを入れとく
date

2016/10/13 07:31

本当の初心者に教えるのがこんなに大変だということが、わかって良かったよ
date

2016/10/13 07:36 編集

最後になりますが、一度くらいKosuke_Shibuyaさんのコードで学んでみて下さい。 ここまで0からコードを書いてくれるのはおそらくない 最後に自分のコードにするにしてもClassとfunctionを動くコードで学べるいい機会になるよ
退会済みユーザー

退会済みユーザー

2016/10/13 07:43

> ここまで0からコードを書いてくれるのはおそらくない たしかにw。ここまで書いても理解できない人は他にいませんからね。
jm1156

2016/10/13 08:05

だが、おそらく、馬耳東風 (;´Д`)
ynakano

2016/10/13 08:23

解決したんかい... せめて今まで何が上手く行ってなかったとかコメントしてくれれば教えた甲斐もあるんですけどねぇ。
jm1156

2016/10/13 08:36

彼にそんなことを期待してはいけない…。 でも、大丈夫です。 すぐに同じような質問が来ると思います。
date

2016/10/13 08:40

答えは position: {lat:<?= $rest->lat?>, lng:<?=$rest->lng ?>}, このようになりますが、id="gmap" にすべて入れてしまっているため、表示されるMAPは最後の検索結果のMAPが一つだけ表示されます。 これを解決するには、IDをユニークにして処理、CLASSにして処理を変えるなどが考えられます
Lhankor_Mhy

2016/10/13 09:55

質問者の前世ユーザーが書いてたコードだと50件ぐらい店舗を出力してたと記憶してるので、1件にひとつずつGoogleマップを描画してたらブラクラになりそう。 ぶっちゃけ、Static Maps API を使ったほうがみんな幸せになれそうな気がしますね。
guest

0

1・マーカーのない状態で地図が表示できるかどうか?
2・マーカーのある状態で座標を直接数字指定で表示できるかどうか?
3・phpの設定でshort_open_tagが書いたコードに対応しているかどうか?
4・$lat,$lngにちゃんと値が入っているかどうか?
5・ソースを見て希望通りのソースになっているかどうか?

回答もコピペします。
まず1から順番に5まで確認してみてください。
ここがちゃんと動いていなければいくら質問の回答をしても動きません

投稿2016/10/11 13:34

hnw

総合スコア37

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

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

aba623ky

2016/10/11 13:38

1・マーカーのない状態で地図が表示できるかどうか? できていません。
hnw

2016/10/11 13:41

>情報の追加より phpの中に書いていません。phpの書き方についてどのように調べましたか?
hnw

2016/10/11 13:48

ではまず1からですね。 マーカーのない地図(googlemaps)を埋め込み(iframe)ではなく apiで表示できるようになるところからです。 それには掲示板で聞く以外の方法で 「どこで」「何を」調べればわかると思いますか?
aba623ky

2016/10/11 13:51

ネットで調べました。
aba623ky

2016/10/11 13:52

google map api 単独だとmapを表示できます。
aba623ky

2016/10/11 13:53

マッシュアップのコードはホットペーパーapiはphpタグでまとめ、google map apiはjavascriptタグでまとめています。
hnw

2016/10/11 13:58

では、今の状態でphpを全部取っ払って適当なlat longを数値で入力して そこにマーカーがちゃんと表示されますか? 35.8986469 153.9875216
aba623ky

2016/10/11 14:38

phpを全部取っ払ってどういう意味ですか?
hnw

2016/10/11 14:44

```var marker = new google.maps.Marker({ position: {lat: <?= $lat ?>, lng: <?= $lng ?>}, map: mapObj }); ``` こういうphpで書かれている部分を ```var marker = new google.maps.Marker({ position: {lat: 35.8986469, lng: 153.9875216}, map: mapObj }); ``` こんな感じにするってことです
aba623ky

2016/10/11 15:28

なるほど、やってみます。
aba623ky

2016/10/12 01:49

今、確認したところできました。 ```var marker = new google.maps.Marker({ position: {lat: 35.8986469, lng: 153.9875216}, map: mapObj }); ``` 店舗の緯度経度を調べて打ち込むとちゃんと地図に出ます。
hnw

2016/10/12 01:54

だとしたら出力がちゃんと出来ていないという事になります。 出力している部分の確認 3番、4番を確認してください。
aba623ky

2016/10/12 02:03

4・$lat,$lngにちゃんと値が入っているかどうか? これはどういう意味ですか?
aba623ky

2016/10/12 02:04

レスポンスフィールドで$rest->$lng、$rest->$latとやると各店舗の緯度経度が表示されます。
hnw

2016/10/12 02:19

position: {lat: <?= $lat ?>, lng: <?= $lng ?>} を数値に置き換えるとちゃんと表示されたんですよね? ですから<?= $lat ?>, lng: <?= $lng ?>に座標が入っていないか、まったく別の何かが入っているということですよね?
aba623ky

2016/10/12 02:21

ごめんなさい、説明不足でした。 レスポンスフィールドで各店舗の緯度経度が分かったていうのは、 position: {lat: <?= $lat ?>, lng: <?= $lng ?>} ではなく、 <td>$rest->$lat $rest->$lng</td>とやったから分かったんです。
aba623ky

2016/10/12 02:26

ごめんなさい。 急いでたものでちゃんと文章を読んでいませんでした。 position: {lat: <?= $lat ?>, lng: <?= $lng ?>} を数値に置き換えたらちゃんと表示されます。
aba623ky

2016/10/12 02:27

><?= $lat ?>, lng: <?= $lng ?>に座標が入っていないか、まったく別の何かが入っているということですよね? 座標が入っていないんだと思います。
hnw

2016/10/12 02:30

<td>$rest->$lat $rest->$lng</td> これで表示されたんでしょうか?
hnw

2016/10/12 02:31

では、何が入っているのか確認してください。
aba623ky

2016/10/12 02:34

はい、おっしゃる通りです。
aba623ky

2016/10/12 03:41

各店舗の緯度経度の数字が入っています。
hnw

2016/10/12 04:06

緯度経度の数字がそれぞれの変数に入っているのであれば直接入力された 場合と同様に表示されるはずですがどのように確認されましたか?
aba623ky

2016/10/12 04:37

地図が白紙だから緯度経度が地図に値を渡せていないと判断しました。
aba623ky

2016/10/12 04:42

<?= $lat ?>, lng: <?= $lng ?>で地図に緯度経度の値を渡せると思いました。 <td>$rest->$lat $rest->$lng</td> これで緯度経度が表示されたから、いけるかと思いました。
aba623ky

2016/10/12 04:43

ちなみにホットペーパーapiはphpで処理し、google map apiはjavascriptで処理しています。 phpのタグの?>のあとにjavascriptのコードを挿入しています。
hnw

2016/10/12 04:57

でしたらまずは目的の緯度、経度はどのようにしたら取得、 出力できるのか探り当てる必要があります。 かなり疑問は残りますが提示された通り <td>$rest->$lat $rest->$lng</td> 上記のみで目的の緯度、経度が取得、表示できたということで間違いないでしょうか? それでしたらそれぞれ position: {lat: $rest->$lat, lng: $rest->$lng} で表示されると思います。
aba623ky

2016/10/12 06:09 編集

上記のみと言っていますが、リクエストパラメータを作って、 <?php $baseurl='http://webservice.recruit.co.jp/hotpepper/gourmet/v1/'; $key='私のid'; $large_area=''; $start=1; $count=10; $url='$baseurl?key='.$key.'&large_area='.$large_area.'&start='.$start.'&count='.$count'; $xml=simplexml_load_file($url); ?> レスポンスフィールドの最初を foreach($xml->shop as $rest)としました。
hnw

2016/10/12 06:22

今更ながらに参考元を確認しました。 おそらく動いたという <td>$rest->$lat $rest->$lng</td> この部分ですが、参考元を見ると <tr class="shop" data-lat="<?= h($rest->lat); ?>" data-lng="<?= h($rest->lng); ?>"> この部分を参考にしたと思いますが どこをどう変更したかは覚えておいででしょうか? また、全く変更しない状態ではどうでしたか?
aba623ky

2016/10/12 09:40

これをただtableの中に挿入しただけです! <td>の中に代入しただけです。
hnw

2016/10/12 09:50

代入と表示は別の意味を持ちます。 代入とは変数に値を入れることですが、aba623kyさんの <?= h($rest->lat); ?>は表示となります。 ただし、htmlのtr要素のdata-lat,data-lng属性に対しては代入となります。 では<td>$rest->$lat $rest->$lng</td>以外は参考サイトのまま 全く触っていない状態で表示できていないという認識でよろしいですか?
aba623ky

2016/10/12 10:35

では<td>$rest->$lat $rest->$lng</td>だけが参考サイトを引用しています。他のユーザーからコードを公開して欲しいという要望がありましたので、コードを公開します。10時過ぎに公開します。
aba623ky

2016/10/12 14:28

大変お待たせしました。今掲示します。
hnw

2016/10/13 01:00

確認しましたが、修正コメントの方でdateさんが言っているように まず現在表示されているソースを確認しましょう。 htmlの基本はhtml開始タグ~html閉じタグの1つのペアで完結されるものです。 それを確認した後で何がわからないのか、どこがわからないのか展開してください。
aba623ky

2016/10/13 01:44

つまり、地図のコードをphpタグの中に書かないとダメってことですか?
hnw

2016/10/13 01:57

まず、最終的に希望するhtmlが自分の中で見えていますか? なれていないのであればまずは複数店舗分を表示する場合のhtmlを書いてください。 順序としては ・最終的な表示htmlを先に記述する。  3つ4つの店舗が表示されている状態(情報はダミーで、地図の部分は空) ・次にjsで複数の地図を表示させる(位置は同じでかまわない) ・最後にphpでそれぞれの地図を目的の位置に表示させる という順番で作っていってください。
aba623ky

2016/10/13 01:58

地図のコードをphpタグの中に書かないと実行できないと言われました。しかし、地図のコードはjavascriptタグなのでどうやってphpタグの中に入れるのか分かりません。教えてください。
hnw

2016/10/13 02:04

地図のコードではなく(確かにcoordですが)座標です。 「地図のコードをphpタグの中に書け」と言われて 何をどう調べて何がわからなかったですか?
aba623ky

2016/10/13 02:18

javascriptをphpタグの中に入れるコードはわかりましたが、 <?php echo <<<EOM <script type="text/javascript"> alert( "TEST" ) </script> EOM; ?> これを提示したtableの中に入れて実行する方法がわかりません。
hnw

2016/10/13 02:30

その前にそこだけ変更しても全体は変わりませんよ。 まずは現在のソースと最終的なhtmlソースの比較をする必要があります。
aba623ky

2016/10/13 02:41

最終的な表示htmlを先に記述するってどういう意味ですか?
hnw

2016/10/13 02:56

上に挙げたソースの場合でしたらphpを使わずに <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> … <body> <div> <table> <tbody> <tr> <th>…<th> <td>…<td> … </body> </html> という希望する最終的なhtmlを先に書いておくことです。 もちろんですがその前に現在のソースを見てみるのが重要ですが確認しましたか?
aba623ky

2016/10/13 03:23

htmlにホットペーパーapiのコードを入れないとダメですか?
hnw

2016/10/13 04:32

まずはjavascriptやphpを全て抜いてhtmlだけの状態で作るのが前提です。 その上で色づけでマウスで動かせるようなjavascriptを入れ込んで地図を表示させます。 最後にphpでそれらを各情報ごとに表示できるようにしていきます。 ある程度慣れている人でも最初のデザイン・コーディングはアテの状態で 作ってからphpを入れ込んでいく場合も多いです。 なれていないのであればなおさら基礎のhtml部分をキッチリさせてから進めましょう
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問