google mapでオリジナルの地図を表示する方法を調べました。
Custom Map Typesを参考にしながら、実際にコーディングを行なったのは↓
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="Text/html; charset=UTF-8" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<title>Google Map Test</title>
<script type="text/javascript">
var questTypeOptions = {
getTileUrl: function(coord, zoom) {
if(coord.x == 0 && coord.y == 0){
return "画像ファイル";
}
return null;
},
tileSize: new google.maps.Size(371, 370),
isPng: false,
maxZoom: 2,
minZoom: 1,
name:"アレフガルド"
};
var questMapType = new google.maps.ImageMapType(questTypeOptions);
function init(){
var LatLng = new google.maps.LatLng(45,-50);
var Options = {
center:LatLng,
zoom:1,
mapTypeControlOptions:{
mapTypeIds:["dragonquestmap"]
},
panControl:false,
zoomControl:false,
mapTypeControl:true,
scaleControl:false,
streetViewControl:false,
overviewMapControl:false,
disableDoubleClickZoom:false,
scrollwheel:false,
rotateControl:false,
keyboardShortcuts:false,
draggable:false
};
var map = new google.maps.Map(
document.getElementById("map_canvas_07"),
Options
);
map.mapTypes.set(
'dragonquestmap',
questMapType
);
map.setMapTypeId('dragonquestmap');
google.maps.event.addListener(map, 'click', function(event) {
console.log(event)
var evntLatLng = event.latLng;
});
}
</script>
</head>
<body onload="init();">
<div id="map_canvas_07"
style="width: 400px; height: 400px;">
</div>
</body>
</html> |
いくつかポイントがあって、まず、google.maps.Mapのインスタンス変数を宣言するときに、
mapTypeControlOptions:{
mapTypeIds:["dragonquestmap"]
} |
という形で、オリジナルのmapTypeIdを設定する必要があります。
さらに、mapTypesを設定するために、google.maps.ImageMapTypeインスタンス変数を宣言しているところも重要。
JSON形式で引数にセットするのだが、nameは地図上に、実際に表示されるmapTypesとなります。
オリジナルの地図を表示できるということを知ったのでチャンレジしてみたのがドラクエ1のマップ。
地図データは
こちらからを参考にしました。
作っていて、すごく懐かしい気分になってしまった。
今度、wiiでドラクエ1、2、3とリリースされるようなので、話題のタイミングとしてはよかったかもしれない。
