Skip to content

Instantly share code, notes, and snippets.

@amay077
Last active December 25, 2015 05:59
Show Gist options
  • Select an option

  • Save amay077/6928205 to your computer and use it in GitHub Desktop.

Select an option

Save amay077/6928205 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 100% }
</style>
<script src="http://maps.google.com/maps/api/js?v=3&sensor=false"
type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
function init() {
var opts = {
zoom: 5,
mapTypeId: "GsiMaps", // 地理院地図の英語表記は「GIS Maps」
center: new google.maps.LatLng(39, 135)
};
var map = new google.maps.Map(document.getElementById("map"), opts);
map.setOptions({
mapTypeControl: false // 右上の地図タイプ選択を消す
});
// 地理院タイルを Overlay する
// via http://portal.cyberjapan.jp/help/development.html
map.mapTypes.set("GsiMaps", {
name:"地理院地図(GSI Maps)",
tileSize:new google.maps.Size(256,256),
minZoom:5,
maxZoom:18,
getTile:function(tileCoord, zoom, ownerDocument) {
var img = ownerDocument.createElement("img");
img.style.width = "256px";
img.style.height = "256px";
var x = (tileCoord.x % Math.pow(2, zoom)).toString();
var y = tileCoord.y.toString();
img.src = "http://cyberjapandata.gsi.go.jp/xyz/std/" + zoom + "/" + x + "/" + y + ".png";
return img;
}
});
// 左下に電子国土ロゴを表示(TODO: 地理院地図の正式なロゴが公開されたら置き換える)
var logo = document.createElement('DIV');
logo.style.padding = '3px';
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(logo);
logo.innerHTML = '<a href="http://portal.cyberjapan.jp/portalsite/kiyaku/index.html" target="_blank"><img style="width:32px, height:32px" src="http://cyberjapan.jp/images/icon01.gif" alt="電子国土" /></a>'; }
</script>
</head>
<body onload="init()">
<div id="map"></div>
</body>
</html>
@amay077
Copy link
Copy Markdown
Author

amay077 commented Oct 17, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment