Google Maps APIで動くタイル地図をやってみました。

id:kochizufanさんのアイディアを得て、タイルが動く地図を作ってみました。

4フレームのアニメーションとする事にして、まずはこういう256 × 1024のタイルを作りました。

次は、Google Maps APIのMapTypeの定義です。

var monomoti = {};

monomoti.AnimationMapType = function (tileDir,ext,maxZoom,frameLength) {
	this.maxZoom = maxZoom;
	this.tileDir = tileDir;
	this.ext = ext;
	this.frameLength = frameLength;
	this.tileSize = new google.maps.Size(256,256);
};

monomoti.AnimationMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
	var y = (1 << zoom) - 1 - coord.y;
	imgUrl = this.tileDir + "/"  + zoom + '/' + coord.x + '/' + y + this.ext;
	return this.createBackGroundTile(ownerDocument,imgUrl);		
};

monomoti.AnimationMapType.prototype.createBackGroundTile = function(ownerDocument,url){
	var div = ownerDocument.createElement('DIV');
	div.setAttribute("class","animationTile");
	div.style.width = this.tileSize.width + 'px';
	div.style.height = this.tileSize.height + 'px';
	if (url){
		div.style.backgroundImage = "url('" + url + "')";
		div.style.backgroundRepeat = "no-repeat";
	}else{
		div.style.backgroundColor = this.backgroundColor;
	}
	return div;
};
monomoti.AnimationMapType.prototype.name = "animationmap";
monomoti.AnimationMapType.prototype.alt  = "animationmap";

利用例です。

<!DOCTYPE html>
<html> 
<head> 
<meta content="yes" name="apple-mobile-web-app-capable" /> 
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="description" content="animated tile map">
<title>Animated Tile Map</title> 
<style type="text/css" media="screen">
	body{
		padding: 0;
		margin: 0;
	}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false&v=3" type="text/javascript"></script>
<script src="./javascript/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="./javascript/implementation.js" type="text/javascript" charset="utf-8"></script>


<script type="text/javascript"> 
var map;
var mapContainer;
var isPlaying = false;
var aTimer;
var initialFrame = 1;
var frameLength = 4 ;
var currentFrame = initialFrame;
$(function(){
	set100Pct();
	$(window).resize(function(){
		set100Pct();
	});	
	mapContainer = document.getElementById("map");
	
	map = new google.maps.Map(mapContainer,{mapTypeControl: false});
	var animationMapType = new monomoti.AnimationMapType("./movingtiles",".png",18,frameLength);
	map.mapTypes.set('animationtile',animationMapType);
	map.setMapTypeId('animationtile');

	map.setOptions({streetViewControl:false,minZoom:13,maxZoom:18});
	map.setCenter(new google.maps.LatLng(34.743446,135.765953));
	map.setZoom(16);	

	toggleAnimation();
	
});

function set100Pct(){
	var dw = $(window).width();
	var dh = $(window).height();
	$("#main").css({width:dw + "px",height:dh + "px"});	
	
}
function toggleAnimation(){
	if (isPlaying){
		if (aTimer){
			clearInterval(aTimer);
		}
		aTimer = null;
		
		$("#control a").text("PLAY");
		isPlaying = false;
	}else{
		aTimer =setInterval(function() {
			currentFrame = ((currentFrame) % frameLength) + 1;
			yOffset = 256 * (currentFrame - 1);
			$(".animationTile").css({"background-position":"0px -" + yOffset + "px"});
		}, 1000);

		$("#control a").text("STOP");
		isPlaying = true;
	}
}

</script> 
</head> 
<body>
	<div id="main" style="position:absolute;">
		<div id="map" style="width:100%; height:100%"></div>
	</div>
	<div id="control" style="position:absolute;top;20px;left:70px;background-color:#fff">&nbsp;<a href="#" onClick="toggleAnimation();"></a>&nbsp;</div>
</body> 
</html>

需要があるか分かりませんが、ここでデモが見られます。
http://monomoti.daa.jp/movingmap/