ホットペーパーapiとgoogle mapapiを連携したコードを作成中です。
一つ疑問に思ったのですが、下記のコードだと最初の一件の店舗の地図にしか表示されません。
それぞれjavascriptとphpで処理しているため、表示されないのかな?と思い、
table(phpで処理されている)の中にEOMをつかってgoogle map apiのコードを挿入したのですが、当然ながら表示されず、エラーが出ました。
ホットペーパーapiから10件の店舗を取得しましたが10件分の地図を表示するには何を補足すれば表示できますか?
php
1<td> 2echo <<<EOM<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyCrj6PkyYBkxnPmNpIm5lpYNPOdDwS76sc&sensor=false"></script> 3 <script type="text/javascript"> 4 google.maps.event.addDomListener(window, 'load', function() 5 { 6 var lat =35.60472; 7 var lng =140.12333 ; 8 9 10 var latlng = new google.maps.LatLng(lat, lng); 11 var mapOptions = { 12 zoom: 12, 13 center: latlng, 14 mapTypeId: google.maps.MapTypeId.ROADMAP, 15 scaleControl: true 16 }; 17 var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); 18 19 var marker = new google.maps.Marker({ 20 position: {lat:35.60472, lng: 140.12333 }, 21 map: mapObj 22 }); 23 }); 24 </script> 25 EOM; 26</td>
元のコード
php
1<?php 2$key='my key'; 3$count='10'; 4$large_area='Z014'; 5$start =1; 6$format='xml'; 7$url='http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key='.$key.'&count='.$count.'&large_area='.$large_area.'&start='.$start.'&format='.$format; 8$xml=simplexml_load_file($url); 9$total_count=$xml->results_available; 10if(!$xml->shop){ 11 echo 'We can not find!!'; 12 } else { 13 foreach($xml->shop as $rest){ 14echo '<table border="1">'; 15 echo '<tr>'; 16 echo '<td>'; 17 echo $rest->name; 18 echo '</td>'; 19 echo '</tr>'; 20 echo '<tr>'; 21 echo '<td>'; 22 echo $rest->lng; 23 echo $rest->lat; 24 echo '</td>'; 25 echo '</tr>'; 26 echo '<tr>'; 27 echo '<td>'; 28 echo $rest->address; 29 echo '</td>'; 30 echo '</tr>'; 31 echo '</table>'; 32 33 34 ?> 35 36<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 37<html> 38<head> 39 <title>Google Maps V3</title> 40 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 41 <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyCrj6PkyYBkxnPmNpIm5lpYNPOdDwS76sc&sensor=false"></script> 42 <script type="text/javascript"> 43 google.maps.event.addDomListener(window, 'load', function() 44 { 45 var lat =35.60472; 46 var lng =140.12333 ; 47 48 49 var latlng = new google.maps.LatLng(lat, lng); 50 var mapOptions = { 51 zoom: 12, 52 center: latlng, 53 mapTypeId: google.maps.MapTypeId.ROADMAP, 54 scaleControl: true 55 }; 56 var mapObj = new google.maps.Map(document.getElementById('gmap'), mapOptions); 57 58 var marker = new google.maps.Marker({ 59 position: {lat:35.60472, lng:140.12333?>}, 60 map: mapObj 61 }); 62 }); 63 </script> 64</head> 65<body> 66 <div id="gmap" style="width: 500px; height: 370px; border: 1px solid Gray;"> 67 </div> 68</body> 69</html> 70<?php 71 72 73 } } ?>
回答1件
あなたの回答
tips
プレビュー