Google

Googleカレンダーから祝日情報を取得。

2012.05.12 / Notes

Google
PHP

PHPを使ってGoogleカレンダーが提供している祝日の情報を、配列として取得する方法です。

<?php
//2012年の祝日を取得
$holidays = getHolidays(2012);

//Googleカレンダーから祝日を取得
function getHolidays($year) {
	$holidays = array();
	
	//Googleカレンダーから、指定年の祝日情報をJSON形式で取得するためのURL
	$url = sprintf(
		'http://www.google.com/calendar/feeds/%s/public/full?alt=json&%s&%s',
		'japanese__ja%40holiday.calendar.google.com',
		'start-min='.$year.'-01-01',
		'start-max='.$year.'-12-31'
	);
	
	//JSON形式で取得した情報を配列に変換
	$results = json_decode(file_get_contents($url), true);
	
	//年月日（例：20120512）をキーに、祝日名を配列に格納
	foreach ($results['feed']['entry'] as $value) {
		$date = str_replace('-', '', $value['gd$when'][0]['startTime']);
		$title = $value['title']['$t'];
		$holidays[$date] = $title;
	}
	
	//祝日の配列を早い順に並び替え
	ksort($holidays);
	
	//配列として祝日を返す
	return $holidays;
}
?>

<?php

//2012年の祝日を取得

$holidays = getHolidays(2012);

//Googleカレンダーから祝日を取得

function getHolidays($year) {

$holidays = array();

//Googleカレンダーから、指定年の祝日情報をJSON形式で取得するためのURL

$url = sprintf(

'http://www.google.com/calendar/feeds/%s/public/full?alt=json&%s&%s',

'japanese__ja%40holiday.calendar.google.com',

'start-min='.$year.'-01-01',

'start-max='.$year.'-12-31'

);

//JSON形式で取得した情報を配列に変換

$results = json_decode(file_get_contents($url), true);

//年月日（例：20120512）をキーに、祝日名を配列に格納

foreach ($results['feed']['entry'] as $value) {

$date = str_replace('-', '', $value['gd$when'][0]['startTime']);

$title = $value['title']['$t'];

$holidays[$date] = $title;

}

//祝日の配列を早い順に並び替え

ksort($holidays);

//配列として祝日を返す

return $holidays;

}

上記のコードで取得した祝日は、次の様に日にちをキーに格納されます。

/*
Array
(
	[20120101] => 元日
	[20120109] => 成人の日
	[20120211] => 建国記念の日
	[20120429] => 昭和の日
	[20120503] => 憲法記念日
	[20120504] => みどりの日
	[20120505] => こどもの日
	[20120716] => 海の日
	[20120917] => 敬老の日
	[20120922] => 秋分の日
	[20121008] => 体育の日
	[20121103] => 文化の日
	[20121123] => 勤労感謝の日
	[20121223] => 天皇誕生日
	[20121224] => 振替休日
)
*/

Array

(

[20120101] => 元日

[20120109] => 成人の日

[20120211] => 建国記念の日

[20120429] => 昭和の日

[20120503] => 憲法記念日

[20120504] => みどりの日

[20120505] => こどもの日

[20120716] => 海の日

[20120917] => 敬老の日

[20120922] => 秋分の日

[20121008] => 体育の日

[20121103] => 文化の日

[20121123] => 勤労感謝の日

[20121223] => 天皇誕生日

[20121224] => 振替休日

)

ただしGoogleカレンダーの祝日は正確ではない部分もあるので、利用の際には注意が必要です。

Google Mapsで住所、緯度・経度を取得。

2012.01.27 / Labs

Google Maps APIを使って、マーカーの位置から住所、緯度・経度を取得と、住所からマーカーの移動および、緯度・経度の取得するためのコードのメモです。
サンプルはこちら

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Google Map Search</title>
<script type="text/javascript" src="common/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="common/js/functions.js"></script>
<script type="text/javascript">
$(function() {
	setMapSearch({
		container: "map",
		lat: 35.68075,
		lng: 139.76720,
		zoom: 15
	});
});
</script>
</head>
<body>



<div id="map" style="width:500px; height:500px;"></div>



<form>
緯度：<input type="text" id="lat"/><br />
経度：<input type="text" id="lng"/><br />
住所：<input type="text" id="address"/>
<input type="submit" id="search" value="検索"/>
</form>



</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Google Map Search</title>

$(function() {

setMapSearch({

container: "map",

lat: 35.68075,

lng: 139.76720,

zoom: 15

});

</script>

</head>

<body>

<form>

緯度：<input type="text" id="lat"/><br />

経度：<input type="text" id="lng"/><br />

住所：<input type="text" id="address"/>

</form>

</body>

</html>

マーカーのドラッグで緯度・経度を書き換えて、ドロップの際に住所を書き換えています。
また住所から検索で、マーカーを移動して、緯度・経度を書き換えています。
JavaScript自体のコードはこちら。

function setMapSearch(params) {
	var geocoder = new google.maps.Geocoder();
	var position = new google.maps.LatLng(params.lat, params.lng);
	var map_options = {
		zoom: params.zoom,
		center: position,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	var map = new google.maps.Map(document.getElementById(params.container), map_options);
	var marker = new google.maps.Marker({
		position: position,
		map: map, 
		draggable: true
	});
	
	//マーカーのドラッグ時
	google.maps.event.addListener(marker, "drag", function() { 
		updateLatLng();
	});
	
	
	//マーカーのドロップ時
	google.maps.event.addListener(marker, "dragend", function() {
		var latlng = marker.getPosition();
		geocoder.geocode({latLng:latlng, language:"ja"}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				if (results[0].geometry) {
					updateAddress(results[0].formatted_address);
				}
			}
		});
	});
	updateLatLng();
	setSearch();
	
	//緯度・経度を書き換え
	function updateLatLng() {
		var latlng = marker.getPosition();
		$("input#lat").val(latlng.lat());
		$("input#lng").val(latlng.lng());
	}
	
	//住所を書き換え
	function updateAddress(address) {
		$("input#address").val(address);
	}
	
	//住所から検索して、マップを移動
	function setSearch() {
		$("input#search").click(function() {
			var address = $("input#address").val();
			geocoder.geocode({"address": address}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					map.setCenter(results[0].geometry.location);
					marker.setPosition(results[0].geometry.location);
					updateLatLng();
				}
			});
			return false;
		});
	}
}

