javascript / Ajax / Google Apps | らくぺ／らくらくしっかり快適ホームページ

公開されたデータを試しに使ってみました。マーカーのマウスオーバーで施設名が表示され、クリックで詳細をポップアップします。

上の地図は次の手順で表示しています。

１．八王子市のCSVデータを読み込む
２．マーカー部分のAjaxを作成する
３．Googleマップとマーカーを表示する

オープンデータは保存せず、表示の都度、八王子市のサーバーから読み込みます。何かのノウハウを持っていたり、自分独自のデータがあれば２の処理で組み合わせます。オープンデータ、サーバ上の処理、クライアントの表示、という３階層イメージで構築すると柔軟かと思います。

データはここ↓から読み込みます。
http://www.city.hachioji.tokyo.jp/open_data/044899.html
利用時間や開館曜日が文字列なのがともかく残念です。これでは「今利用できる施設だけを表示」というようなプログラムが簡単には作れません。ソフトウェア技術者が、というかコンピュータシステムが使い易い形にしないともったいないですね。

ソースコードです。CSSもphpも一つのファイルにしました。ご参考まで。

<?php
/**
 * オープンデータから位置情報を読み込んでGoogleマップにマークする。
 * phpで３つの変数（$marker、$center_pos、$title_str）を作り、Ajaxで使う。
 */

//$open_data = 'http://www.city.hachioji.tokyo.jp/dbps_data/_material_/_files/000/000/044/899/akachan_fratto.csv';
//いつのまにかURLが変わっていたので変更しました（2015/9/1）。
$open_data = 'http://www.city.hachioji.tokyo.jp/dbps_data/_material_/_files/000/000/044/899/akachan_fratto0602.csv';

// 読み込む
$csv = read_data($open_data);
// マーカー作成
$marker = csv_to_marker($csv);
// 地図の中心
$center_pos = center_pos($csv);
// ページタイトル
$title_str = "八王子市の赤ちゃん・ふらっと設置施設";


// CSVファイルを読み込みます。
function read_data($open_data)
{
	// CSVデータの文字化け対策です。
	setlocale(LC_ALL, 'ja_JP.utf-8');
	// CSVファイルをオープンします。
	$fp = fopen($open_data, "r");
	// 最初の行はフィールド名なので読み飛ばします。
	fgetcsv($fp, 0, ",");
	// CSVデータを配列に読み込みます。
	$csv = array();
	while (($data = fgetcsv($fp, 0, ",")) !== FALSE)
	{
		// fgetcsv()で読み込んだデータの文字化け対策です。
		mb_convert_variables('shift_jis', 'utf-8', $data);
		//最初のIDフィールドに数値が入っていたら有効なデータです。
		if (preg_match('/^[0-9]+$/', $data[0]))
		{
			$csv[] = $data;
		}
	}
	fclose($fp);
	return $csv;
}

// 中心点を決めます。
function center_pos($csv)
{
	/**
	 * 自分の今居る位置や、電話を掛けてきた場所などご自由に。
	 * ここでは1行目のデータを中心にしました。
	 * 戻り値は、"緯度, 経度"の文字列です。
	 */
  
	return "{$csv[0][1]}, {$csv[0][2]}";
}

// データをマーカーやポップアップの内容にします。
function csv_to_marker($csv)
{
	$marker = "";
	//$line_data = array(0=>ID, 1=>緯度, 2=>経度, 3=>名称,・・・)
	foreach ($csv as $k => $line_data)
	{
		// 緯度経度をカンマ区切りの文字列にします。
		$lat_long = "{$line_data[1]}, {$line_data[2]}";
		// ポップアップの内容を作ります。
		$js_content = "";
		$content_count = count($line_data);
		for ($c = 3; $c < $content_count; $c++)
		{
			$js_content .= "{$line_data[$c]}<br>";
		}

		// マーカーのスクリプトを組み立てます。
		$marker .= <<<JS_MARKER

			/* 緯度経度 */
			var define_var_{$k}=new google.maps.LatLng({$lat_long});

			/* マーカー表示 */
			var plot_{$k} = new google.maps.Marker({
				position: define_var_{$k},
				map: map,
				title:'{$line_data[3]}'
			});

			/* クリックしたらポップアップ */
			google.maps.event.addListener(plot_{$k}, 'click', function() {
				showInfoWindow(this,"{$js_content}");
			});

JS_MARKER;
	}
	return $marker;
}

// ここまでphp、ここからはHTML&javascript。
?>
<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title><?php echo $title_str; ?></title>
		<!-- スマートフォン向けviewportの指定 -->
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<!-- jQuery -->
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
		<!-- Google Maps APIの読み込み -->
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
		<script type="text/javascript">
			var map, marker, infowindow;
			/* ページ読み込み時に地図を初期化 */
			$(function(){
				initialize();
			});
			$keyword = 0;
			/* 地図の初期化 */
			function initialize() {
				/* 地図のオプション設定 */
				var myOptions={
					/*初期のズーム レベル */
					zoom: 14,
					/* 地図の中心点 */
					center: new google.maps.LatLng(<?php echo $center_pos; ?>),
					/* 地図タイプ */
					mapTypeId: google.maps.MapTypeId.ROADMAP
				};
				/* 地図オブジェクト */
				map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);
				/* マーカーとポップアップの内容 */
				<?php echo $marker; ?>

				/* 情報ウィンドウ表示 */
				function showInfoWindow(obj,content_string){
					/* 既に開かれていたら閉じる */
					if(infowindow) infowindow.close();
					infowindow=new google.maps.InfoWindow({
						/* クリックしたマーカーのポップアップ */
						content:content_string
					});
					infowindow.open(map,obj);
				}

			}
		</script>
		<style type="text/css">
			/* 地図のスタイル */
			#map_canvas{
				width:400px;
				height:400px;
				margin:20px 0;
			}
		</style>
	</head>

	<body>
		<p><?php echo $title_str; ?></p>
		<div id="map_canvas">
			<!-- 地図 -->
		</div>
	</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

