石川県の観光」カテゴリーアーカイブ

オープンデータの情報をPHPでGooglemapに埋め込む

2019年2月24日

Googlemapにオープンデータの情報を入力して表示する為にPHPを利用できないかと頑張ってみました。
オープンデータの情報を取り出してPHPで処理して、下記に必要なデータを埋め込めば楽だと思ったのです。
せっかくPHPの勉強したんだから使わないと上達しません。

{
name: ‘<table><tr><td>金沢駅西口時計駐車場</td></tr><tr><td >24時間<br>収容台数:1500台</td></tr></table>’,
lat: 36.5806,
lng: 136.648722,
icon: ‘tam1.gif’ // 金沢駅西口時計駐車場のイメージpng
},
{
name: ‘<table><tr><td>金沢駅西広場一般車駐車場</td></tr><tr><td >24時間<br>収容台数:68台</td></tr></table>’,
lat: 36.57949,
lng: 136.647391,
icon: ‘tam2.gif’ // 金沢駅西広場一般車駐車場のイメージpng

},

{
name: ‘<table><tr><td>東山観光駐車場</td></tr><tr><td>午前7時~午後10時<br>収容台数:15台</td></tr></table>’,
lat: 36.573087,
lng: 136.665389,
icon: ‘tam3.gif’ // 東山観光駐車場jpg

}

金沢市の駐車場・駐輪場のオープンデータはCSV形式でID,地域,緯度,経度,ジャンル1,サブジャンル1,ジャンル2,サブジャンル2,ジャンル3,サブジャンル3,名称,概略(収納台数),郵便番号,住所,電話番号,FAX番号,E-mail,開館時間,休館日,料金,備考,リンクの項目があります。

そのまま使えるようなPHPプログラムにしても良いのですが、少しでも簡単にという事で、必要なデータだけ残すことにしました。
最初に駐輪場のデータを削除しました。
緯度,経度,名称,概略(収容台数),開館時間の4項目(列)だけ残して残りの項目を削除しました。
1行目の項目名も削除しました。
ファイル名をshisetsu_parkingre.csvにして、datafフォルダに入れました。
h.phpファイルをlibフォルダに入れました。

h.phpファイルの内容は

<?php
function h($var) // HTMLでのエスケープ処理をする関数
{
if (is_array($var)) {
return array_map(‘h’, $var);
} else {
return htmlspecialchars($var, ENT_QUOTES, ‘UTF-8’);
}
}
/* ?>終了タグ省略 ☆レシピ001☆(サーバーのPHP情報を知りたい) */

です。

オープンデータをGooglemap用に埋め込むプログラムはread_csv.phpです。

<?php
# h()関数☆レシピ221☆(安全にブラウザで値を表示したい)を読み込みます☆レシピ041☆(他のファイルを取り込んで利用したい)。
require_once ‘./lib/h.php’;

// CSVファイルはWindowsのExcelで作成したSJISエンコード
$csvFile = ‘./data/shisetsu_parkingre.csv’;
if (! file_exists($csvFile)) {
die(‘ファイルが存在しません。’);
}

// 文字化け対策
# CSVファイルの中身をすべて取り込みます。
$tempCSV = file_get_contents($csvFile);
# 文字エンコードをUTF-8に変換します☆レシピ058☆(文字エンコードを変換したい)。
$tempCSV = mb_convert_encoding($tempCSV, ‘UTF-8’, ‘CP932’);
# 一時ファイルに保存します。
$fp = tmpfile();
fwrite($fp, $tempCSV);
# ファイルポインタを先頭に戻します。
rewind($fp);
# ローケルを設定します。
setlocale(LC_ALL, ‘ja_JP.UTF-8’);

