10-07-16

Google Maps API version3を使ってみる(1)

demo

memo

作業内容

何と無く使っていたGoogle Maps API V3ですが、もう少しきちんと理解するため調べてみました。V2からの変更点としては、API Keyが不要になったり、読み込み速度の向上(特にiPhoneやAndroidなどのモバイル端末)が主なところのようです。

--- head内に設定等を記述 ---
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);//緯度, 経度
    var myOptions = {
      zoom: 8, //ズームは0~18までで設定(数値大でより詳細に)
      center: latlng, //地図の中心となる緯度, 経度
      mapTypeId: google.maps.MapTypeId.ROADMAP //地図タイプ※下記表を参照
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }
</script>

<meta>タグはiPhoneなどの端末でフルスクリーン表示させるために必要だそうです。ライブラリ読み込み<script>タグ内にあるsensorパラメータは、位置情報取得機能のあるデバイスに対しユーザーの位置を取得する必要があるか否かを宣言するもので、true或いはfalseを必ず指定せんといけんとのこと。これ以降はマップの設定です。地図タイプの詳細は以下の通り。

mapTypeIdの種類 説明
ROADMAP 通常の地図を表示します
SATELLITE 航空写真を表示します
HYBRID 航空写真上に主な道路名や名称などを表示します
TERRAIN 地形や大地の特徴を色分けした地図を表示します
--- body内に記述 ---
<body onload="initialize()">
 <div id="map_canvas" style="width:100%; height:400px"></div>
</body>

<body>タグでのonloadの実行で、ページが読み込まれたあとにマップオブジェクトを読み込ませます。一部ブラウザでの表示不具合対策だそうです。<div>~</div>の箇所にマップを表示。サイズの指定は必須。

参考記事

otani-webs.com / PozuPad / Copyright © 2010 LabPad All Rights Reserved.