Google Maps API・マイマップの使い方・活用法をご紹介しています。

地図の表示スタイル: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>」部分は、
ページ表示用の高さ制御用のタグです。

 

 CSS

CSSではclass=”aspect”に対して幅100%を指定し、 高さをビューポートの50%としています。 GoogleMapを表示するエリア(id=”gmap_canvas”)のサイズを、 class=”aspect”に対しての幅・高さを100%として指定しています。

JavaScript

地図スタイルに対して「TERRAIN」を指定しています。

別途、GoogleMapsAPIのライブラリを読み込む記述を、
以下のコードの(YourAPIkey)部分に置き換えて設定してください。

 

その他のスタイルは以下で確認できます。

公開日:
最終更新日:2017/01/12

コンテンツ
すべて展開 | すべて省略