$file = ‘people.txt’;
$n=1;
while ($arr = fgetcsv($fp)) {
if (! array_diff($arr, array(”))) { // 空行を除外
continue;
}
list($lat, $lng, $name,$syuunou,$time) = $arr;
// nl2br()関数で要素内改行を<br>に変換
$person = ‘{name: \'<table><tr><td>’.nl2br(h($name), false) . ‘</td></tr><tr><td >’.nl2br(h($time), false) .'<br>’ . nl2br(h($syuunou), false) . ‘</td></tr></table>\’,’
.’lat:’ . nl2br(h($lat), false).’,’
.’lng: ‘. nl2br(h($lng), false) .’,’
. ‘icon: \’tam’.$n.’.gif\’ //’.nl2br(h($name), false) .’イメージgif’.”\n”.’},’.”\n”

;
file_put_contents($file, $person, FILE_APPEND | LOCK_EX);
$n=$n+1;
}

# ファイルのロックを解除します。
fflush($fp);
flock($fp, LOCK_UN);

# ファイルを閉じます。
fclose($fp);

?>

以上です。people.txtというファイルに出力されます。
一番最後のデータの }, は } に書き換えて埋め込みます。

埋め込みが完了したページは
https://kimassi.net/test/test5F.html
です。

ちなみに、概要のページtest5F.htmlのソースは下記の通りです。

<html>
<head>
<META charset=”UTF-8″>
<META name=”GENERATOR” content=”JustSystems Homepage Builder Version 21.0.5.0 for Windows”>
<STYLE>
<!–
.gyou{
line-height: 18pt ;
}
.gyou2{
line-height: 18pt ; padding-left:10pt ; padding-right:10pt;
}
.gyou3{
line-height: 18pt ; padding-left:10pt;
}
TABLE{
line-height: 18pt;
}
–>
</STYLE>
<STYLE>
<!–
body, th, td{
font-size: 95%;

// 600px以降から、100pxごとに1px大きくなる
@media (min-width: 600px) {
font-size: calc(112.5% + 4 * (100vw – 600px) / 400)
}

// 1,000px以上は、22pxに
@media (min-width: 1000px) {
font-size: calc(137.5%)
}
}

–>
</style>
<STYLE>
<!–
body,html{
max-width:800px;
margin-right: auto;
margin-left : auto;
}

–>
</style>

<style>
<!–
#map{

width: 100%;

height: 400px;

background-color: grey;

}

–>
</style>
<meta name=”viewport” content=”initial-scale=1.0″>
<title>金沢の駐車場GoogleMap </title>

</head>
<body>
<BR>
<center>
<TABLE>
<TBODY>
<TR>
<TD><A href=”https://kimassi.net/” target=”_top”><IMG src=”https://kimassi.net/kimassitoplogo.gif” alt=”金沢観光情報 【 きまっし金沢 】” width=”120″ border=”0″></A></TD>
<TD align=”left” valign=”middle”><H1 style=”font-size:18px; margin:0px;”><FONT color=”#cc0000″>金沢の駐車場 </FONT></h1></TD>
</TR>
</TBODY>
</TABLE>
<BR>
<TABLE>
<TBODY>
<TR>
<TD>
</TD>
</TR>
</TBODY>
</TABLE>
<BR>

<div id=”map”></div>
<script>
var map;
var marker = [];
var infoWindow = [];
var markerData = [ // マーカーを立てる場所名・緯度・経度
{name: ‘<table><tr><td>金沢駅西口時計駐車場</td></tr><tr><td >24時間<br>収容台数:1500台</td></tr></table>’,lat:36.5806,lng: 136.648722,icon: ‘tam1.gif’ //金沢駅西口時計駐車場イメージgif
},
{name: ‘<table><tr><td>金沢駅西広場一般車駐車場</td></tr><tr><td >24時間<br>収容台数:68台</td></tr></table>’,lat:36.57949,lng: 136.647391,icon: ‘tam2.gif’ //金沢駅西広場一般車駐車場イメージgif
},
{name: ‘<table><tr><td>金沢駅東駐車場</td></tr><tr><td >午前7時~午後11時<br>収容台数:352台</td></tr></table>’,lat:36.576206,lng: 136.648134,icon: ‘tam3.gif’ //金沢駅東駐車場イメージgif
},
{name: ‘<table><tr><td>ポルテ金沢駐車場</td></tr><tr><td >24時間<br>収容台数:450台</td></tr></table>’,lat:36.57634,lng: 136.649433,icon: ‘tam4.gif’ //ポルテ金沢駐車場イメージgif
},
{name: ‘<table><tr><td>リファーレ駐車場</td></tr><tr><td >午前7時~午後10時<br>収容台数:268台</td></tr></table>’,lat:36.575865,lng: 136.651441,icon: ‘tam5.gif’ //リファーレ駐車場イメージgif
},
{name: ‘<table><tr><td>武蔵地下駐車場</td></tr><tr><td >午前7時~午後11時<br>収容台数:194台</td></tr></table>’,lat:36.574211,lng: 136.654129,icon: ‘tam6.gif’ //武蔵地下駐車場イメージgif
},
{name: ‘<table><tr><td>石川県立音楽堂</td></tr><tr><td >午前9時~午後10時<br>収容台数:152台</td></tr></table>’,lat:36.57672,lng: 136.647841,icon: ‘tam7.gif’ //石川県立音楽堂イメージgif
},
{name: ‘<table><tr><td>金沢フォーラス駐車場</td></tr><tr><td >24時間<br>収容台数:420台</td></tr></table>’,lat:36.579348,lng: 136.649811,icon: ‘tam8.gif’ //金沢フォーラス駐車場イメージgif
},
{name: ‘<table><tr><td>名鉄スカイパーキング</td></tr><tr><td >午前6時~午後12時<br>収容台数:620台</td></tr></table>’,lat:36.572802,lng: 136.654387,icon: ‘tam9.gif’ //名鉄スカイパーキングイメージgif
},
{name: ‘<table><tr><td>近江町パーキングビル</td></tr><tr><td >午前8時00分~午後6時00分<br>収容台数:228台</td></tr></table>’,lat:36.570437,lng: 136.656682,icon: ‘tam10.gif’ //近江町パーキングビルイメージgif
},
{name: ‘<table><tr><td>めいてつ・エムザ地下駐車場</td></tr><tr><td >午前8時30分~午後8時30分<br>収容台数:60台</td></tr></table>’,lat:36.572674,lng: 136.654991,icon: ‘tam11.gif’ //めいてつ・エムザ地下駐車場イメージgif
},
{name: ‘<table><tr><td>近江町市場</td></tr><tr><td >建て替えのため閉鎖中<br>建て替えのため閉鎖中</td></tr></table>’,lat:36.571631,lng: 136.657648,icon: ‘tam12.gif’ //近江町市場イメージgif
},
{name: ‘<table><tr><td>近江町いちば館駐車場</td></tr><tr><td >午前7時30分~午後11時30分<br>収容台数:94台</td></tr></table>’,lat:36.571844,lng: 136.656398,icon: ‘tam13.gif’ //近江町いちば館駐車場イメージgif
},
{name: ‘<table><tr><td>石川県兼六駐車場</td></tr><tr><td >24時間<br>収容台数:482台</td></tr></table>’,lat:36.564888,lng: 136.664091,icon: ‘tam14.gif’ //石川県兼六駐車場イメージgif
},
{name: ‘<table><tr><td>兼見御亭パーキング</td></tr><tr><td >午前8時30分~午後5時30分<br>収容台数:100台</td></tr></table>’,lat:36.561714,lng: 136.665588,icon: ‘tam15.gif’ //兼見御亭パーキングイメージgif
},
{name: ‘<table><tr><td>石川県石引駐車場</td></tr><tr><td >24時間<br>収容台数:370台</td></tr></table>’,lat:36.557697,lng: 136.665008,icon: ‘tam16.gif’ //石川県石引駐車場イメージgif
},
{name: ‘<table><tr><td>金沢歌劇座有料駐車場</td></tr><tr><td >24時間<br>収容台数:76台</td></tr></table>’,lat:36.558593,lng: 136.658952,icon: ‘tam17.gif’ //金沢歌劇座有料駐車場イメージgif
},
{name: ‘<table><tr><td>金沢市役所・美術館駐車場</td></tr><tr><td >午前8時30分~午後11時<br>収容台数:319台</td></tr></table>’,lat:36.560954,lng: 136.657267,icon: ‘tam18.gif’ //金沢市役所・美術館駐車場イメージgif
},
{name: ‘<table><tr><td>香林坊地下駐車場</td></tr><tr><td >24時間<br>収容台数:813台</td></tr></table>’,lat:36.564272,lng: 136.65473,icon: ‘tam19.gif’ //香林坊地下駐車場イメージgif
},
{name: ‘<table><tr><td>竪町駐車場</td></tr><tr><td >24時間<br>収容台数:205台</td></tr></table>’,lat:36.558446,lng: 136.653684,icon: ‘tam20.gif’ //竪町駐車場イメージgif
},
{name: ‘<table><tr><td>北パーキング</td></tr><tr><td >24時間<br>収容台数:85台</td></tr></table>’,lat:36.56054,lng: 136.651377,icon: ‘tam21.gif’ //北パーキングイメージgif
},
{name: ‘<table><tr><td>タイムズ金沢片町商店街</td></tr><tr><td >24時間<br>収容台数:32台</td></tr></table>’,lat:36.558507,lng: 136.65311,icon: ‘tam22.gif’ //タイムズ金沢片町商店街イメージgif
},
{name: ‘<table><tr><td>OVALパーキング</td></tr><tr><td >24時間<br>収容台数:270台</td></tr></table>’,lat:36.558696,lng: 136.65341,icon: ‘tam23.gif’ //OVALパーキングイメージgif
},
{name: ‘<table><tr><td>にし茶屋観光駐車場</td></tr><tr><td >午前9時~午後10時<br>収容台数:13台</td></tr></table>’,lat:36.557087,lng: 136.648079,icon: ‘tam24.gif’ //にし茶屋観光駐車場イメージgif
},
{name: ‘<table><tr><td>長町観光駐車場</td></tr><tr><td >午前7時30分~午後6時<br>収容台数:20台</td></tr></table>’,lat:36.563104,lng: 136.64958,icon: ‘tam25.gif’ //長町観光駐車場イメージgif
},
{name: ‘<table><tr><td>近江町観光バス駐車場</td></tr><tr><td >午前7時30分~午後9時<br>収容台数:バス4台</td></tr></table>’,lat:36.570363,lng: 136.657602,icon: ‘tam26.gif’ //近江町観光バス駐車場イメージgif
},
{name: ‘<table><tr><td>東山観光バス駐車場</td></tr><tr><td >午前9~午後6時<br>収容台数:バス5台</td></tr></table>’,lat:36.573291,lng: 136.664824,icon: ‘tam27.gif’ //東山観光バス駐車場イメージgif
},
{name: ‘<table><tr><td>東山北観光駐車場</td></tr><tr><td >午前9~午後6時<br>収容台数:7台</td></tr></table>’,lat:36.573799,lng: 136.665524,icon: ‘tam28.gif’ //東山北観光駐車場イメージgif
},
{name: ‘<table><tr><td>東山観光駐車場</td></tr><tr><td >午前7時~午後10時<br>収容台数:15台</td></tr></table>’,lat:36.573087,lng: 136.665389,icon: ‘tam29.gif’ //東山観光駐車場イメージgif
},
{name: ‘<table><tr><td>東山河畔観光駐車場</td></tr><tr><td >午前7時~午後10時<br>収容台数:14台</td></tr></table>’,lat:36.571628,lng: 136.665982,icon: ‘tam30.gif’ //東山河畔観光駐車場イメージgif
}
];
function initMap() {
// 地図の作成
var mapLatLng = new google.maps.LatLng({lat: markerData[0][‘lat’], lng: markerData[0][‘lng’]}); // 緯度経度のデータ作成
map = new google.maps.Map(document.getElementById(‘map’), { // #mapに地図を埋め込む
center: mapLatLng, // 地図の中心を指定
zoom: 15 // 地図のズームを指定
});

// マーカー毎の処理
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); // マーカーにクリックイベントを追加

