GoogleMapAPIでイケてる地図を作る | 電網覚書

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から3年以上経過しています。

代官山蔦谷のgoogleMapってイケてるよね？あれどうやって実装しているんだろう？って話になって、「Youこれ実装しちゃいなよ」という流れになったのでgoolgeさんに聞いてみました。どうやらgooglemapAPI ver3から実装されたStyledMapTypeというAPIを使うことで実装できるようです。

GoogleMapAPIってver2のときに少し使ったことがある程度なんですよね。その時はxmlの情報をマップにプロットさせるってことをやってましたが...。今回は下記のエントリーを参考にテストしてみました。結構細かく設定できるんですね。

Google Maps JavaScript API V3 チュートリアル
 イラストマップみたいなGoogleマップをGoogle Maps API V3で！
Google Maps JavaScript API V3 のマップタイプ
 Google Mapのデザインを変更する方法（StyledMapの使い方）

ソースはこんな感じ

<!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    <script type="text/javascript">
    function initialize() {
    var latlng = new google.maps.LatLng(35.689901, 139.6982);
    var myOptions = {
    zoom: 18,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var m_latlng = new google.maps.LatLng(35.689901, 139.6982);
    var marker = new google.maps.Marker({
    position: m_latlng,
    map: map
    });
    var styleOptions = [{
    featureType:"transit.station",stylers:[{visibility: "off"}]
    }, {
    //省略
    }, {
    featureType: "poi",stylers: [{ visibility: "off" }]
    }
    ];
    var lopanType = new google.maps.StyledMapType(styleOptions);
    map.mapTypes.set('noText', lopanType);
    map.setMapTypeId('noText');
    }
    </script>
    </head>
    <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
    </body>
    </html>

以下私的備忘録

PC向けなのでsensorはfalse、モバイル機器向けに位置情報を使うときはtrue

<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
    </script>
    </code></pre>
    地図の中心を新宿西口の高速バス乗り場に設定
    <textarea name="code" class="js">
    var latlng = new google.maps.LatLng(35.689901, 139.6982);
    </code></pre>
    新宿西口の高速バス乗り場にピンを立てる
    <textarea name="code" class="js">
    var m_latlng = new google.maps.LatLng(35.689901, 139.6982);
    </code></pre>
    var styleOptionsで表示方法というかスタイルを指定する。
    <textarea name="code" class="js">
    var styleOptions = [{
    featureType:"transit.station",stylers:[{visibility: "off"}]
    }, {
    //省略
    }, {
    featureType: "landscape",stylers: [{ saturation: -100 },{ lightness: -6 }]
    }
    ];

var styleOptionsで指定したスタイルを読み込む

var lopanType = new google.maps.StyledMapType(styleOptions);

地図上の文字を表示させない

map.mapTypes.set('noText', lopanType);
  map.setMapTypeId('noText');

さらっと調べて適当に実装したからおかしな箇所もあるかもしれませんが、とりあえず表示はできています。クールでイケてる地図になったかしら？
次はレイヤーをかぶせる作業だけどこれはハマりそうだなぁ...。