GoogleMap で気象庁の地震マップを表示します。
こんな感じに表示されます。
地震情報はこちらから取得できます。
気象庁HPリニューアルに伴って、地震情報リストがjsonで取れるようになってる
おそらく非公式ですので、あまり負荷をかけず、また商用利用は控えたほうが良いでしょう。
また、地図を表示するのに GoogleMap の API のキーの取得が必要になります。
【WEB制作の基本】Google Map APIの取得から地図の表示、エラーの解消方法まで解説 | 新宿のホームページ制作会社 ITTI（イッティ）
ソースコードのAPI_KEY_ID_XXXXXXXXXXXの部分を取得したAPIコードへと書き換えを行います。
また、jsonファイルの存在場所も適宜変更します。
マップのソースコード
map.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
#map{
height: 100vh;
}
html, body {
height : 100%;
margin : 0;
padding : 0;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-7">
<div id="map"></div>
</div>
<div class="col-5">
<table id="resultTable" class="table table-bordered table-sm">
<thead>
<tr class="text-center table-secondary">
<th>地域名</th>
<th>時間</th>
<th>緯度経度</th>
<th>震度</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<script>
function initMap() {
$.ajax({
url : "http://localhost/json.php",
type : "get",
dataType : "json",
timespan : 1000
}).done(function(json,textStatus,jqXHR) {
var map = new google.maps.Map(document.getElementById('map'), {
zoom : 5,
center : {lat: 35.6575136, lng: 139.7411599},
mapTypeId : 'terrain'
});
console.log( json );
var resultTable = $("#resultTable tbody");
var resultHtml = "";
var col_arr = [
//'acd',
'anm',
'at',
'cod',
//'ctt',
//'eid',
//'en_anm',
//'en_ttl',
//'ift',
//'int',
//'json',
//'mag',
'maxi',
//'rdt',
//'ser',
//'ttl',
];
var len = json.length;
for( var i = 0 ; i < len ; i++ ){
//
resultHtml += "<tr>";
$.each( col_arr , function( index , col ){
resultHtml += "<td class=text-center>";
resultHtml += json[ i ][ col ];
resultHtml += "</td>";
});
resultHtml += "</tr>";
//
var latlng_org = json[ i ].cod;
// check length
if( latlng_org.split("-").length === 1 ){
continue;
}
var latlng_arr = latlng_org.split("-")[0].split("+");
// check length
if( latlng_arr.length === 1 ){
continue;
}
// create circle center point
var latlng = new google.maps.LatLng( latlng_arr[1] , latlng_arr[2] );
// create circle radius from maxi
var radius = 10000 * json[ i ].maxi
// create circle into map
new google.maps.Circle({
map : map ,
center : latlng ,
radius : radius ,
strokeColor : '#FF0000' ,
strokeOpacity : 0.8 ,
strokeWeight : 1 ,
fillColor : '#FF0000' ,
fillOpacity : 0.30 ,
});
}
//
resultTable.append(resultHtml);
}).fail(function(jqXHR, textStatus, errorThrown ) {
}).always(function(){
});
}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script async defer src="//maps.googleapis.com/maps/api/js?key=API_KEY_ID_XXXXXXXXXXX=initMap"></script>
</body>
</html>
おそらく json は javascript から直接読み取れないと思うので、下記のような php ファイルで読み取り出力します。
json.php
<?php
$url = "https://www.jma.go.jp/bosai/quake/data/list.json";
header("Content-Type: application/json; charset=utf-8");
echo file_get_contents( $url );
毎回読み込むのもサーバーに負荷をかけるのでタイムスタンプなどでキャッシュから表示するなどしても良いでしょう。
夜に地震があると結構次の日やる気が奪われるのでSAN値予報など面白いかと思います。