marker[i].setOptions({// マーカーのオプション設定
icon: {
url: markerData[i][‘icon’]// マーカーの画像を変更
}
});

}
}

// マーカーにクリックイベントを追加
function markerEvent(i) {
marker[i].addListener(‘click’, function() { // マーカーをクリックしたとき
infoWindow[i].open(map, marker[i]); // 吹き出しの表示
});
}
</script>
<script src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyClHkPIxdkxBg4j7Z7k7yPxmlNyKg8sqOM&callback=initMap”
async defer></script>
<br>番号のマークをクリックすると詳細情報を表示します<br><br>
</center>
</body>
</html>

2019年3月27日

PHPについてスキルが上がってきたので、金沢のオープンデータをそのままデータベースにインポートして、そのデータベースを読み込んでGooglemapに表示するPHPプログラムを作成することにしました。そうすれば、データが更新された時に、金沢のオープンデータをそのままデータベースにインポートするだけで良いので楽です。

何を表示しようか迷ったのですが、公衆トイレにすることにしました。
400件以上あるので、処理能力の問題もあります。

まずは、金沢のオープンデータをそのままデータベースにインポートするために、データベースのテーブルを手動で作ります。
項目数は22あります。その内、経度と緯度と名称だけ取得して、マークは全部同じ・で表示してクリックしたら名称が表示されるようにします。

