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

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

ただいまの
回答率

89.64%

ホットペーパーapiで取得した店舗の地図を店舗ごとに表したい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,576

aba623ky

score 61

題名のことを実現したいのです。
ホットペーパーapiのパラメータにlat lngを入れて、
※下は千葉県の店舗のリクエストパラメータです。

$key='my key';
$count='10';
$lat = '35.60472';
$lng ='140.12333';
$range ='5';
$start =1;
$format='xml';
$url='http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key='.$key.'&count='.$count.'&lat='.$lat.'&lng='.$lng.'&range='.$range. '&start='.$start.'&format='.$format;
$xml=simplexml_load_file($url);


そしてgoogle map apiを

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


としました。
しかし、結果はこの緯度経度が県庁の緯度経度のためか千葉県庁の周りの店舗しか表示されません。それも地図は県庁を指したままで、店舗の位置情報を教えてくれません。
large_areaを入れてもlatとlngがパラメータにあると、latとlngの方を優先するみたいでlarge_areaの時よりも県全体の店舗情報が少なく表示されます。ある地点からの範囲内のお店の検索を行う場合の範囲を表すrangeを使っても、以前より検索する範囲が広くなりましたが県全体の店舗を網羅することができませんでした。
緯度・経度の測地系を指定できますdatumを入れても同じでした。

僕がしたいのはlat lng でlarge_areaを使った時と同じくらいの県全体の店舗情報を取得し、なおかつ地図に各店舗の位置情報を表示させることです。
また、余談ですが一つの地図に表示するのではなく、ホットペーパーapiのレスポンスフィールドである各店舗情報が入ったtableの中に地図を表示させたいんです。

このサイトを参考にしていますが、どうやらidが関係しているみたいですが・・・

<div id="map" data-lat="<?= h($restaurants->shop->lat); ?>" data-lng="<?= h($restaurants->shop->lng); ?>">

                    </div>
if(!$xml->shop){
            echo 'WE can not find';
        } else { 
            foreach($xml->shop as $r){
      echo '<table>';    
      echo '<tr>';
   echo '<td>';
   echo $r->name;
   echo '</td>';
      echo '</tr>';
   echo '<tr>';
  echo '<td>';
echo <<<EOM<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: <?= $lat ?>, lng: <?= $lng ?>},                 
                map: mapObj 
            }); 
        }); 
    </script> 

EOM;

echo '</td>';
  echo '</tr>';
echo '</table>';
?>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • 退会済みユーザー

    2016/10/11 01:22

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 1

+6

ホットペッパーAPIサンプル

イメージ説明


<?php
/**
 * index.php
 *
 * @since 2016/08/06
 */
require_once './Hpepper.class.php';

/**
 * エスケープ
 * @param string $string
 * @return string
 */
function h($string)
{
    return htmlspecialchars($string, ENT_QUOTES, 'utf-8');
}

// 料理カテゴリ
$food_category = Hpepper::getFoodCategory();

// 予算
$budget = Hpepper::getBudget();

// クレジットカード
$credit_card = Hpepper::getCreditCard();

// 大サービスエリア
$large_service_area = Hpepper::getLargeServiceArea();

// サービスエリア
$service_area = Hpepper::getServiceArea();

