コードを全文提示します。
写真のようになりました。
このように書きました。
<?php $key='My key'; $count='10'; $large_area='Z014'; $start =1; $format='xml'; $url='http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key='.$key.'&count='.$count.'&large_area='.$large_area.'&start='.$start.'&format='.$format; $xml=simplexml_load_file($url); $total_count=$xml->results_available; if(!$xml->shop){ echo 'We can not find!!'; } else { foreach($xml->shop as $rest){ echo '<table border="1">'; echo '<tr>'; echo '<td>'; echo $rest->name; echo '</td>'; echo '</tr>'; echo '<tr class="map">'; echo '<td>'; echo $rest->lng; echo $rest->lat; echo '</td>'; echo '</tr>'; echo '<tr>'; echo '<td>'; echo $rest->address; echo '</td>'; echo '</tr>'; echo '</table>'; ?> ///下記のphpタグのコードは各店舗の緯度経度がちゃんと入っているか確認するものです。実際入っていました。 <?php echo $rest->lng; echo $rest->lat; ?> <!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:$rest->$lat, lng:$rest->$lng }, map: mapObj }); }); </script> </head> <body> <div id="gmap" style="width: 500px; height: 370px; border: 1px solid Gray;"> </div> </body> </html> <?php } } ?>
ホットペーパーapiのレスポンスフィールドの$latと$lng (緯度経度)をgoogle map apiにその値を渡し、地図に位置情報を表したいです。
php
1$rest->$lat; 2$rest->$lng;
としました。
http://qiita.com/ShibuyaKosuke/items/452928e235d4b1d10475
参照しているサイトによると,
php
1var bounds = new google.maps.LatLngBounds(); 2 3 for (var i = 0; i < shops.length; i++) { 4 var marker = new google.maps.Marker({ 5 position: { 6 lat: parseFloat(shops[i].getAttribute('data-lat')) 7 , lng: parseFloat(shops[i].getAttribute('data-lng')) 8 }, 9 map: map 10 }); 11 bounds.extend(marker.position); 12 } 13 map.fitBounds(bounds);
この部分がヒントになりそうです。
このコードを見ると、店舗のlat, lngをpositionに入れて、markerを作成しているため僕も見よう見まねで
php
1var marker = new google.maps.Marker({ 2 position: {lat: <?= $lat ?>, lng: <?= $lng ?>}, 3 map: mapObj 4 });
と作成しましたが、マップ自体が表示されません。
どうやればレスポンスフィールドで得た緯度経度をgooglemapapiのpositionに渡しmarkerを作成して地図を表示できるのかわかりません。
ご教授お願いします。
<!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.68944; var lng =139.69167 ; 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: <?= $r->$lat ?>, lng: <?= $r->$lng ?>}, map: mapObj }); }); </script>
回答4件
あなたの回答
tips
プレビュー