<?php

/**

* オープンデータから位置情報を読み込んでGoogleマップにマークする。

* phpで３つの変数（$marker、$center_pos、$title_str）を作り、Ajaxで使う。

//$open_data = 'http://www.city.hachioji.tokyo.jp/dbps_data/_material_/_files/000/000/044/899/akachan_fratto.csv';

//いつのまにかURLが変わっていたので変更しました（2015/9/1）。

$open_data = 'http://www.city.hachioji.tokyo.jp/dbps_data/_material_/_files/000/000/044/899/akachan_fratto0602.csv';

// 読み込む

$csv = read_data($open_data);

// マーカー作成

$marker = csv_to_marker($csv);

// 地図の中心

$center_pos = center_pos($csv);

// ページタイトル

$title_str = "八王子市の赤ちゃん・ふらっと設置施設";

// CSVファイルを読み込みます。

function read_data($open_data)

{

// CSVデータの文字化け対策です。

setlocale(LC_ALL, 'ja_JP.utf-8');

// CSVファイルをオープンします。

$fp = fopen($open_data, "r");

// 最初の行はフィールド名なので読み飛ばします。

fgetcsv($fp, 0, ",");

// CSVデータを配列に読み込みます。

$csv = array();

while (($data = fgetcsv($fp, 0, ",")) !== FALSE)

{

// fgetcsv()で読み込んだデータの文字化け対策です。

mb_convert_variables('shift_jis', 'utf-8', $data);

//最初のIDフィールドに数値が入っていたら有効なデータです。

if (preg_match('/^[0-9]+$/', $data[0]))

{

$csv[] = $data;

}

fclose($fp);

return $csv;

}

// 中心点を決めます。

function center_pos($csv)

{

/**

* 自分の今居る位置や、電話を掛けてきた場所などご自由に。

* ここでは1行目のデータを中心にしました。

* 戻り値は、"緯度, 経度"の文字列です。

return "{$csv[0][1]}, {$csv[0][2]}";

}

// データをマーカーやポップアップの内容にします。

function csv_to_marker($csv)

{

$marker = "";

//$line_data = array(0=>ID, 1=>緯度, 2=>経度, 3=>名称,・・・)

foreach ($csv as $k => $line_data)

{

// 緯度経度をカンマ区切りの文字列にします。

$lat_long = "{$line_data[1]}, {$line_data[2]}";

// ポップアップの内容を作ります。

$js_content = "";

$content_count = count($line_data);

for ($c = 3; $c < $content_count; $c++)

{

$js_content .= "{$line_data[$c]}<br>";

}

// マーカーのスクリプトを組み立てます。

$marker .= <<<JS_MARKER

/* 緯度経度 */

var define_var_{$k}=new google.maps.LatLng({$lat_long});

/* マーカー表示 */

var plot_{$k} = new google.maps.Marker({

position: define_var_{$k},

map: map,

title:'{$line_data[3]}'

});

/* クリックしたらポップアップ */

google.maps.event.addListener(plot_{$k}, 'click', function() {

showInfoWindow(this,"{$js_content}");

});

JS_MARKER;

}

return $marker;

}

// ここまでphp、ここからはHTML&javascript。

<!DOCTYPE html>

<head>

var map, marker, infowindow;

/* ページ読み込み時に地図を初期化 */

$(function(){

initialize();

});

$keyword = 0;

/* 地図の初期化 */

function initialize() {

/* 地図のオプション設定 */

var myOptions={

/*初期のズームレベル */

zoom: 14,

/* 地図の中心点 */

center: new google.maps.LatLng(<?php echo $center_pos; ?>),

/* 地図タイプ */

mapTypeId: google.maps.MapTypeId.ROADMAP

};

/* 地図オブジェクト */

map=new google.maps.Map(document.getElementById("map_canvas"), myOptions);

/* マーカーとポップアップの内容 */

<?php echo $marker; ?>

/* 情報ウィンドウ表示 */

function showInfoWindow(obj,content_string){

/* 既に開かれていたら閉じる */

if(infowindow) infowindow.close();

infowindow=new google.maps.InfoWindow({

/* クリックしたマーカーのポップアップ */

content:content_string

});

infowindow.open(map,obj);

}

</script>

/* 地図のスタイル */

#map_canvas{

width:400px;

height:400px;

margin:20px 0;

}

</style>

</head>

<body>

</div>

</body>

</html>

以上です。

らくぺ／らくらくしっかり快適ホームページ

「javascript / Ajax / Google Apps」カテゴリーアーカイブ

八王子市のオープンデータを使ってみる

らくぺモジュールをホームページの部品にしよう！