JavaScript++かも日記: 【Google Maps】v2でv1コード(GMap)を試してみる

2006年05月09日

【Google Maps】v2でv1コード(GMap)を試してみる

【Google Maps , 『入門 Ajax』】

ブックマーク-- Hatena

/ Livedoor

Google Mapsが今月からデフォルトでv2になるということなので、v1コードが動くかどうかを、とりあえず簡単に試してみました。

明示的にv2として動作させる方法は、下記のようにコードの中で「v=1」となっている部分を「v=2」と書換えます。

<script src="http://maps.google.com/maps?file=api&v=1&key=xxxx.." type="text/javascript"></script>

v1をv2へ対応させるには二つの道筋があります。

一つは、v2環境となっても、今まで通りv1の「GMapクラス」を使い続ける方法で、99%互換させますとGoogleは言っています。が、コードによって、多少デバッグは必要となります。特に、隠れ機能を利用していたものは、ばっさり切ったらしいので影響はあるかも。

もう一つは、v2の新しい「GMap2クラス」を利用して新しい機能を使う方法です。

とりあえず『入門Ajax』で作ったサンプル群がv1ベースですので、これのAPI URLのクエリへ「v=2」を追加してそのままv2環境での「GMapクラス」の動作を試す、という方法でチェックしました。

『入門Ajax』のサンプルで問題のあったものは、下記の2箇所で、これ以外は問題なく動作しました。

1:: _SATELLITE_TYPEなどの古い形式の地図タイプは、正式な、頭に「G_」を付けた形式しか許してくれなくなりました。
例:
× map.setMapType(_SATELLITE_TYPE) ;//許してくれなくなった言い回し
　　　　↓
○ map.setMapType(G_SATELLITE_TYPE) ;//v2でも使えるv1の言い回し
　　　　↓
◎ map.setMapType(G_SATELLITE_MAP) ;//v2での言い回し

「入門Ajax」の該当修正サンプル03-26
http://jsgt.org/ajax/newmon/samples/chapter03v2/03-26/sample.htm
(もともと、/03-26/test_G_SATELLITE_TYPE.htmという名前でおいてあったコードです。この03-26以外のサンプルでは、「G_...」なタイプを使っていますので大丈夫です。)

で、正式には、v2では、マップタイプは以下のようになります。

v1 G_MAP_TYPE
v2 G_NORMAL_MAP

v1 G_SATELLITE_TYPE
v2 G_SATELLITE_MAP

v1 G_HYBRID_TYPE
v2 G_HYBRID_MAP

2:: xslは、safariでうまく動作しないため、サポートされなくなりました。

「入門Ajax」の該当v2修正サンプル03-29(こちらはエラーになります)
http://jsgt.org/ajax/newmon/samples/chapter03v2/03-29/sample.htm
(2006.5.9現在v=1は機能していますので下記の「v=1」と明示しているサンプルでは動作しています。が、いつ終了するかは不明です。)
http://jsgt.org/ajax/newmon/samples/chapter03/03-29/sample.htm
#Googleは、この件について、「必要なら、Safariの機能を再生させたければ、Googleのオープンソース AJAXSLTライブラリを使えます」と言っています。

*参考までに、『入門Ajax』のダウンロードサンプルには、chapter03内サンプルの「v1」をすべて「v2」に書換えたホルダ「chapter03v2」を用意してあります。

kappasama ( 2006年05月11日 12:19 )

こんにちは。いつも記事を参考にさせてもらっています。
実はGoogle Maps API v2 を使用したスクリプトがうまく動作しなくて困っています。もしよかったらアドバイスをもらえないでしょうか？（以前Googleグループにも投稿したのですが解決できなくて、こちらに質問させてもらいました）

地図表示部分の下にボタンを配置して、そのボタンをクリックすると、設定された緯度・経度に中心点を移動するようなことをしたいと考えています。作成したスクリプトを実行すると地図は表示されるのですが、ボタンをクリックするとスクリプトエラーとなってしまいます。panTo メソッドを使っているのですが、使い方を間違えているのでしょうか？Javascript の勉強を始めたばかりで根本的な間違いをしてしまっているかもしれませんが、お手を煩わせてしまうことをご容赦ください。

--------　抜粋　--------

kappasama ( 2006年05月11日 13:21 )

すいません、先ほどソースをそのまま貼り付けてしまいました。あと、確認環境はWindows XP SP2 + IE6 です。

...
＜script type="text/javascript"＞
　　//＜![CDATA[
　　function load() {
　　　　var defaultLatitude = 47.159840;
　　　　var defaultLongitude = 17.578125;
　　　　var defaultZoomLv = 3;
　　　　var map = new GMap2(document.getElementById("map"));
　　　　map.addControl(new GLargeMapControl());
　　　　map.setCenter(new GLatLng(defaultLatitude, defaultLongitude), defaultZoomLv);

　　　　function moveCenter(lat, lng) {
　　　　　　map.panTo(new GLatLng(lat, lng));
　　　　}
　　}
　　//]]＞
＜/script＞
＜/head＞
＜body onload="load()" onunload="GUnload()"＞
　　＜div id="map" style="width: 600px; height:400px;"＞＜/div＞
　　＜form＞
　　　　＜input type="button" value="移動" onClick="moveCenter(38.754083,-9.140625)"＞
　　＜/form＞
＜/body＞

高橋 ( 2006年05月11日 16:40 )

こんにちは。
関数moveCenterが関数loadの中にあるので onClickからアクセスできないのではないかと思います。
いろいろな方法はありますが、オブジェクト指向的には、たとえば、

  this.moveCenter = function (lat, lng) {
    map.panTo(new GLatLng(lat, lng));
  }

のように、moveCenter をthisで明示的にloadクラスのメンバーとして書いておいてから、

などの方法でloadのインスタンスをつくり、

その後、そのインスタンス(ここではa)へアクセスする、
たとえば、

onClick="a.moveCenter(38.754083,-9.140625)"

こんな感じでどうでしょう？
試したものを、ここへおいておきました。
http://jsgt.org/mt/01/maps/test37886.htm

ただ、もちろんこのloadクラスでそのまま良のかかどうかは、、、です。

高橋 ( 2006年05月11日 17:06 )

すでにある map に追加する方法も作って見ました。

  map.moveCenter = function (lat, lng) {
      map.panTo(new GLatLng(lat, lng));
  }

  return map;

こうしておいて、

こうしてから、こう
onClick="a.moveCenter(38.754083,-9.140625)"
サンプル
http://jsgt.org/mt/01/maps/test37886-2.htm

高橋 ( 2006年05月11日 17:13 )

あと、mapをグローバルにしても良ければ、もっと簡単です。
サンプル
http://jsgt.org/mt/01/maps/test37886-3.htm

kappasama ( 2006年05月11日 18:25 )

こんにちは。
早速のご回答ありがとうございます。
しかも３つもサンプルをいただけると、それぞれを比較できるのでとても参考になりますいろんな書き方ができるのですね。

やっぱりオブジェクト指向的な考え方がよく分かっていなかったため、指摘してもらったようなミスをしてしまったようです。勉強になります。

map をグローバル変数にする3番目が扱いやすいように思いましたので、この方法で引き続き書いていきたいと思います。

改めてありがとうございました。

maribon ( 2006年08月16日 16:59 )

GXsltはサファリでのみサポートされないと思っていたのですが、バージョン2の移行で他のブラウザでも使えないみたいなので覗かせてもらいました。
他のブラウザ(IE,OPERA,FireFox等)でもAJAXSLTライブラリを使えばいいということなのでしょうか？
バージョン1に戻せば動くんですが、いつ終わるかわからないので対処に困っております。

ひで ( 2006年08月31日 13:25 )

はじめまして、可能かどうか教えて頂きたいのですが・・・

実は仕事で地図上に多角形を描画し指定の色で透過させると言うのがあるのですが、Google Mapsの存在を知りこれで対応出来ないか色々しらべております。Google Mapsを最近知ったばかりでほとんど無知に近い状態です。そこで教えて頂きたい件が２件ほどあります。

１．多角形図形の描画＆塗り潰しは出来るのでしょうか？

２．時間経過と共に塗り潰し色を変化させてりするのは可能でしょうか？

申し訳ありませんがご教示いただけないでしょうか？
宜しくお願いします。

【コメント】