[JavaScript] Google Maps API V3 を試してみた

Google Maps JavaScript API V3 を使ってみました。
バージョン2のときと比べると、APIキーの取得が不要になりスマートフォンに最適化されているそうです。

Reference

Google公式のリファレンスを参考にしました。

参考：Google Maps Javascript API V3 Reference

ちなみに、バージョン3はIE6 をサポート対象外にしているのでお気をつけ下さい。

基本的な地図を表示する

1. APIを組み込む

まず、Google Maps JavaScript API V3 を HTMLヘッダー内に組み込みます。
ユーザー位置情報取得にセンサーを使用するかどうかを示すための sensor パラメータと言語を設定します。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>

2. MapOptionsオブジェクトの設定

MapOptionsオブジェクトの設定をします。
MapOptionsオブジェクトの基本的な設定は、zoom、center、mapTypeId を指定します。

var op={
  zoom:15,
  center:new google.maps.LatLng(35.507456,139.617585),
  mapTypeId:google.maps.MapTypeId.ROADMAP
};

zoom（地図の最初のズームレベル）
center（地図の最初の中心）
mapTypeId（地図の最初のmapTypeId）

これらは、必須項目となるようなので、必ず追加しましょう。

他にも、それぞれのコントロールの有効/無効、表示位置の設定、地図のドラッグを無効にする設定などがあります。

draggable（地図のドラッグを許可する）
mapTypeControl（マップタイプコントロールの有効/無効）
mapTypeControlOptions（マップタイプコントロールの最初の表示オプション）
navigationControl（ナビゲーションコントロールの有効/無効）
navigationControlOptions（ナビゲーションコントロールの最初の表示オプション）
streetViewControl（ストリートビューでペグマンコントロールの有効/無効の初期状態）

3. Mapクラスを生成

Mapクラスを生成して、地図を表示するHTMLコンテナと MapOptionsオブジェクトを引数に指定します。
地図の大きさはHTMLコンテナのスタイルで指定するので、ここでは W400px×H550px のサイズで指定しています。

<html lang="ja">
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
<script type="text/javascript">
// <![CDATA[
window.onload=function(){
  var op={
    zoom:15,
    center:new google.maps.LatLng(35.507456,139.617585),
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("map_canvas"),op);
}
// ]]>
</script>
</head>
<body>
<div id="map_canvas" style="width:550px;height:400px"></div>
</body>

サンプル

Example：gmap-simple-1.html

以上、こんな感じでした。