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

ズームレベル3の例|Google Maps API v3

Google Maps API(v3) を利用し画面表示を行う際に
指定するズームレベルに値「3」を指定した際の表示例です。

 

地図の表示

指定した尺度(zoom : 3)にて地図を表示します。

 

サンプルコード

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

地図の表示尺度に「zoom : 3」を指定しています。

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

 

その他のズームレベルは以下で確認できます。

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

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