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

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

ただいまの
回答率

90.23%

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

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,881

aba623ky

score 61

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

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

イメージ説明

このように書きました。

<?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にその値を渡し、地図に位置情報を表したいです。

$rest->$lat;
$rest->$lng;

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

var bounds = new google.maps.LatLngBounds();

                for (var i = 0; i < shops.length; i++) {
                    var marker = new google.maps.Marker({
                        position: {
                            lat: parseFloat(shops[i].getAttribute('data-lat'))
                            , lng: parseFloat(shops[i].getAttribute('data-lng'))
                        },
                        map: map
                    });
                    bounds.extend(marker.position);
                }
                map.fitBounds(bounds);

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

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


と作成しましたが、マップ自体が表示されません。
どうやればレスポンスフィールドで得た緯度経度を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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • hnw

    2016/10/13 13:34

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

    キャンセル

  • aba623ky

    2016/10/13 13:34

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

    キャンセル

  • 退会済みユーザー

    2016/10/14 23:43

    こちらの質問が他のユーザから「問題・課題が含まれていない質問」という指摘を受けました
    teratailでは、漠然とした興味から票を募るような質問や、意見の主張をすることを目的とした投稿は推奨していません。
    「編集」ボタンから編集を行い、質問の意図や解決したい課題を明確に記述していただくと回答が得られやすくなります。

回答 4

+15

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

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

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

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


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

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

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

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

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

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

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

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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/12 08:36

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

    キャンセル

  • 2016/10/12 09:40

    > jm1156さん
    「紙対応」言い得て妙なw

    キャンセル

  • 2016/10/19 16:05

    相変わらずやってますねぇ…やはり別垢に行ってましたか…
    予想通りすぎてもはや笑うしかないですね。

    >jm1156さん
    「紙対応」…ぴったりな言葉ですね!

    キャンセル

+9

HTML
Google Maps
PHP


サンプルコード

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

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


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

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

イメージ説明

ソースを確認できます。

イメージ説明

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

checkベストアンサー

+5

この問題には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/13 17:36

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

    キャンセル

  • 2016/10/13 17:40

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

    キャンセル

  • 2016/10/13 18:55

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

    キャンセル

+3

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/13 11: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を先に書いておくことです。

    もちろんですがその前に現在のソースを見てみるのが重要ですが確認しましたか?

    キャンセル

  • 2016/10/13 12:23

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

    キャンセル

  • 2016/10/13 13:32

    まずはjavascriptやphpを全て抜いてhtmlだけの状態で作るのが前提です。
    その上で色づけでマウスで動かせるようなjavascriptを入れ込んで地図を表示させます。
    最後にphpでそれらを各情報ごとに表示できるようにしていきます。

    ある程度慣れている人でも最初のデザイン・コーディングはアテの状態で
    作ってからphpを入れ込んでいく場合も多いです。
    なれていないのであればなおさら基礎のhtml部分をキッチリさせてから進めましょう

    キャンセル

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

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