Google Maps APIで地図の表示の拡大・縮小の仕方の説明。

GoogleMapを表示する

コードサンプル

<!-- Google Maps APIの読み込み -->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false&language=ja' charset='UTF-8'></script>
<script>
// mapオブジェクトの初期化
map = null;

// 初期設定
jQuery(document).ready(function () 
{
    var mapdiv = document.getElementById('map_canvas');
    var options = 
    {
        // ズーム倍率
        zoom : 16, // 地図中央の緯度・経度（新宿駅）
        center : new google.maps.LatLng(35.68978889880994, 139.70049233458258), // 地図タイプ
        mapTypeId : google.maps.MapTypeId.ROADMAP 
    };
    map = new google.maps.Map(mapdiv, options);
});
</script>
<style>
.map{max-width:300px;height:300px;margin:10px 0;}
</style>
<div class='map' id='map_canvas'></div>

Zoomは1が最小ですが最大値は決まっておりません。
これは詳細な地図があればよりZoom出来るからだそうです。

centerは緯度・経度で地図の中央を指定します。

mapTypeIdの種類

• MapTypeId.ROADMAP: デフォルトの道路地図を表示します。
• MapTypeId.SATELLITE: Google Earth の航空写真を表示します。
• MapTypeId.HYBRID: 通常のビューと航空写真を混合して表示します。
• MapTypeId.TERRAIN: 地形情報に基づいて物理的なマップ タイルを表示します。

縮尺の取得・変更

現在のZoomの値を取得

// map = サンプルコードのmapオブジェクト
map.getZoom();

Zoomの値を変更

map.setZoom(10);

setZoomの中にZoomの値を入れればOK。

setZoomを使用して拡大・縮小ボタンを実装します。（上のGoogleMap下にある【＋】【－】）

<input type="button" onclick="map.setZoom(map.getZoom()+1);" value="＋" />
<input type="button" onclick="map.setZoom(map.getZoom()-1);" value="－" />

これだけでGoogleMapの基本的な地図の表示方法と拡大・縮小が可能になりました。


«前の記事：XSS脆弱性のハッキング学習ゲームをGoogleのセキュリティチームが公開URL攻撃：次の記事»