Google Maps API v3をじっくりといじってみた

01/28

isaoJavaScript , No Comments

昨日、Google Maps API v3をじっくりといじってみた。
スマートフォンに対してパフォーマンス改善が行われたようなので、ちょっと前から気になっていた。v2に比べて、記述の仕方がぜんぜん違うけど、v3のほうがスマートでコードを書けるような気がする。設定の値とかまとまっているので、いいのかも。

v2に比べると機能が少ないかなという印象があるな。これは、そのうちv3にv2の全機能が移植されると思うので、それほど心配していない。

一番苦戦したのは、デフォルトのUIを外す作業が一番時間がかかった。リファレンスに書いてあったけど、なかなか見つけられなかった。

mapOption = {
zoom : defZoom
center : defLatlng,
navigationControl : false,
mapTypeControl : false,
scaleControl: true,
mapTypeId : google.maps.MapTypeId.SATELLITE
}
gmap = new google.maps.Map(jQuery('div#bgMap').get(0), mapOption);

作ったものをモロコピペしただけど、「navigationControl」、「mapTypeControl」、「scaleControl」で設定する。UIを取り除くだけじゃなく、UIの大きさもここで変更するようだ。

あと、地図をロードマップか衛星写真かを切り替えるときにも値が分からずハマった。

gmap.setMapTypeId(google.maps.MapTypeId.ROADMAP);

と書くようだ。v2のほうがシンプル。

全体的には、コードを書く量は減っているし、スマートフォンを対象に入れているようななので、機能が増えたらいろいろと使ってみたい。

参考にしたサイト

三丁目の電脳

Google Maps API v3をさわってみた

01/13

isaoJavaScript No Comments

前から気になっていてなかなかさわれなかった「Google Maps API v3」だけど、今回コミュニティサイト「すきなばしょ」のプリント用画面があるんだけど、そこに実装してみた。

<pre><html>
<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=<em>set_to_true_or_false</em>"></script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html></pre>

ソースコードを見てもえらるとわかるけど、地図の初期設定が変数でまとめられている。メソッドを呼び出して設定することがなくなったので、楽になった。今回のバージョンアップの特徴としてAPIキーを取得しなくても良くなったり、GPS機能が付いているモバイル機器では経緯と緯度が取得できるようになった。

ジオコーディングもちゃんとできるので、ほぼ使いたい機能は使えるような気がする。ただ、ストリートビューがつかえなかったり、一部の機能がまだ使えない。
アクセスマップなどで使うときにiphoneなどでアクセスすると目的地までの進路の案内ができそうだ。道に迷わず目的地まで辿りつける。

日本語のリファレンスがまだないぽい。。。
「Google Maps API Version3 日本語ドキュメント(非公式)」っていうのがあった。