google map apiの地図を表示させる方法

http://qiita.com/ShibuyaKosuke/items/452928e235d4b1d10475
このサイトを参考に各店舗の地図を表示させようと思います。
最初はホットペーパー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・・・
11・・・
12・・・
13
14<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
15<html> 
16<head> 
17    <title>Google Maps V3</title> 
18    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
19    <script type="text/javascript" src="http://maps.google.com/maps/api/js?&sensor=false"></script> 
20    <script type="text/javascript"> 
21        google.maps.event.addDomListener(window, 'load', function() 
22        { 
23            var lat =35.60472;
24            var lng =140.12333;
25            var latlng = new google.maps.LatLng(lat, lng); 
26            var mapOptions = { 
27                zoom: 12, 
28                center: latlng, 
29                mapTypeId: google.maps.MapTypeId.ROADMAP, 
30                scaleControl: true 
31            }; 
32            var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); 
33
34            var marker = new google.maps.Marker({ 
35                position: {lat: <?= $lat ?>, lng: <?= $lng ?>},                 
36                map: mapObj 
37            }); 
38        }); 
39    </script> 
40</head> 
41<body> 
42    <div id="gmap" style="width: 500px; height: 370px; border: 1px solid Gray;"> 
43    </div> 
44</body> 
45</html>

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

このサイトを調べると、ホットペーパーapiのパラメータにはlat lngが書いてありません。google map apiの方に緯度経度が書いてあります。
つまり、google map apiで緯度経度を設定しそれをホットペーパーapiのレスポンスフィールドに渡すみたいです。
※参考のコード

javascript
1<div id="map" data-lat="<?= h($restaurants->shop->lat); ?>" data-lng="<?= h($restaurants->shop->lng); ?>">
2
3                    </div>
4
5

真似て作成しましたが※idはgoogle map apiがmapのため、ホットペーパーapiの方もgmapにしました。

html
1<tr id="gmap" lat="<?= $lat ?>" lng="<?= $lng ?>">
2  <th>
3    id
4    </th>       
5   <td>
6   $r->id;
7   </td>
8   </tr>

ただ、地図が表示されるだけでした笑
それにホットペーパーapiのlatとlngを削除すると地図自体が表示されなくなります。
どうやったら店舗の位置が表示できるのですか？
わからなくなってしまいました。
まとめます。
・latとlngをパラメータに設定すると、ヒットする情報が少なくなる。
・rangeを設定すると、ヒットする件数が増えるが、large_areaと比べると断然少ない
・パラメータからlatとlngを消すと、地図自体が表示されない（店舗自体が緯度経度を持っているため、latとlngをパラメータから消した）
・そして、地図を表示できても、緯度経度に設定した周りの店舗しか表示されない

補足:レスポンスフィールドを調べると、緯度経度が書かれています。つまり、各店舗の緯度経度になります。しかし、これをどうgoogle map apiに渡せばいいのかわかりません。

行動規範の内容に同意します

回答2件

ベストアンサー

説明がよくわかりませんが、やりたいこととしては以下の２つかと思います。

ホットペッパーapiを使って、表示したい店舗の情報を取得
取得した店舗情報を元にgoogle.map.apiでマップを表示する

問題としては、1.で表示したい店舗を取得できていないことではないですか？

ホットペッパーapiを見ると、以下のようです。
lat, lng, rangeで指定すると、「地点を指定して、その範囲にあるお店をオススメ順に取得」
large_areaで「z011」を指定すると「大エリアコード=Z011(東京)のお店を検索」

なので、（千葉）の大エリアコードがわかれば、期待する店舗が取得できるのではないですか？
大サービスエリアマスタAPIを使って、千葉の大エリアコードを確認してみてください。

店舗が取得できれば、店舗ごとにMarkerを作成して、mapを表示させれば期待通りの結果ではないでしょうか。

投稿2016/10/10 10:58

退会済みユーザー

総合スコア0

aba623ky

2016/10/10 12:24

パラメータで緯度経度を求めると、その緯度経度の周りしか表示できません。それなのでレスポンスフィールドで緯度経度を求めたのですが、その値渡しが分からないんです。

aba623ky

2016/10/10 12:26

レスポンスフィールドで緯度経度を求めることができます。実際実行したら各店舗の緯度経度を表示することができました。しかし、その各店舗の緯度経度を地図に表示する方法が分かりません。

aba623ky

2016/10/10 12:27

>店舗が取得できれば、店舗ごとにMarkerを作成して、mapを表示させれば期待通りの結果ではないでしょうか。そのmarkerを作成する方法が分からないんです。

行動規範の内容に同意します

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

http://qiita.com/ShibuyaKosuke/items/452928e235d4b1d10475
参照しているサイトによると, この箇所かと思います。
店舗のlat, lngをpositionに入れて、markerを作成しています。
bounds.extend(), map.fitBounds()などは追加したmarkerを全て表示できるようにmapを調整しています。

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

あなたのコードだと上記箇所で行っているとかと思います。
マップが表示されているのであれば、画面中央にMarkerが表示されているのではないですか？
同じ作業を店舗数ごとに行ってください。

わからなければ

php
1            var marker2 = new google.maps.Marker({ 
2                position: {lat: '35.60000', lng: '140.12000'},                 
3                map: mapObj 
4            });

を追加してみると、markerが１つ増えるかと思います。

投稿2016/10/10 13:25

退会済みユーザー

総合スコア0

aba623ky

2016/10/10 14:16

わからなければのところが分からないのですが笑つまり、手作業で入れろという意味ですか？

aba623ky

2016/10/10 14:18

>あなたのコードだと上記箇所で行っているとかと思います。マップが表示されているのであれば、画面中央にMarkerが表示されているのではないですか？同じ作業を店舗数ごとに行ってください。ここの箇所ですが、mapの中心地に表れるのは県庁です。店舗ではありません。また、同じ作業を店舗ごとに行うってどういう意味ですか？

aba623ky

2016/10/10 14:23

var marker = new google.maps.Marker({ position: {lat: <?= $lat ?>, lng: <?= $lng ?>}, の所をレスポンスフィールドのlatとlngを使って(レスポンスフィールドだと、緯度経度を表すのに$rest->$lat、$rest->$lngというふうに表します) var marker = new google.maps.Marker({ position: {lat: <?= $rest->$lat ?>, lng: <?= $rest->$lng ?>}, とするのですか？

aba623ky

2016/10/12 01:51

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

aba623ky

2016/10/12 01:52

つまり、地図に緯度経度が上手く渡っていないみたいです。

行動規範の内容に同意します

あなたの回答