oshiro-kazuma/gmap_tips1.html

## gmap_tips1.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/zocial.css" />
<style type="text/css">
	html { height: 100% }
	body {
		height: 100%;
		margin: 0px;
		padding: 0px;
		font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',
			'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
	}
	#map_canvas { height: 100% }
	h1,h2,h3,h4,h5,ul,li {margin:0; padding:0; }
	.headder {
		position: fixed;
		top: 0px;
		left: 0px;
		padding: 10px;
		width: 100%;
		height:40px;
		z-index: 4;
		background-color: #444;
		color: white;
		text-shadow: 1px 0 3px #000;

		background: #ff5db1; /* Old browsers */
		background: -moz-linear-gradient(top,	#ff5db1 0%, #ef017c 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom,
			color-stop(0%,#ff5db1), color-stop(100%,#ef017c)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,	#ff5db1 0%,#ef017c 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,	#ff5db1 0%,#ef017c 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,	#ff5db1 0%,#ef017c 100%); /* IE10+ */
		background: linear-gradient(top,	#ff5db1 0%,#ef017c 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient(
			startColorstr='#ff5db1', endColorstr='#ef017c',GradientType=0 ); /* IE6-9 */
	}
	.headder h2 {
		display:inline;
	}
	.sidebar {
		position: fixed;
		top: 80px;
		left: 30px;
		z-index: 4;
		background-color: black;
		opacity: 0.7;
		color: white;
		padding: 1em;
		border-radius: 10px;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
	}
	ul,li {list-style : none ; }
	.fb-login-button {
		display:inline;
	}
	.social {
		font-size: 0.8em;
		position: fixed;
		top: 15px;
		right: 20px;
		z-index: 5;
	}

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

	//TODO ここをサーバーサイドから取得するようにする。
	var data = [
		{
			"lat": "26.171577",
			"lng": "127.672634",
			"content": "20:24<br />外出<br />"
		},{
			"lat": "26.164596",
			"lng": "127.654513",
			"content": "20:35<br />与根到着<br />"
		},{
			"lat": "26.173233",
			"lng": "127.656487",
			"content": "20:40<br />ファミマ着<br />"
		},{
			"lat": "26.178317",
			"lng": "127.653574",
			"content": "20:45<br />ガソリンスタンド<br />"
		},{
			"lat": "26.21507",
			"lng": "127.681365",
			"content": "21:00<br />那覇鬼さん着<br />"
		}
	];

	var MapInstance = {
		map: null,
		polyline: null,
		markers: new Array(),
		isDrawLine: null,
		isDrawMarkers: null
	}

	function initialize() {
		// Create Map
		var initLatlng = new google.maps.LatLng(26.186559,127.664738);
		var myOptions = {
			zoom: 14,
			center: initLatlng,
			disableDefaultUI: true,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		MapInstance.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

		// Create Maker
		MapInstance.markers = createMarkers(MapInstance.map);
		MapInstance.isDrawMarkers = true;

		// Draw Polyline
		MapInstance.polyline = createPolyline(MapInstance.map);
		MapInstance.isDrawLine = true;
	}

	// Create Markers
	function createMarkers(map) {
		var infowindows = {};
		var markers = new Array();

		for(var i in data) {
			// Create Maker
			markers[i] = new google.maps.Marker({
				position: new google.maps.LatLng(data[i].lat, data[i].lng),
				map: map
			});

			// Create InfoWindow
			var contentMessage = data[i].content + "<img width='60' heigth='60' src='photo.jpg' />";
			infowindows[i] = new google.maps.InfoWindow({
				content: contentMessage
			});

			// Show InfoWindow
			google.maps.event.addListener(markers[i], 'mouseover',
					(function(i) {
						 return function() {
							infowindows[i].open(map,markers[i]);
						}
					})(i)
			);
			google.maps.event.addListener(markers[i], 'mouseout',
					(function(i) {
						 return function() {
							infowindows[i].close();
						}
					})(i)
			);
		}
		return markers;
	}

	// Create Polyline
	function createPolyline(map) {
		// Draw polyline
		var latlng_ary = new Array();
		for(var i in data) {
			latlng_ary.push(new google.maps.LatLng(data[i].lat, data[i].lng));
		}
		var polyline = new google.maps.Polyline({
			path: latlng_ary,
			strokeColor: "red",
			strokeOpacity: 0.7,
			strokeWeight: 4
		});
		polyline.setMap(map);
		MapInstance.isDrawLine = true;

		return polyline;
	}


	// Draw Switch Markers
	function drawSwichMarkers() {
		if(MapInstance.isDrawMarkers) {
			MapInstance.markers.forEach(function(marker, idx) {
			marker.setMap(null);
			});
			MapInstance.isDrawMarkers = false;
		} else {
			MapInstance.markers = createMarkers(MapInstance.map);
			MapInstance.isDrawMarkers = true;
		}

	}

	// Draw Switch Polyline
	function drawSwichPolyline() {
		if(MapInstance.isDrawLine) {
			MapInstance.polyline.setMap(null);
			MapInstance.isDrawLine = false;
		} else {
			MapInstance.polyline = createPolyline(MapInstance.map);
			MapInstance.isDrawLine = true;
		}
	}

</script>
</head>
<body onload="initialize()">
	<div class="headder">
		<h2>6月22日の行動</h2>
		<span class="social">
			<a href="https://gist.github.com/2979475" class="zocial github">Fork me on Github</a>
		</span>
	</div>

	<div class="sidebar">
		<!-- TODO: ここもサーバーから取得したjsonで出力するようにしようず -->
		<h4 style="font-size: 1.2em;">行動履歴</h4>
		<h5 style="margin: 2px 0 4px 0px; border-bottom: 1px gray solid">2012年6月22日</h5>
		<ul style="font-size: 0.9em">
			<li>20:24 外出</li>
			<li>20:35 与根到着</li>
			<li>20:40 ファミマ着</li>
			<li>20:45 ガソリンスタンド着</li>
			<li>21:00 那覇鬼さん着</li>
			<li>23:40 移動</li>
		</ul>
		<h5 style="margin: 4px 0 4px 0px; border-bottom: 1px gray solid">2012年6月23日</h5>
		<ul style="font-size: 0.9em">
			<li>20:24 外出</li>
			<li>20:35 与根到着</li>
			<li>20:40 ファミマ着</li>
			<li>20:45 ガソリンスタンド着</li>
			<li>21:00 那覇鬼さん着</li>
			<li>23:40 移動</li>
		</ul>
		<button onclick="drawSwichPolyline()">Draw Line</button>
		<button onclick="drawSwichMarkers()">Draw Marker</button>
	</div>
	<div id="map_canvas" style="width:100%; height:100%"></div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="css/zocial.css" />
	<style type="text/css">
	html { height: 100% }
	body {
	height: 100%;
	margin: 0px;
	padding: 0px;
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',
	'メイリオ',Meiryo,'ＭＳＰゴシック',sans-serif;
	}
	#map_canvas { height: 100% }
	h1,h2,h3,h4,h5,ul,li {margin:0; padding:0; }
	.headder {
	position: fixed;
	top: 0px;
	left: 0px;
	padding: 10px;
	width: 100%;
	height:40px;
	z-index: 4;
	background-color: #444;
	color: white;
	text-shadow: 1px 0 3px #000;

	background: #ff5db1; /* Old browsers */
	background: -moz-linear-gradient(top, #ff5db1 0%, #ef017c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom,
	color-stop(0%,#ff5db1), color-stop(100%,#ef017c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ff5db1 0%,#ef017c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ff5db1 0%,#ef017c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ff5db1 0%,#ef017c 100%); /* IE10+ */
	background: linear-gradient(top, #ff5db1 0%,#ef017c 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient(
	startColorstr='#ff5db1', endColorstr='#ef017c',GradientType=0 ); /* IE6-9 */
	}
	.headder h2 {
	display:inline;
	}
	.sidebar {
	position: fixed;
	top: 80px;
	left: 30px;
	z-index: 4;
	background-color: black;
	opacity: 0.7;
	color: white;
	padding: 1em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	}
	ul,li {list-style : none ; }
	.fb-login-button {
	display:inline;
	}
	.social {
	font-size: 0.8em;
	position: fixed;
	top: 15px;
	right: 20px;
	z-index: 5;
	}

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

	//TODO ここをサーバーサイドから取得するようにする。
	var data = [
	{
	"lat": "26.171577",
	"lng": "127.672634",
	"content": "20:24<br />外出<br />"
	},{
	"lat": "26.164596",
	"lng": "127.654513",
	"content": "20:35<br />与根到着<br />"
	},{
	"lat": "26.173233",
	"lng": "127.656487",
	"content": "20:40<br />ファミマ着<br />"
	},{
	"lat": "26.178317",
	"lng": "127.653574",
	"content": "20:45<br />ガソリンスタンド<br />"
	},{
	"lat": "26.21507",
	"lng": "127.681365",
	"content": "21:00<br />那覇鬼さん着<br />"
	}
	];

	var MapInstance = {
	map: null,
	polyline: null,
	markers: new Array(),
	isDrawLine: null,
	isDrawMarkers: null
	}

	function initialize() {
	// Create Map
	var initLatlng = new google.maps.LatLng(26.186559,127.664738);
	var myOptions = {
	zoom: 14,
	center: initLatlng,
	disableDefaultUI: true,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	MapInstance.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

	// Create Maker
	MapInstance.markers = createMarkers(MapInstance.map);
	MapInstance.isDrawMarkers = true;

	// Draw Polyline
	MapInstance.polyline = createPolyline(MapInstance.map);
	MapInstance.isDrawLine = true;
	}

	// Create Markers
	function createMarkers(map) {
	var infowindows = {};
	var markers = new Array();

	for(var i in data) {
	// Create Maker
	markers[i] = new google.maps.Marker({
	position: new google.maps.LatLng(data[i].lat, data[i].lng),
	map: map
	});

	// Create InfoWindow
	var contentMessage = data[i].content + "<img width='60' heigth='60' src='photo.jpg' />";
	infowindows[i] = new google.maps.InfoWindow({
	content: contentMessage
	});

	// Show InfoWindow
	google.maps.event.addListener(markers[i], 'mouseover',
	(function(i) {
	return function() {
	infowindows[i].open(map,markers[i]);
	}
	})(i)
	);
	google.maps.event.addListener(markers[i], 'mouseout',
	(function(i) {
	return function() {
	infowindows[i].close();
	}
	})(i)
	);
	}
	return markers;
	}

	// Create Polyline
	function createPolyline(map) {
	// Draw polyline
	var latlng_ary = new Array();
	for(var i in data) {
	latlng_ary.push(new google.maps.LatLng(data[i].lat, data[i].lng));
	}
	var polyline = new google.maps.Polyline({
	path: latlng_ary,
	strokeColor: "red",
	strokeOpacity: 0.7,
	strokeWeight: 4
	});
	polyline.setMap(map);
	MapInstance.isDrawLine = true;

	return polyline;
	}


	// Draw Switch Markers
	function drawSwichMarkers() {
	if(MapInstance.isDrawMarkers) {
	MapInstance.markers.forEach(function(marker, idx) {
	marker.setMap(null);
	});
	MapInstance.isDrawMarkers = false;
	} else {
	MapInstance.markers = createMarkers(MapInstance.map);
	MapInstance.isDrawMarkers = true;
	}

	}

	// Draw Switch Polyline
	function drawSwichPolyline() {
	if(MapInstance.isDrawLine) {
	MapInstance.polyline.setMap(null);
	MapInstance.isDrawLine = false;
	} else {
	MapInstance.polyline = createPolyline(MapInstance.map);
	MapInstance.isDrawLine = true;
	}
	}

	</script>
	</head>
	<body onload="initialize()">
	<div class="headder">
	<h2>6月22日の行動</h2>
	<span class="social">
	<a href="https://gist.github.com/2979475" class="zocial github">Fork me on Github</a>
	</span>
	</div>

	<div class="sidebar">
	<!-- TODO: ここもサーバーから取得したjsonで出力するようにしようず -->
	<h4 style="font-size: 1.2em;">行動履歴</h4>
	<h5 style="margin: 2px 0 4px 0px; border-bottom: 1px gray solid">2012年6月22日</h5>
	<ul style="font-size: 0.9em">
	<li>20:24 外出</li>
	<li>20:35 与根到着</li>
	<li>20:40 ファミマ着</li>
	<li>20:45 ガソリンスタンド着</li>
	<li>21:00 那覇鬼さん着</li>
	<li>23:40 移動</li>
	</ul>
	<h5 style="margin: 4px 0 4px 0px; border-bottom: 1px gray solid">2012年6月23日</h5>
	<ul style="font-size: 0.9em">
	<li>20:24 外出</li>
	<li>20:35 与根到着</li>
	<li>20:40 ファミマ着</li>
	<li>20:45 ガソリンスタンド着</li>
	<li>21:00 那覇鬼さん着</li>
	<li>23:40 移動</li>
	</ul>
	<button onclick="drawSwichPolyline()">Draw Line</button>
	<button onclick="drawSwichMarkers()">Draw Marker</button>
	</div>
	<div id="map_canvas" style="width:100%; height:100%"></div>

	</body>
	</html>