http://qiita.com/ShibuyaKosuke/items/452928e235d4b1d10475
このサイトを参考にし題名に書いてあることを実行したいのですが、わからないところがあります。
このサイトを見る限りlat lngをつかってマッシュアップを行うみたいですが、
どうやったら、この二つのapiのlat lngを結びつけることができるのですか?
二つのapiのlat lng を書けば表示されるという指摘を受けましたが、 二つのapiのコードを貼って、なおかつ二つのapiのlat lng を書いてもホットペーパーで取得する店舗とリンクせず、google map apiの地図は白紙のままです。
ホットペーパーapiとgoogle map apiのコードのlat lngを結びつけさせるにはどうすればいいですか?
僕が作りたいのは、ホットペーパーapiで店舗情報を取得し、その店舗情報にgoogle map apiから取得した地図を貼りたいのです。
ここの箇所が今回の質問のヒントになると思いますが、すみません、もしよかったらご教授お願いします。
宜しくお願い致します!!!
javascript
1<div id="map" data-lat="<?= h($restaurants->shop->lat); ?>" data-lng="<?= h($restaurants->shop->lng); ?>"> 2 3 </div>
※ここでは例として東京の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); 11if(!$xml->shop){ 12 echo 'FAIL'; 13 } else { 14 foreach($xml->shop as $r){ 15 echo '<tr>'; 16 echo '<td>'; 17 echo $r->name; 18 echo '</td>'; 19 echo '</tr>'; 20 echo '<tr>'; 21 echo '<td>'; 22 echo $r->genre->catch; 23 echo '</td>'; 24 echo '</tr>'; 25} 26?> 27///この下にgoogle map を挿入したいです。 28 29<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 30<html> 31<head> 32 <title>Google Maps V3</title> 33 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 34 <script type="text/javascript" src="http://maps.google.com/maps/api/js?&sensor=false"></script> 35 <script type="text/javascript"> 36 google.maps.event.addDomListener(window, 'load', function() 37 { 38 var lng =35.68944; 39 var lat =139.69167 ; 40 41 var latlng = new google.maps.LatLng(lat, lng); 42 var mapOptions = { 43 zoom: 12, 44 center: latlng, 45 mapTypeId: google.maps.MapTypeId.ROADMAP, 46 scaleControl: true 47 }; 48 var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); 49 50 var marker = new google.maps.Marker({ 51 position: {lat: 52 lng: }, 53 map: mapObj 54 }); 55 }); 56 </script> 57</head> 58<body> 59 <div id="gmap" style="width: 500px; height: 370px; border: 1px solid Gray;"> 60 </div> 61</body> 62</html>
回答1件
あなたの回答
tips
プレビュー