２０１９年２月２4日
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プログラムにしても良いのですが、少しでも簡単にという事で、必要なデータだけ残すことにしました。
最初に駐輪場のデータを削除しました。
緯度,経度,名称,概略（収容台数）,開館時間の４項目（列）だけ残して残りの項目を削除しました。
１行目の項目名も削除しました。
ファイル名を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 >午前７時～午後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>
２０１９年３月２７日
PHPについてスキルが上がってきたので、金沢のオープンデータをそのままデータベースにインポートして、そのデータベースを読み込んでGooglemapに表示するPHPプログラムを作成することにしました。そうすれば、データが更新された時に、金沢のオープンデータをそのままデータベースにインポートするだけで良いので楽です。
何を表示しようか迷ったのですが、公衆トイレにすることにしました。
４００件以上あるので、処理能力の問題もあります。
まずは、金沢のオープンデータをそのままデータベースにインポートするために、データベースのテーブルを手動で作ります。
項目数は２２あります。その内、経度と緯度と名称だけ取得して、マークは全部同じ・で表示してクリックしたら名称が表示されるようにします。
２０１９年３月２８日
金沢のオープンデータをそのまま手動でデータベースにインポートするのは簡単にできました。全部で４３０のデータがありました。
IDをprimaryキーに設定しました。
でも、同じ施設が何か所もデータがあるのは地図上に表示するのには不向きです。
仕方が無いので手動で削除する事にしました。入場者だけしか利用できないトイレも削除しました。結局データは１４６になりました。これくらいなら処理の負荷も心配するほどではないと思います。
金沢城などのトイレは場所が離れていても、緯度と経度が一緒なのは怠慢だと感じました。
よく調べたらGooglemapにマークなどを表示するのはJavascriptなのですが、JavascriptとMySQLとは相性が悪く、PHPを経由してアクセスしないといけないようです。
かなり難易度が高いので断念しました。
せっかくなので、従来の方法でページを作るようにしました。
２０１９年３月２９日
金沢の公衆トイレは、すでにGooglemapに登録されていることに気づきました。しかもマークの色と形まで一緒になっていました。
無駄な労力を費やしてしまいました。