Skip to content

Instantly share code, notes, and snippets.

@cat-in-136

cat-in-136/index.css

Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cat-in-136/9703504 to your computer and use it in GitHub Desktop.
Save cat-in-136/9703504 to your computer and use it in GitHub Desktop.
Download ZIP
空想都市中村市勝手にスクロールマップ
Raw
index.css
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
Raw
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>空想都市中村市勝手にスクロールマップ</title>
<link rel="stylesheet" type="text/css" href="index.css" />
<script type="application/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<script type="application/javascript" src="index.js"></script>
</head>
<body>
<div id="map_canvas">
このページを見るにはJavaScript を有効にしてください。
<div class="inductive">
現在は地理人さんの<a href="http://imgcity.chirijin.com/?page_id=578">空想都市へ行こう！からスクロール地図</a>が公式に公開されています。<br /><br />
<span style="font-size: smaller">
スクロール地図の作り方については私@cat_in_136のブログ記事
<a href="http://cat-in-136.blogspot.com/2014/04/google-maps-javascript-api.html">カスタムマップを Google Maps JavaScript API を使ってスクロール地図にする方法</a>をご覧ください。
</span>
</div>
</div>
</body>
</html>
Raw
index.js
google.maps.event.addDomListener(window, "load", function () {
var oMapCanvas = document.getElementById("map_canvas");
// 中村市道路地図のタイルレイヤー
// http://www.mapproach.com/maps/all_XXXX.pdf
var nakamuraMapType = new google.maps.ImageMapType({
name: "道路",
tileSize: new google.maps.Size(512, 512),
isPng: true,
maxZoom: 17,
minZoom: 17,
copyright: "test",
getTileUrl: function(coordinate, zoom) {
var xmax = 19 >> 0;
var ymax = 10 >> 0;
var x = (coordinate.x >> 0) - (1 << (zoom - 2)) + (xmax >> 1);
var y = (coordinate.y >> 0) - (1 << (zoom - 2)) + (ymax >> 1);
if ((0 <= x) && (x <= xmax) && (0 <= y) && (0 <= ymax)) {
return "nakamura_si_%y_%x.png"
.replace("%x", ("0000" + x).slice(-4))
.replace("%y", ("0000" + y).slice(-4));
} else {
return undefined;
}
}
});
var map = new google.maps.Map(oMapCanvas, {
zoom: 17,
center: new google.maps.LatLng(0.00862598, 0.00213503),
disableDefaultUI: true,
panControl: true,
scaleControl: true,
mapTypeId: "道路"
});
map.mapTypes.set("道路", nakamuraMapType);
// 地図の版権表示
var copyrightDiv = document.createElement("div");
copyrightDiv.style.fontSize = "10px";
copyrightDiv.style.whiteSpace = "nowrap";
copyrightDiv.style.padding = "0 6px";
copyrightDiv.style.backgroundColor = "rgba(245, 245, 245, 0.70)";
var copyrightSpan = document.createElement("span");
copyrightSpan.setAttribute("style", "color: #444;");
copyrightSpan.innerHTML = "地図データ &#169; 2014 <a href=\"http://www.chirijin.com/\">地理人研究所</a>";
copyrightDiv.appendChild(copyrightSpan);
map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push(copyrightDiv);
// 公式でスクロール地図が公開されているので誘導を表示する。
(new google.maps.InfoWindow({
content: "<h2>注意</h2>" +
"<div class=\"inductive\">" +
"現在は地理人さんの<a href=\"http://imgcity.chirijin.com/?page_id=578\">空想都市へ行こう！からスクロール地図</a>が公式に公開されています。<br /><br />" +
"<span style=\"font-size: smaller\">" +
"スクロール地図の作り方については私@cat_in_136のブログ記事" +
"<a href=\"http://cat-in-136.blogspot.com/2014/04/google-maps-javascript-api.html\">カスタムマップを Google Maps JavaScript API を使ってスクロール地図にする方法</a>をご覧ください。" +
"</span>" +
"</div>",
disableAutoPan: false,
position: new google.maps.LatLng(0.00862598, 0.00213503)
})).open(map);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment