COBALT

Google maps api V3 メモ

Google maps API

Google Maps JavaScript API V3
Google maps api V3 はアプリケーションキーの取得が不要になったので呼び出してそのまま使える。

Startup

読み込み

// sensorパラメータは必須。ユーザの位置情報を取得する場合に true を設定する
// language パラメタもあり、ja を指定すると日本語でのローカライズとなる
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

基本 (jQuery利用)

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"><!--
$(function(){
    // 表示場所(緯度、経度指定)
    var _latlng = new google.maps.LatLng( 35.681382, 139.766084 );
    // 表示
    var _map = new google.maps.Map(
                   document.getElementById('map_canvas')
                  ,{ center    : _latlng
                    ,zoom      : 10
                    ,mapTypeId : google.maps.MapTypeId.ROADMAP }
               );
})
//--></script>
</head>
<body>
<div id="map"></div>
</body>
</html>

マーカー表示

// マーカーを作る
var _marker = new google.maps.Marker({
    position  : new google.maps.LatLng( 緯度, 経度 )
   ,map       : _map
   ,title     : 'ロールオーバーテキスト' 
   ,draggable : true  // ドラッグしたい時
  });
// マーカーに吹出しをつけたい場合の吹出し
var _infoWindow = new google.maps.InfoWindow({
    content  : '表示HTML'
   ,maxWidth : 300    // 最大幅(px)
});
// マーカーに吹出しを付ける
google.maps.event.addListener(_marker , 'click', function() {
    _infoWindow .open(_map, _marker);
});

ちょっと深く

表示領域をマーカー表示エリアに合わせる

// 表示領域の南西、東北の緯度経度を取得しておく
var
    _min_lat = 最小緯度
   ,_min_lon = 最小経度
   ,_max_lat = 最大緯度
   ,_max_lon = 最大経度
;
// LatLngBoundsオブジェクト作成
var _bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(_min_lat, _min_lon)
   ,new google.maps.LatLng(_max_lat, _max_lon)
);
// 指定領域が含まれるように地図を変更
this._map.fitBounds(latLngBounds);

ストリートビューを閉じる

// 地図のデフォルトパノラマオブジェクト取得
var _panorama = _map.getStreetView();
// ストリートビュー非表示
_panorama.setVisible();

ストリートビューになったかを判定

// 地図のデフォルトパノラマオブジェクト取得
var _panorama = _map.getStreetView();
// ストリートビューのパノラマ表示状態が変更されたかをハンドリング
google.maps.event.addListener(
    _panorama 
   ,'visible_changed'
   ,function () {
        if ( panorama.getVisible() ) {
            // street view mode に切り替わったらここが処理される
        }
    }
);

色々できるんですね