Google Mapで作る印刷するための白地図 2016年



Google Mapを使い白地図を作ります。

目次
  1. HTMLコードの準備
  2. ブラウザでキャプチャする
  3. 画像編集ソフトを使いシャープをかける
  4. 印刷
  5. 補足
  6. 追記

HTMLコードの準備

下記コードをテキストエディタにコピペし、印刷したい地図の緯度経度に値を置き換えてください。保存形式は.htmlです。


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- ↓Google MapをカスタムするためのAPIの読み込み -->
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body onload="initialize();"
style="
width: 5000px; /* マップの幅 */
height: 5900px; /* マップの高さ */
margin: 0;
padding: 0;">

<div id="map_custmomize" style="width:100%; height:100%; margin: 0; padding: 0;"></div>
<script>
//GoogleMapカスタム用スクリプト
function initialize() {
var latlng = new google.maps.LatLng(37.902415, 139.023234);/* 表示したい場所の経度、緯度 */

var myOptions = {
zoom: 19, /*拡大比率*/
center: latlng, /*表示枠内の中心点*/
mapTypeId: google.maps.MapTypeId.ROADMAP,/*表示タイプの指定*/
scrollwheel: false,/*スクロールによる地図の拡大を禁止*/
mapTypeControl: false,
streetViewControl: false,
};

var map = new google.maps.Map(document.getElementById('map_custmomize'), myOptions);

/*スタイルのカスタマイズ*/
var styleOptions =
[
{
"stylers": [
{ "visibility": "on" },
{ "saturation": -100 }
]
},{
"featureType": "landscape.man_made",
"elementType": "geometry.stroke",
"stylers": [
{ "color": "#000000" },
{ "saturation": -100 }
]
},{
"featureType": "landscape.man_made",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#ffffff" },
{ "saturation": -100 }
]
},{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{ "saturation": -100 },
{ "visibility": "on" },
{ "color": "#ffffff" }
]
},{
"featureType": "landscape.natural",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#ffffff" },
{ "saturation": -100 },
{ "gamma": 0.01 }
]
},{
"elementType": "labels.text",
"stylers": [
{ "visibility": "off" }
]
},{
"elementType": "labels.icon",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#ffffff" }
]
},{
"featureType": "poi",
"elementType": "geometry.stroke",
"stylers": [
{ "visibility": "on" },
{ "color": "#000000" }
]
}
];

var MapName = { name: '白地図' }
var sampleType = new google.maps.StyledMapType(styleOptions, MapName);
map.mapTypes.set('sample', sampleType);
map.setMapTypeId('sample');

}
</script>

</body>
</html>

ブラウザでキャプチャする

先ほどコピペして作ったHTML文章をブラウザで表示すると塗りが白、線が黒の地図が表示されます。縮尺がかなり詳細になっているのは、地図を画像にキャプチャした時に高精細にするためです。キャプチャするために以下の3工程を行います。

  1. ブラウザの拡張機能のインストール

    Webページの、全画面キャプチャができるブラウザの拡張機能をインストールしておいて下さい。本記事ではGoogle chromeでFireShotを使用します。FirefoxやInternet ExplorerでもFireShotは提供されているようです。このような拡張機能を使う理由は、キーボードのPrint Screenキーでは、表示されている画面サイズでしかキャプチャすることができないためです。

  2. XAMPPのインストール

    自身のパソコンにあるHTML文章で、ブラウザの拡張機能を使用するためにXAMMPもインストールします。インストール完了後、C:\xampp\htdocsの中にmapというフォルダを新しく作り、先ほどのHTML文章を入れます。さらにXAMPP Control Panelを起動し、ApacheStartボタンをクリックしApacheを起動して下さい。

    XAMPPのWebサイト
    xammp_website

    htdocsの中にmapフォルダを作ります。
    xammp_htdocs

    本記事ではコピペしたHTML文章にindex.htmlと名前を付けました。
    xammp_htdocs_index

    XAMPPをインストール後、C:\xamppにあるxampp-control.exeをダブルクリックするとXAMPP Control Panelが起動します。ApacheStartボタンを押して下さい。
    xammp_control_panel
  3. キャプチャする

    ブラウザを起動し、アドレスバーにlocalhost/mapと入力しキーボードのエンターキーを押します。地図の読み込みが終わったら全画面キャプチャをします。ページの端っこが読み込まれず灰色になってますが構わず全画面キャプチャします。キャプチャしたら画像として保存します。

    地図の読み込みを十分に待ってから全画面キャプチャします。
    fireshot
    画像として保存をクリックします。これで広範囲に高精細な地図画像を取得できました。
    fireshot_02

画像編集ソフトを使いシャープをかける

画像編集ソフトを使い、印刷したい原稿サイズ(A4やA3など)の上にキャプチャした画像を挿入します。位置やサイズの調整をしたら最後にシャープをかけます。サンプルの画像は、GIMPを使用しシャープフィルタを80%かけたものです。画像が黒く汚れていますが印刷すると気にならないと思います。この工程をすることで印刷した時の建物の輪郭がはっきりとします。

元画像
シャープ前
シャープかけたもの
シャープ後

印刷

photoshopでしたら、そのまま印刷されても問題ないかもしれません。もしGimpをお使いでしたら一度PDFにエクスポートしてから印刷してください。

補足

画像編集ソフトを使用する時に、なるべく画像の拡大縮小を行わない方が綺麗な印刷原稿が出来上がります。画像の拡大縮小が必要なときは、HTML文章内の23行目の拡大比率の調整を行って下さい。拡大比率の値は小さいと広域、大きいと詳細になります。11行目、12行目のマップのサイズは、当方の環境ではこれ以上大きくしても地図データが読み込まれませんでした。今回のGoogle Mapの白地図は、テキスト情報も抜いたスタイルにしましたが、スタイルの編集の仕方も今後記事にしていきたいと考えています。

追記 2016/05/07

Google Map の見た目を編集する Styled Maps Wizard の検証をしました。今回の記事に合わせて見て頂くと独自の地図作りができるようになると思います。
Google Map の見た目を変更する Styled Maps Wizard の検証

SNSでもご購読できます。


コメントを残す

*