<tr><td> <? h($rest->name) ?> </td></tr> <tr><td> <?= h($rest->genre->catch) ?> </td></tr> </table> </body>```html <html> <body> <table border="1">
<table border="1"><tr><td>くいものや チャカ 津田沼店</td></tr><tr class="map"><td>140.022590803335.6900228211</td></tr><tr><td>千葉県習志野市津田沼1-3-11 昭和第3ビル2F</td></tr></table> <!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?key=My Key&sensor=false"></script> <script type="text/javascript"> var gmap; google.maps.event.addDomListener(window, 'load', function() { var lat =35.60472; var lng =140.12333 ;※htmlを表示中!! 要素の詳細を表示でhtmlを出力しました。
</head> <body> <div id="gmap" style="width: 500px; height: 370px; border: 1px solid Gray;"> </div> </body> </html> ```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.getElementsByClassName('gmap'), mapOptions); var marker = new google.maps.Marker({ position: {lat:35.60472, lng: 140.12333}, map: mapObj }); }); </script>
html
1var gmap; 2 google.maps.event.addDomListener(window, 'load', function() 3 { 4 var lat =35.60472; 5 var lng =140.12333 ; 6 7 8 var latlng = new google.maps.LatLng(lat, lng); 9 var mapOptions = { 10 zoom: 12, 11 center: latlng, 12 mapTypeId: google.maps.MapTypeId.ROADMAP, 13 scaleControl: true 14 }; 15 var mapObj = new google.maps.Map(document.getElementsByClassName('gmap'), mapOptions); 16 17 var marker = new google.maps.Marker({ 18 position: {lat:35.60472, lng: 140.12333}, 19 map: mapObj 20 }); 21 }); 22 23 24
ホットペーパーapiから千葉県にある10件の店舗を取得しました。その10件分の店舗にgoogle map apiの地図を表示するため(つまりマッシュアップです)、色々と調べました。
mapにclassを与え、getElementsByClassNameを使えば複数配置できることを知りました。
一応mapにクラスを与え(mapというクラスを使い複数配置するため)、getElementsByIdからgetElementsByClassName(getElementByIdだと地図が一つしか表示されないため)に変えました。
しかし、地図は表示されません。
ループを使わないと地図を複数表示できないという話を聞きましたが、ループを使わないと表示できないのですか?
一応ループを使いましたが、結果は同じく表示されません。
javascript
1var i = 0; 2 i++ 3///example
何を補足すれば地図が表示されますか?
<?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 $r){ echo '<table border="1">'; echo '<tr>'; echo '<td>'; echo $r->name; echo '</td>'; echo '</tr>'; echo '<tr class="map">'; echo '<td>'; echo $r->lng; echo $r->lat; echo '</td>'; echo '</tr>'; echo '<tr>'; echo '<td>'; echo $r->address; echo '</td>'; echo '</tr>'; echo '</table>'; ?> <!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?key=mykey&sensor=false"></script> <script type="text/javascript"> var gmap; 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.getElementsByClassName('gmap'), mapOptions); var marker = new google.maps.Marker({ position: {lat : 35.60472, lng : 140.12333} , map: mapObj }); }); </script> </head> <body> <div id="gmap" style="width: 500px; height: 370px; border: 1px solid Gray;"> </div> </body> </html> <?php } } ?>
回答2件
あなたの回答
tips
プレビュー