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

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

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

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

HTML

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

API

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

Q&A

解決済

1回答

3692閲覧

マッシュアップのやり方でlat lng の結び方

aba623ky

総合スコア63

PHP

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

HTML

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

API

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

0グッド

0クリップ

投稿2016/10/07 12:17

編集2016/10/07 13:58

マッシュアップのやり方を調べています。
http://qiita.com/ShibuyaKosuke/items/452928e235d4b1d10475
このサイトを参考にし作成しようと考えています。
ただ、このサイトでわからないことが幾つかあります。
このサイトを見る限りlat lngをつかってマッシュアップを行うんですよね?
どうやったら、この二つのapiのlat lngを結びつけることができるのですか?
google map apiはjavascriptでホットペーパーapiはphp(javascriptでも使えますが、あえてphpを使いたいです。理由は使いやすいいからです)で、この二つを結びつけるにはどうすればいいのですか?

このコードをホットペーパーapiのコードに貼ってその次にどうやってホットペーパーapiのlat lngと結びつけさせればいいのですか?

<!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 lng =35.68944; var lat =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: lng: }, map: mapObj }); }); </script> </head> <body> <div id="gmap" style="width: 500px; height: 370px; border: 1px solid Gray;"> </div> </body> </html>

ここでは例として東京のlat lngを使います。

php

1<?php 2$key='MY KEY'; 3$count='10'; 4$large_area='Z011'; 5$start =1; 6$lng =35.68944; 7$lat =139.69167 ; 8$format='xml'; 9$url='http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key='.$key.'&count='.$count.'&start='.$start.'&lat='.$lat.'&lng='.$lng.'&format='.$format; 10$xml=simplexml_load_file($url); 11・・・ 12・・・ 13・・・ 14

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2016/10/07 19:03

参考サイトの detail.php を見ていれば分かるはずなんですけどねぇ...
aba623ky

2016/10/08 01:05

すいません、わからなかったので質問をしました。本当に申し訳ございません。
aba623ky

2016/10/08 01:15

<div id="map" data-lat="<?= h($restaurants->shop->lat); ?>" data-lng="<?= h($restaurants->shop->lng); ?>"> が参考になるのはわかりますが、僕のphpにどうやって挿入すればいいかわかりませんでした。
guest

回答1

0

ベストアンサー

以下のように、単に変数をHTMLに埋め込めばいいんじゃないですか

php

1<?php 2$lng =35.68944; 3$lat =139.69167; 4?> 5<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 6<html> 7<head> 8 <title>Google Maps V3</title> 9 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 10 <script type="text/javascript" src="http://maps.google.com/maps/api/js?&sensor=false"></script> 11 <script type="text/javascript"> 12 google.maps.event.addDomListener(window, 'load', function() 13 { 14 var lng =35.68944; 15 var lat =139.69167 ; 16 17 var latlng = new google.maps.LatLng(lat, lng); 18 var mapOptions = { 19 zoom: 12, 20 center: latlng, 21 mapTypeId: google.maps.MapTypeId.ROADMAP, 22 scaleControl: true 23 }; 24 var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); 25 26 var marker = new google.maps.Marker({ 27 position: {lat: <?= $lat ?>, lng: <?= $lng ?>}, 28 map: mapObj 29 }); 30 }); 31 </script> 32</head> 33<body> 34 <div id="gmap" style="width: 500px; height: 370px; border: 1px solid Gray;"> 35 </div> 36</body> 37</html>

追記

実際のコードを動かしてみたら、緯度と経度が逆でしたね...
修正したものを載せておきますね
※google apiのkeyは自分のものを埋めてください

php

1<?php 2$lat =35.68944; 3$lng =139.69167; 4?> 5<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 6<html> 7<head> 8 <title>Google Maps V3</title> 9 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 10 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&key=X_YOUR_API_KEY_X"></script> 11 <script type="text/javascript"> 12 google.maps.event.addDomListener(window, 'load', function() 13 { 14 var lat =35.68944; 15 var lng =139.69167; 16 17 var latlng = new google.maps.LatLng(lat, lng); 18 var mapOptions = { 19 zoom: 16, 20 center: latlng, 21 mapTypeId: google.maps.MapTypeId.ROADMAP, 22 scaleControl: true 23 }; 24 var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); 25 26 var marker = new google.maps.Marker({ 27 position: {lat: <?= $lat ?>, lng: <?= $lng ?>}, 28 map: mapObj 29 }); 30 }); 31 </script> 32</head> 33<body> 34 <div id="gmap" style="width: 500px; height: 370px; border: 1px solid Gray;"> 35 </div> 36</body> 37</html>