2019年3月28日

金沢のオープンデータをそのまま手動でデータベースにインポートするのは簡単にできました。全部で430のデータがありました。
IDをprimaryキーに設定しました。
でも、同じ施設が何か所もデータがあるのは地図上に表示するのには不向きです。
仕方が無いので手動で削除する事にしました。入場者だけしか利用できないトイレも削除しました。結局データは146になりました。これくらいなら処理の負荷も心配するほどではないと思います。
金沢城などのトイレは場所が離れていても、緯度と経度が一緒なのは怠慢だと感じました。

よく調べたらGooglemapにマークなどを表示するのはJavascriptなのですが、JavascriptとMySQLとは相性が悪く、PHPを経由してアクセスしないといけないようです。
かなり難易度が高いので断念しました。

せっかくなので、従来の方法でページを作るようにしました。

2019年3月29日

金沢の公衆トイレは、すでにGooglemapに登録されていることに気づきました。しかもマークの色と形まで一緒になっていました。
無駄な労力を費やしてしまいました。



邑知潟近くの田んぼで白鳥の群れを見た

羽咋市から七尾に向かう途中で、たまたま周る順序が逆になって、いつもの県道2号線ではなく、邑知潟近くの道路を通りました。

邑知潟のところを見ると、鴨がたくさん見えて、もうそういう時期なんだなあと思っていたのです。
邑知潟を過ぎてから、田んぼが白くなっているところがあって、よく見ると白鳥の大群が休んでいました。
自動車を停めて、100mほどのところまで行って撮影しました。
邑知潟近辺で白鳥を見たのは初めての経験でした。





米町(こんまち)不動の滝

最近、能登の帰りに志賀町で食事をする事があって、通り道で「不動の滝」の看板を見かけました。米町の「不動の滝」は、見に行った事はあるのですが、みすぼらしい滝だという印象しか無かったのです。
でもついでだからという事で、再び見に行ってきました。
米町の「不動の滝」は公園として整備されていて、木製の階段やベンチなどが設置され、川には渡るための石が配置されています。ただ、木製の階段は腐食のため立ち入り禁止になっていました。でも川への通路は2か所あるので大丈夫です。
今回、水量も多かったせいか、見る位置によっては、なかなか見ごたえのある滝でした。
先週は、一眼レフとフィルターを持っていなかったので、今日、改めて撮影してきました。
20万年前のシルト岩の岩盤が削られて滝になったと説明書きがありました。貝の化石が多く出土されることにより海底にあったと思われるそうです。




米町不動の滝の場所はこちら   石川県羽咋郡志賀町米町



内灘大橋の潟畔の桜並木が大規模

今日、河北潟の内灘大橋近くの道路の桜並木を通ったのですが、道の両側にかなり長い距離に桜が植えてあります。
今まで気づきませんでした。残念な事に、ダメージを受けている桜も多く、惜しいなあと思います。
桜並木を通るのも良いですが、内灘大橋から見る景色も、なかなか良いです。


内灘大橋の潟畔の桜並木の場所はこちら