// レストラン検索
$restaurants = Hpepper::getRestaurants();
?>
<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>ホットペッパーAPIテスト(アホでも設置するだけで動く)</title>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <style type="text/css">
            .map {
                height: 300px;
            }
            .shop {
                margin-bottom: 2em;
            }
            .shop > div {
                border: 1px solid #CCC;
                padding: 1em;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>ホットペッパーAPIサンプル</h1>

            <form method="get">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="food_category">料理カテゴリ</label>
                            <select class="form-control" name="food" id="food_category">
                                <option value="">料理カテゴリ</option>
                                <?php foreach ($food_category->food_category as $food_category) : ?>
                                    <?php if ($food_category->code == filter_input(INPUT_GET, 'food')): ?>
                                        <option value="<?= h($food_category->code); ?>" selected="selected">
                                            <?= h($food_category->name); ?>
                                        </option>
                                    <?php else: ?>
                                        <option value="<?= h($food_category->code); ?>">
                                            <?= h($food_category->name); ?>
                                        </option>
                                    <?php endif; ?>
                                <?php endforeach; ?>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="budget">予算</label>
                            <select class="form-control" name="budget" id="service_area">
                                <option value="">予算</option>
                                <?php foreach ($budget->budget as $budget) : ?>
                                    <?php if ($budget->code == filter_input(INPUT_GET, 'budget')): ?>
                                        <option value="<?= h($budget->code); ?>" selected="selected">
                                            <?= h($budget->name); ?>
                                        </option>
                                    <?php else: ?>
                                        <option value="<?= h($budget->code); ?>">
                                            <?= h($budget->name); ?>
                                        </option>
                                    <?php endif; ?>
                                <?php endforeach; ?>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="credit_card">クレジットカード</label>
                            <select class="form-control" name="credit_card" id="credit_card">
                                <option value="">クレジットカード</option>
                                <?php foreach ($credit_card->credit_card as $credit_card) : ?>
                                    <?php if ($credit_card->code == filter_input(INPUT_GET, 'credit_card')): ?>
                                        <option value="<?= h($credit_card->code); ?>" selected="selected">
                                            <?= h($credit_card->name); ?>
                                        </option>
                                    <?php else: ?>
                                        <option value="<?= h($credit_card->code); ?>">
                                            <?= h($credit_card->name); ?>
                                        </option>
                                    <?php endif; ?>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="large_service_area">大サービスエリア</label>
                            <select class="form-control" name="large_service_area" id="large_service_area">
                                <option value="">大サービスエリア</option>
                                <?php foreach ($large_service_area->large_service_area as $large_service_area) : ?>
                                    <?php if ($large_service_area->code == filter_input(INPUT_GET, 'large_service_area')): ?>
                                        <option value="<?= h($large_service_area->code); ?>" selected="selected">
                                            <?= h($large_service_area->name); ?>
                                        </option>
                                    <?php else: ?>
                                        <option value="<?= h($large_service_area->code); ?>">
                                            <?= h($large_service_area->name); ?>
                                        </option>
                                    <?php endif; ?>
                                <?php endforeach; ?>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="service_area">サービスエリア</label>
                            <select class="form-control" name="service_area" id="service_area">
                                <option value="">サービスエリア</option>
                                <?php foreach ($service_area->service_area as $pref) : ?>
                                    <?php if ($pref->code == filter_input(INPUT_GET, 'service_area')): ?>
                                        <option value="<?= h($pref->code); ?>" selected="selected">
                                            <?= h($pref->name); ?>
                                        </option>
                                    <?php else: ?>
                                        <option value="<?= h($pref->code); ?>">
                                            <?= h($pref->name); ?>
                                        </option>
                                    <?php endif; ?>
                                <?php endforeach; ?>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="name_kana">店名 or ふりがな</label>
                            <input class="form-control" type="text" name="name_kana" id="name_kana" value="<?= h(filter_input(INPUT_GET, 'name_kana')); ?>" />
                        </div>

                        <div class="form-group">
                            <label for="keyword">フリーワード</label>
                            <input class="form-control" type="text" name="keyword" id="keyword" value="<?= h(filter_input(INPUT_GET, 'keyword')); ?>" />
                        </div>

                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary">検索</button>
                        </div>
                    </div>
                </div>
            </form>
            <?php if (is_object($restaurants)): ?>

                <p>検索結果 <?= h(number_format((int) $restaurants->results_available)); ?></p>

                <?php if (isset($restaurants->error)): ?>

                    <div>
                        <?php foreach ($restaurants->error as $err) : ?>
                            <h2><?= $err->code; ?></h2>
                            <p><?= $err->message; ?></p>
                        <?php endforeach; ?>
                    </div>

                <?php else: ?>

                    <?php $i = 0; ?>
                    <?php foreach ($restaurants->shop as $rest) : ?>
                        <?php if ($i % 2 == 0): ?>
                            <div class="row">
                            <?php endif; ?>
                            <div class="col-md-6 shop">
                                <div>
                                    <dl>
                                        <dt>ID</dt>
                                        <dd><?= h($rest->id); ?></dd>

                                        <dt>店名</dt>
                                        <dd><?= h($rest->name); ?></dd>

                                        <dt>ジャンル</dt>
                                        <dd><?= h($rest->genre->name); ?></dd>

                                        <dt>所在地</dt>
                                        <dd><?= h($rest->address); ?></dd>
                                    </dl>
                                    <div class="map" data-lat="<?= h($rest->lat); ?>" data-lng="<?= h($rest->lng); ?>">
                                    </div>
                                </div>
                            </div>
                            <?php if ($i % 2 == 1 || count($restaurants->shop) - 1 == $i): ?>
                            </div>
                        <?php endif; ?>
                        <?php $i++; ?>

                    <?php endforeach; ?>

                    <div class="row">
                        <div class="col-md-12">
                            <ul class="pagination pagination-sm no-margin">
                                <?= Hpepper::pagination($restaurants->results_available); ?>
                            </ul>
                        </div>
                    </div>

                <?php endif; ?>
            <?php endif; ?>

        </div>

        <script type="text/javascript" src="//www.google.com/jsapi"></script>
        <script type="text/javascript">
            var map;
            function initMap() {
                var maps = document.getElementsByClassName('map');

                for (var i = 0; i < maps.length; i++) {

                    var latlng = {
                        lat: parseFloat(maps[i].getAttribute('data-lat'))
                        , lng: parseFloat(maps[i].getAttribute('data-lng'))
                    };

                    map = new google.maps.Map(maps[i], {
                        center: latlng,
                        scrollwheel: false,
                        zoom: 16
                    });
                    new google.maps.Marker({
                        position: latlng,
                        map: map
                    });
                }

            }
        </script>
        <script src="//maps.googleapis.com/maps/api/js?key=API_MEY&callback=initMap&language=ja"></script>
    </body>
</html>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/10/11 17:12

    どうやって、google map apiから値を取得するのですか?

    キャンセル

  • 2016/10/11 17:13

    var maps = document.getElementsByClassName('map');

    キャンセル

  • 2016/10/11 17:19

    var mapObj = new google.maps.Map(document.getElementById('gmap');

    var maps = document.getElementsByClassName('map');
    に変えるのですか。

    キャンセル

  • 2016/10/11 17:21

    何言ってるんだ?全部書き直さなきゃ動かん。

    キャンセル

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

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