埼玉のテーブルはまだ作っていませんが、暫定として、
<style> #map { height: 250px; width: 100%; font-size:small; margin-bottom:10px; } </style> <?php $this->assign('title', '首都圏の天気予報'); ?> <?= $this->element('module'); ?> <h1>首都圏の今日明日の天気予報</h1> <div id="map"></div> <b><a href="marunouchis">東京</a></b> <table class="table1"> <tr> <?php $i = 1; foreach ($marunouchis as $marunouchi){ if($i < 9){ echo "<td width=\"150px\">"; echo h($marunouchi->forecast)."<br>"; $date = h($marunouchi->forecast); $result = substr($date, -8); if($result == ' 9:00 PM' or $result == '12:00 AM' or $result == ' 3:00 AM'){ echo convert3(($marunouchi->main))."<br>"; } else { echo convert(($marunouchi->main))."<br>"; } echo convert2(($marunouchi->description))."<br>"; echo "気温".h($marunouchi->temp)."°C<br>"; echo "湿度". h($marunouchi->humidity)."%<br>"; echo "雲の量".h($marunouchi->cloud)."<br>"; echo "風速".h($marunouchi->speed)."m<br>"; echo "<td>"; if($result == '12:00 PM'){ $mmain = json_encode(h($marunouchi->main)); } } $i++; } ?> </tr> </table> <b><a href="yokohamas">横浜</a></b> <table class="table1"> <tr> <?php $i = 1; foreach ($yokohamas as $yokohama){ if($i < 9){ echo "<td width=\"150px\">"; echo h($yokohama->forecast)."<br>"; $date = h($yokohama->forecast); $result = substr($date, -8); if($result == ' 9:00 PM' or $result == '12:00 AM' or $result == ' 3:00 AM'){ $value = convert3(($yokohama->main))."<br>"; } else { $value = convert(($yokohama->main))."<br>"; } echo $value; echo convert2(($yokohama->description))."<br>"; echo "気温".h($yokohama->temp)."°C<br>"; echo "湿度". h($yokohama->humidity)."%<br>"; echo "雲の量".h($yokohama->cloud)."<br>"; echo "風速".h($yokohama->speed)."m<br>"; echo "<td>"; if($result == '12:00 PM'){ $ymain = json_encode(h($yokohama->main)); } } $i++; } ?> </tr> </table> <script> var mmain = JSON.parse('<?php echo $mmain; ?>'); if(mmain =='Clear'){ var micon = '/img/icon05.png' }else if(ymain =='Clouds'){ var micon = '/img/icon06.png' } else{ var micon = '/img/icon07.png' } var ymain = JSON.parse('<?php echo $ymain; ?>'); if(ymain =='Clear'){ var yicon = '/img/icon05.png' }else if(ymain =='Clouds'){ var yicon = '/img/icon06.png' } else{ var yicon = '/img/icon07.png' } var map; var marker = []; var infoWindow = []; var markerData = [ { name: '東京', lat: 35.681167, lng: 139.767052, icon: micon }, { name: '横浜', lat: 35.469716, lng: 139.629184, icon: yicon }, { name: '埼玉', lat: 35.861729, lng: 139.645482, icon: '/img/icon06.png' } ]; function initMap() { var mapLatLng = new google.maps.LatLng({lat: 35.681167, lng: 139.767052}); map = new google.maps.Map(document.getElementById('map'), { center: mapLatLng, zoom: 9 }); // マーカー毎の処理 for (var i = 0; i < markerData.length; i++) { markerLatLng = new google.maps.LatLng({lat: markerData[i]['lat'], lng: markerData[i]['lng']}); marker[i] = new google.maps.Marker({ position: markerLatLng, map: map }); infoWindow[i] = new google.maps.InfoWindow({ content: '<div class="map">' + markerData[i]['name'] + '</div>' }); markerEvent(i); } for (var i = 0; i < markerData.length; i++) { marker[i].setOptions({ icon: { url: markerData[i]['icon'] } }); } } function markerEvent(i) { marker[i].addListener('click', function() { infoWindow[i].open(map, marker[i]); }); } </script> <script async defer src = "https:maps.googleapis.com/maps/api/js?key=not watch&callback=initMap"> </script>
大分できてきました。
あとは全国の天気ですね。