投稿2016/10/07 22:14

編集2016/10/09 08:16
popobot

総合スコア6586

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

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

aba623ky

2016/10/08 01:06

<?php $lng =35.68944; $lat =139.69167; ?> は、ホットペーパーapiのパラメータですか?
aba623ky

2016/10/08 01:14

参考にしたサイトをみると、 <div id="map" data-lat="<?= h($restaurants->shop->lat); ?>" data-lng="<?= h($restaurants->shop->lng); ?>"> となっております。
popobot

2016/10/08 03:22

その緯度経度はaba623kyさんのphpのコードですよ。 もしホットペッパーAPIから取得した値を使いたいなら、取得した値で$lngと$latを書き換えたらできると思います。
aba623ky

2016/10/08 07:27

それは、どうやってやるのですか? <div id="map" data-lat="<?= h($restaurants->shop->lat); ?>" data-lng="<?= h($restaurants->shop->lng); ?>"> でやるのですか?
aba623ky

2016/10/08 07:28

最初、icchiiさんが提示したコードは単にgoogle map を提示するだけですか?
aba623ky

2016/10/08 07:28

すみません、混乱しているもので・・・ 詳しく教えて下さい。
popobot

2016/10/08 12:46 編集

そうですよ。自分のコードは、aba623kyさんがわからないというPHPの変数をどのようにjavascriptに渡すかの一例です。 まず、自分が回答したコードを動かしてみたのでしょうか??
aba623ky

2016/10/08 15:22

幾つか調べたり実行したので質問させて下さい。 lat:<?= $r->lat; ?>みたいな感じのを googlemapのapiに書けばいいという指摘があったのですが、どこにlat:<?= $r->lat; ?> ; に書き換えればいいですか? あと、lat lngをリクエストで使うと、東京の一度しか表示されません。このlat lngを調べると東京都庁のlat lngですよね。東京都庁の周りしか表示されないのですが・・・ var lng =35.68944; var lat =139.69167 この座標は東京都庁ですよね?
aba623ky

2016/10/08 15:26

