地図の表示スタイル:TERRAINの例
Google Maps API(v3) を利用し画面表示を行う際に指定する
地図スタイルに対して「TERRAIN」を指定した際の表示例です。
TERRANとは「地形」の意味で、
ROADMAP(道路地図)と地形の起伏表現を行った地図表示が行われます。
地図の表示
地図スタイル(google.maps.MapTypeId.TERRAIN)にて地図を表示します。
サンプルコード
HTML
HTMLではGoogle Mapを表示するエリア(<div id=”gmap_canvas”></div>)を配置しています。
エリアを囲んでいる「<div class=”aspect”></div>」部分は、
ページ表示用の高さ制御用のタグです。
1 |
<div class="aspect"><div id="gmap_canvas" class="g_canvas"></div><span id="ver" style="font-size: 0.8em; color: gray;"></span></div> |
CSS
CSSではclass=”aspect”に対して幅100%を指定し、 高さをビューポートの50%としています。 GoogleMapを表示するエリア(id=”gmap_canvas”)のサイズを、 class=”aspect”に対しての幅・高さを100%として指定しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<style type="text/css"> .aspect{ width:100%; height:50vw; } .aspect_normal, .aspect_dot, .aspect_key, .aspect_dotkey{ width:100%; height:25vw; } #gmap_canvas, #gmap_canvas_normal, #gmap_canvas_dot, #gmap_canvas_key, #gmap_canvas_dotkey, div.g_canvas{ width:100%; height:100%; } </style> |
JavaScript
地図スタイルに対して「TERRAIN」を指定しています。
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> function init(){ var map_div = document.getElementById("gmap_canvas"); var gmap_canvas = new google.maps.Map(map_div,{ center: new google.maps.LatLng(34.839450, 134.693903), zoom : 14, mapTypeId : google.maps.MapTypeId.TERRAIN }); } google.maps.event.addDomListener(window,"load",init); $('#ver').text(google.maps.version); </script> |
別途、GoogleMapsAPIのライブラリを読み込む記述を、
以下のコードの(YourAPIkey)部分に置き換えて設定してください。
1 |
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=(YourAPIkey)&v=3"></script> |
その他のスタイルは以下で確認できます。
公開日:
最終更新日:2017/01/12