map

Google Maps APIで地図の表示と拡大・縮小



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の基本的な地図の表示方法と拡大・縮小が可能になりました。


コメントを残す