Google Maps API(v3)

API

(v2)ではAPIキーをURIごとに取得しなければいけませんでしたが、(v3)からはAPIキーが不用になりました。テスト環境や本番に移行した際にAPIキーの取り直しといったわずらわしさがないのでお手軽に使えるようになりました。

コントロールの種類と表示設定

Google Map上に表示するコントロールにはデフォルトで表示されるものと、指定しないと表示されないものがあります。コントロールの表示・非表示の設定は地図のオプションプロパティで制御します。
以下はGoogle Map上で表現可能なコントロールです。


サンプル

下記のサンプルはごくシンプルな機能(コントロール)を表示しています。
http://www35.atpages.jp/kirix/ninja/original/googleMapApiTest/googleMapApiTest.html

<!DOCTYPE html "-W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>GOOGLE API TEST</title>
<style type="text/css">
div#mymap {
  width:700px;
  height:510px;
}
</style>
<!-- Google Map Apiの読み込み -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
<!--地図の初期化・Google Mapで使用する初期設定用の変数-->
function initialize() {
<!--緯度・経度-->
  var latlng = new google.maps.LatLng(35.72439,139.715471);
    <!--地図のオプション設定-->
    var opts = {
      <!--初期のズームレベル-->
      zoom:15,
      <!--地図の中心地-->
      center:latlng,
      <!--地図タイプ-->
      mapTypeId:google.maps.MapTypeId.ROADMAP,
　　　<!--コントロールの追加-->
　　　scaleControl:true,
      overviewMapControl:true,
      overviewMapControlOptions: {
        opened: true
      },
  };
  <!--Mapオブジェクトの生成-->
  var map = new google.maps.Map(document.getElementById("mymap") , opts);
}
</script>
</head>
<body onload="initialize()">
<div id="mymap">
</div>
</body>
</html>

zoom最小値が0は世界全体を表示します。
centerは地図の中心座標を設定するための項目でcenterには、LatLngクラスのオブジェクトを設定します。
MapTypeIdは地図の種類を指定します。MapTypeIdは以下のタイプが用意されています。


Map上にふきだしを表示

http://www35.atpages.jp/kirix/ninja/original/googleMapApiTest/googleMapApiTest2.html

<!--InfoWindowの初期設定-->
  var infoWindowOpts = {
    position: new google.maps.LatLng(35.72439,139.715471),
    content: "ふきだしTEST表示"
  };
  <!--作成したinfoWindowOpts関数を利用してInfoWindowを作成-->
  var infowindow = new google.maps.InfoWindow(infoWindowOpts);
  <!--Map上にInfoWindowを表示-->
  infowindow.open(map);

positionでふきだしの位置を指定し、contentで吹き出しの内容を設定しています。

Markerの設置

http://www35.atpages.jp/kirix/ninja/original/googleMapApiTest/googleMapApiTest3.html

<!--Markerの初期設定-->
  var markerOpts = {
    position: new google.maps.LatLng(35.72439,139.715471),
    map:map,
    title:"MARKER TEST"
  };
  <!--Markerを作成-->
  var marker = new google.maps.Marker(markerOpts);

このサンプルでは、position,map,titleのプロパティを設定しています。
positionプロパティはMarkerの設定位置をLatLng(緯度・経緯)オブジェクトで表現しています。positionプロパティは必須プロパティなので必ず設定してあげる必要があります。
mapプロパティはMarkerを設置する地図のMapオブジェクトです。mapプロパティ必須ではありません。
titleプロパティは、マウスがMarkerの上に来た時に表示されるプロパティです。titleで文字列を設定します。titleプロパティ必須ではありません。

Marker上にマウスが乗った時にふきだしを表示

http://www35.atpages.jp/kirix/ninja/original/googleMapApiTest/googleMapApiTest4.html
Markerのmouseover時にふきだしを表示し、mouseout時にふきだしを非表示にしています。

<!--Mapオブジェクトの生成-->
  var map = new google.maps.Map(document.getElementById("mymap") , opts);
  <!--Markerの初期設定-->
  var markerOpts = {
    position: new google.maps.LatLng(35.72439,139.715471),
    map:map,
    title:"MARKER TEST"
  };
  <!--Markerを作成-->
  var marker = new google.maps.Marker(markerOpts);
  var infowindow = new google.maps.InfoWindow({content:"Marker テスト表示"});
  //mouseoverイベント
  google.maps.event.addListener(marker , 'mouseover' , function() {
    infowindow.open(map , marker);
});
  //mouseoutイベント
  google.maps.event.addListener(marker , 'mouseout' , function() {
  infowindow.close();
});

今回は基本的な機能を作りましたが、そのほかにも機能がたくさんついているので、他のWEBサービスとの組み合わせでどのような機能の組み合わせが最適かいろいろカスタムすることが出来ます。