書き換えればいいというのは、 google.maps.event.addDomListener(window, 'load', function(){}の中の var lng =35.68944; var lat =139.69167 ; だけをlat:<?= $r->lat; ?>に書き換えればいいかという質問です。 position: {lat: lng: }, はこのままでいいのですか?
aba623ky

2016/10/08 15:27

質問が長くなり申し訳ございません。
popobot

2016/10/08 23:34 編集

- Google Mapで東京で検索すると、都庁が表示されるので、その緯度経度は都庁なんだと思います。 - 自分のコードを良く見てほしいのですが、markerのpositionに渡しているlatとlngを以下のように書き換えています。これでPHPの変数をJavascriptに渡しています。 position: {lat: <?= $lat ?>, lng: <?= $lng ?>}, - google map apiのコードをよく見ると2箇所緯度経度を設定していると思います。 mapOptionsのcenterの緯度経度は地図の中心をどの緯度経度にするかの設定です。 markerのpositionは、マーカーの緯度経度です。マーカーの緯度経度は複数設定できます。そうすれば複数の緯度経度を表示することができます。 緯度経度の値を色々な値に手で書き換えてみて、動作を確認してみてください。
aba623ky

2016/10/09 00:19

markerのpositionが店舗の位置を表示するんですよね? >マーカーの緯度経度は複数設定できます。そうすれば複数の緯度経度を表示することができます。 混乱していますが笑 つまり、店舗の位置を個々のtableに表示するには店舗の緯度経度を調べなくてはいけないのですか?
popobot

2016/10/09 00:23

> markerのpositionが店舗の位置を表示するんですよね? そうですよ。 >> マーカーの緯度経度は複数設定できます。そうすれば複数の緯度経度を表示することができます。 > つまり、店舗の位置を個々のtableに表示するには店舗の緯度経度を調べなくてはいけないのですか? tableが何かわかりませんが、店舗の位置を地図に表示するには、各店舗の緯度経度を調べる必要があります。それはホットペーパーAPIでやることになると思いますが
aba623ky

2016/10/09 01:10

そうすると、いちいち各店舗の緯度経度を調べて書き込んで行かなくてはいけないのですか?
aba623ky

2016/10/09 01:11

>それはホットペーパーAPIでやることになると思いますが どうやってやるのですか? 全部調べるのに何年めかかるんじゃないですか?、
aba623ky

2016/10/09 02:03

tableとは、ホットペーパーapiで取得した情報の下に地図を挿入したいってことです。
popobot

2016/10/09 04:40

すみません、何がしたいのかがわからないです。 そもそもホットペッパーAPIでなんの情報を取得したいのでしょうか?
aba623ky

2016/10/09 05:00

ホットペーパーapiで店舗を取得したいんです。
aba623ky

2016/10/09 05:01

それでホットペーパーapiだと地図を取得することはできないのでgooglemapを使いたいです。 ですが、各店舗の緯度経度を取得する方法が分からないんです。
popobot

2016/10/09 05:01

全部の店舗ですか?
aba623ky

2016/10/09 05:05

はい、そうです。
aba623ky

2016/10/09 05:06

県の全体の店舗を取得したいんです。
aba623ky

2016/10/09 05:08

難しいですか? kosuke_shibuyaさんが提示したコードだと、県全体の店舗の緯度経度を取得して地図に表示しているみたいですが・・・ それも、各店舗の緯度経度を全部調べた感じがないのですが
aba623ky

2016/10/09 05:16

いつも説明不足で怒られるので詳しく説明させて下さい。 ・店舗の情報をホットペーパーapiで取得しました ・ホットペーパーapiだと、地図を取得することができません ・google map api とマッシュアップすれば地図を表示できると知りました ・googlemapapiを単体で表示することはできますが、マッシュアップのやり方がわかりませんでした ・やっとマッシュアップのやり方が分かりましたが、ホットペーパーapiで各店舗の緯度経度を取得する方法がわかりません ・特に県全体の各店舗の緯度経度を取得する方法がわかりません。
aba623ky

2016/10/09 05:26

そうではなくて、各店舗の緯度経度を取得する方法を教えて下さい。
aba623ky

2016/10/09 05:27

各店舗の緯度経度を取得しないと地図に店舗のアイコンを表示することができないんですよね?
aba623ky

2016/10/09 05:35

店舗の位置を地図に表示するには、各店舗の緯度経度を調べる必要があると言われたので、調べる方法が知りたいんです。
popobot

2016/10/09 06:23

ってか、次々に同じような質問を新規に作成してますが、あまりいいことだとは思いませんね...。kosuke_shibuyaさんのコードを自分の環境で動くようにして、必死に勉強してどのように処理しているかを読み解くところから始めたらどうでしょうか? それもしないで質問ばかりしてても何も解決しないと思いますよ...
aba623ky

2016/10/09 06:29

では各店舗の地図を表示するには、 position: {lat: <?= $lat ?>, lng: <?= $lng ?>}, を使えばいいとのことですね?
popobot

2016/10/09 06:34

やり方の一つとしてはそうだと思います。
aba623ky

2016/10/09 06:45

じゃあ、緯度経度を設定すると、東京都庁の周りの店舗が表示させる原因はなんなんですか?
aba623ky

2016/10/09 06:50

large_areaとlat、lngをリクエストパラメータにするなら地図に店舗を表示出来るってことですね?
aba623ky

2016/10/09 07:45

そうみたいですね。
aba623ky

2016/10/09 08:13

では、緯度経度だけなら東京都庁の周辺しか入手できませんよ
popobot

2016/10/09 08:19

そもそものコードの緯度経度が逆になっていたので、修正したものを載せておきました。 ホットペーパーAPIのことは詳しく調べていないので、よくわかっていませんが、取得できる情報には制限等があるのかもしれませんね。そのへんはご自身で調べてみてください。
aba623ky

2016/10/09 08:27

とりあえず、各店舗の緯度経度は入力しなくていいんですね。 分からなくなったらまた聞きます。
popobot

2016/10/09 08:30 編集

別の質問の方でも話されているようですが、自分はこれ以上質問に応えることはやめておきますね... たぶん、このまま続けてもあまり意味が無いと思うので。 kosuke_shibuyaさんがお手本となるコードを作ってくれていますので、それをまず動かしてみてください。そしてコードを良く読んで下さい。それもしないで次々に質問をしても前へは進めないと思います。 がんばってください!
aba623ky

2016/10/09 11:06

ありがとうございます。 頑張ります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問