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

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

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

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

HTML

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

API

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

Q&A

1回答

3585閲覧

ホットペーパー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/10 05:20

編集2022/01/12 10:55

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

php

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

そしてgoogle map apiを

javascript

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

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

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

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

php

1<div id="map" data-lat="<?= h($restaurants->shop->lat); ?>" data-lng="<?= h($restaurants->shop->lng); ?>"> 2 3 </div> 4
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>'; ?>

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

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

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

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

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

guest

回答1

0

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

イメージ説明


php

1<?php 2/** 3 * index.php 4 * 5 * @since 2016/08/06 6 */ 7require_once './Hpepper.class.php'; 8 9/** 10 * エスケープ 11 * @param string $string 12 * @return string 13 */ 14function h($string) 15{ 16 return htmlspecialchars($string, ENT_QUOTES, 'utf-8'); 17} 18 19// 料理カテゴリ 20$food_category = Hpepper::getFoodCategory(); 21 22// 予算 23$budget = Hpepper::getBudget(); 24 25// クレジットカード 26$credit_card = Hpepper::getCreditCard(); 27 28// 大サービスエリア 29$large_service_area = Hpepper::getLargeServiceArea(); 30 31// サービスエリア 32$service_area = Hpepper::getServiceArea(); 33 34// レストラン検索 35$restaurants = Hpepper::getRestaurants(); 36?> 37<!DOCTYPE HTML> 38<html lang="ja"> 39 <head> 40 <meta charset="UTF-8"> 41 <title>ホットペッパーAPIテスト(アホでも設置するだけで動く)</title> 42 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 43 <style type="text/css"> 44 .map { 45 height: 300px; 46 } 47 .shop { 48 margin-bottom: 2em; 49 } 50 .shop > div { 51 border: 1px solid #CCC; 52 padding: 1em; 53 } 54 </style> 55 </head> 56 <body> 57 <div class="container"> 58 <h1>ホットペッパーAPIサンプル</h1> 59 60 <form method="get"> 61 <div class="row"> 62 <div class="col-md-4"> 63 <div class="form-group"> 64 <label for="food_category">料理カテゴリ</label> 65 <select class="form-control" name="food" id="food_category"> 66 <option value="">料理カテゴリ</option> 67 <?php foreach ($food_category->food_category as $food_category) : ?> 68 <?php if ($food_category->code == filter_input(INPUT_GET, 'food')): ?> 69 <option value="<?= h($food_category->code); ?>" selected="selected"> 70 <?= h($food_category->name); ?> 71 </option> 72 <?php else: ?> 73 <option value="<?= h($food_category->code); ?>"> 74 <?= h($food_category->name); ?> 75 </option> 76 <?php endif; ?> 77 <?php endforeach; ?> 78 </select> 79 </div> 80 81 <div class="form-group"> 82 <label for="budget">予算</label> 83 <select class="form-control" name="budget" id="service_area"> 84 <option value="">予算</option> 85 <?php foreach ($budget->budget as $budget) : ?> 86 <?php if ($budget->code == filter_input(INPUT_GET, 'budget')): ?> 87 <option value="<?= h($budget->code); ?>" selected="selected"> 88 <?= h($budget->name); ?> 89 </option> 90 <?php else: ?> 91 <option value="<?= h($budget->code); ?>"> 92 <?= h($budget->name); ?> 93 </option> 94 <?php endif; ?> 95 <?php endforeach; ?> 96 </select> 97 </div> 98 99 <div class="form-group"> 100 <label for="credit_card">クレジットカード</label> 101 <select class="form-control" name="credit_card" id="credit_card"> 102 <option value="">クレジットカード</option> 103 <?php foreach ($credit_card->credit_card as $credit_card) : ?> 104 <?php if ($credit_card->code == filter_input(INPUT_GET, 'credit_card')): ?> 105 <option value="<?= h($credit_card->code); ?>" selected="selected"> 106 <?= h($credit_card->name); ?> 107 </option> 108 <?php else: ?> 109 <option value="<?= h($credit_card->code); ?>"> 110 <?= h($credit_card->name); ?> 111 </option> 112 <?php endif; ?> 113 <?php endforeach; ?> 114 </select> 115 </div> 116 </div> 117 118 <div class="col-md-4"> 119 <div class="form-group"> 120 <label for="large_service_area">大サービスエリア</label> 121 <select class="form-control" name="large_service_area" id="large_service_area"> 122 <option value="">大サービスエリア</option> 123 <?php foreach ($large_service_area->large_service_area as $large_service_area) : ?> 124 <?php if ($large_service_area->code == filter_input(INPUT_GET, 'large_service_area')): ?> 125 <option value="<?= h($large_service_area->code); ?>" selected="selected"> 126 <?= h($large_service_area->name); ?> 127 </option> 128 <?php else: ?> 129 <option value="<?= h($large_service_area->code); ?>"> 130 <?= h($large_service_area->name); ?> 131 </option> 132 <?php endif; ?> 133 <?php endforeach; ?> 134 </select> 135 </div> 136 137 <div class="form-group"> 138 <label for="service_area">サービスエリア</label> 139 <select class="form-control" name="service_area" id="service_area"> 140 <option value="">サービスエリア</option> 141 <?php foreach ($service_area->service_area as $pref) : ?> 142 <?php if ($pref->code == filter_input(INPUT_GET, 'service_area')): ?> 143 <option value="<?= h($pref->code); ?>" selected="selected"> 144 <?= h($pref->name); ?> 145 </option> 146 <?php else: ?> 147 <option value="<?= h($pref->code); ?>"> 148 <?= h($pref->name); ?> 149 </option> 150 <?php endif; ?> 151 <?php endforeach; ?> 152 </select> 153 </div> 154 </div> 155 156 <div class="col-md-4"> 157 <div class="form-group"> 158 <label for="name_kana">店名 or ふりがな</label> 159 <input class="form-control" type="text" name="name_kana" id="name_kana" value="<?= h(filter_input(INPUT_GET, 'name_kana')); ?>" /> 160 </div> 161 162 <div class="form-group"> 163 <label for="keyword">フリーワード</label> 164 <input class="form-control" type="text" name="keyword" id="keyword" value="<?= h(filter_input(INPUT_GET, 'keyword')); ?>" /> 165 </div> 166 167 </div> 168 </div> 169 170 <div class="row"> 171 <div class="col-md-12"> 172 <div class="form-group"> 173 <button type="submit" class="btn btn-primary">検索</button> 174 </div> 175 </div> 176 </div> 177 </form> 178 <?php if (is_object($restaurants)): ?> 179 180 <p>検索結果 <?= h(number_format((int) $restaurants->results_available)); ?></p> 181 182 <?php if (isset($restaurants->error)): ?> 183 184 <div> 185 <?php foreach ($restaurants->error as $err) : ?> 186 <h2><?= $err->code; ?></h2> 187 <p><?= $err->message; ?></p> 188 <?php endforeach; ?> 189 </div> 190 191 <?php else: ?> 192 193 <?php $i = 0; ?> 194 <?php foreach ($restaurants->shop as $rest) : ?> 195 <?php if ($i % 2 == 0): ?> 196 <div class="row"> 197 <?php endif; ?> 198 <div class="col-md-6 shop"> 199 <div> 200 <dl> 201 <dt>ID</dt> 202 <dd><?= h($rest->id); ?></dd> 203 204 <dt>店名</dt> 205 <dd><?= h($rest->name); ?></dd> 206 207 <dt>ジャンル</dt> 208 <dd><?= h($rest->genre->name); ?></dd> 209 210 <dt>所在地</dt> 211 <dd><?= h($rest->address); ?></dd> 212 </dl> 213 <div class="map" data-lat="<?= h($rest->lat); ?>" data-lng="<?= h($rest->lng); ?>"> 214 </div> 215 </div> 216 </div> 217 <?php if ($i % 2 == 1 || count($restaurants->shop) - 1 == $i): ?> 218 </div> 219 <?php endif; ?> 220 <?php $i++; ?> 221 222 <?php endforeach; ?> 223 224 <div class="row"> 225 <div class="col-md-12"> 226 <ul class="pagination pagination-sm no-margin"> 227 <?= Hpepper::pagination($restaurants->results_available); ?> 228 </ul> 229 </div> 230 </div> 231 232 <?php endif; ?> 233 <?php endif; ?> 234 235 </div> 236 237 <script type="text/javascript" src="//www.google.com/jsapi"></script> 238 <script type="text/javascript"> 239 var map; 240 function initMap() { 241 var maps = document.getElementsByClassName('map'); 242 243 for (var i = 0; i < maps.length; i++) { 244 245 var latlng = { 246 lat: parseFloat(maps[i].getAttribute('data-lat')) 247 , lng: parseFloat(maps[i].getAttribute('data-lng')) 248 }; 249 250 map = new google.maps.Map(maps[i], { 251 center: latlng, 252 scrollwheel: false, 253 zoom: 16 254 }); 255 new google.maps.Marker({ 256 position: latlng, 257 map: map 258 }); 259 } 260 261 } 262 </script> 263 <script src="//maps.googleapis.com/maps/api/js?key=API_MEY&callback=initMap&language=ja"></script> 264 </body> 265</html> 266

投稿2016/10/10 09:48

編集2016/10/11 08:02
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

aba623ky

2016/10/11 08:12

どうやって、google map apiから値を取得するのですか?
退会済みユーザー

退会済みユーザー

2016/10/11 08:13

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

2016/10/11 08:19

var mapObj = new google.maps.Map(document.getElementById('gmap'); を var maps = document.getElementsByClassName('map'); に変えるのですか。
退会済みユーザー

退会済みユーザー

2016/10/11 08:21

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問