function setMapSearch(params) {

var geocoder = new google.maps.Geocoder();

var position = new google.maps.LatLng(params.lat, params.lng);

var map_options = {

zoom: params.zoom,

center: position,

mapTypeId: google.maps.MapTypeId.ROADMAP

}

var map = new google.maps.Map(document.getElementById(params.container), map_options);

var marker = new google.maps.Marker({

position: position,

map: map,

draggable: true

});

//マーカーのドラッグ時

google.maps.event.addListener(marker, "drag", function() {

updateLatLng();

});

//マーカーのドロップ時

google.maps.event.addListener(marker, "dragend", function() {

var latlng = marker.getPosition();

geocoder.geocode({latLng:latlng, language:"ja"}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

if (results[0].geometry) {

updateAddress(results[0].formatted_address);

}

});

updateLatLng();

setSearch();

//緯度・経度を書き換え

function updateLatLng() {

var latlng = marker.getPosition();

$("input#lat").val(latlng.lat());

$("input#lng").val(latlng.lng());

}

//住所を書き換え

function updateAddress(address) {

$("input#address").val(address);

}

//住所から検索して、マップを移動

function setSearch() {

$("input#search").click(function() {

var address = $("input#address").val();

geocoder.geocode({"address": address}, function(results, status) {

if (status == google.maps.GeocoderStatus.OK) {

map.setCenter(results[0].geometry.location);

marker.setPosition(results[0].geometry.location);

updateLatLng();

}

});

return false;

});

}

Google Mapsを簡単に設置。

2010.09.22 / Labs

Google Maps API Version 3になってからAPIキーが不要になり、ホームページへ手軽に設置できるようになりました。
基本的なGoogle Mapsを設置するためのコードを、コンパクトにまとめてみました。
サンプルはこちら

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$(function() {
setMap({container:"map", lat:35.68075, lng:139.76720, zoom:15, text:"<strong>東京駅</strong>"});
});

function setMap(param) {
	var position = new google.maps.LatLng(param.lat, param.lng);
	var map_options = {center:position, zoom:param.zoom, mapTypeId:google.maps.MapTypeId.ROADMAP};
	var container = new google.maps.Map(document.getElementById(param.container), map_options);
	var marker_options = {position:position, map:container};
	var window_options = {content:param.text};
	var window = new google.maps.InfoWindow(window_options);
	var marker = new google.maps.Marker(marker_options);
	google.maps.event.addListener(marker, "click", function() {
		window.open(container, marker);
	});
}
</script>
<title>Google Maps</title>
</head>
<body>
<div id="map" style="width:500px; height:500px;"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

$(function() {

setMap({container:"map", lat:35.68075, lng:139.76720, zoom:15, text:"<strong>東京駅</strong>"});

});

function setMap(param) {

var position = new google.maps.LatLng(param.lat, param.lng);

var map_options = {center:position, zoom:param.zoom, mapTypeId:google.maps.MapTypeId.ROADMAP};

var container = new google.maps.Map(document.getElementById(param.container), map_options);

var marker_options = {position:position, map:container};

var window_options = {content:param.text};

var window = new google.maps.InfoWindow(window_options);

var marker = new google.maps.Marker(marker_options);

google.maps.event.addListener(marker, "click", function() {

window.open(container, marker);

});

}

</script>

<title>Google Maps</title>

</head>

<body>

</body>

</html>

最初に、Google Maps APIを読み込みます。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

1	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Google Mapsを設置するための関数を呼び出します。引数にはオブジェクトで、表示するためのDIV要素のID、緯度、経度、ズーム、ウィンドウのテキストを入れています。

setMap({container:"map", lat:35.68075, lng:139.76720, zoom:15, text:"<strong>東京駅</strong>"});

1	setMap({container:"map", lat:35.68075, lng:139.76720, zoom:15, text:"<strong>東京駅</strong>"});

関数はセンターにマーカーを表示して、クリックでウィンドウが開くシンプルな構成です。

function setMap(param) {
	var position = new google.maps.LatLng(param.lat, param.lng);
	var map_options = {center:position, zoom:param.zoom, mapTypeId:google.maps.MapTypeId.ROADMAP};
	var container = new google.maps.Map(document.getElementById(param.container), map_options);
	var marker_options = {position:position, map:container};
	var window_options = {content:param.text};
	var window = new google.maps.InfoWindow(window_options);
	var marker = new google.maps.Marker(marker_options);
	google.maps.event.addListener(marker, "click", function() {
		window.open(container, marker);
	});
}

function setMap(param) {

var position = new google.maps.LatLng(param.lat, param.lng);

var map_options = {center:position, zoom:param.zoom, mapTypeId:google.maps.MapTypeId.ROADMAP};

var container = new google.maps.Map(document.getElementById(param.container), map_options);

var marker_options = {position:position, map:container};

var window_options = {content:param.text};

var window = new google.maps.InfoWindow(window_options);

var marker = new google.maps.Marker(marker_options);

google.maps.event.addListener(marker, "click", function() {

window.open(container, marker);

});

}