スポンサードリンク

Category Archives: Google Maps API v3

WordPressの記事内にGoogle MapやストリートビューをGoogle Maps API V3で表示させる方法(php+MySQl+XML)

◆ Google Maps API v3  / WordPressの記事内にGoogle Mapやストリートビュー(streetview)を表示させる方法。

WordPressの記事内にGoogle Mapやストリートビュー(streetview)を表示させようとしてスムースに行かなかったのでメモ。 記事内にGoogle Mapやストリートビュー(streetview)を表示させるための方法ですが、ポイントは次の通り。様々なやりかたがあると思いますが参考までに。 Read more »

jQTopuch iPhone(アイフォン)のgoogle map でaddListenerのmarker click イベント(event)が働かなくなった。

jQtouchを使ったiPhone(アイフォン)サンプルでGoogle maps api v3のマーカーのクリックイベントがiPhone(アイフォン)デバイス上で働かない。 あれ?ナンかソースいじったかと錯覚してしまった。

PC上では、動きます。

google.maps.event.addListener(marker, ‘click’, function()の部分に問題あり? 冷静に思い返すと、以前は間違いなく動作していた。ここ数週間のうちにiPhone(アイフォン)用に製作したマップのうち、複数のマーカーを表示しているサンプルでアイコンをクリックしてもInfowindowが開かないようになってしまった。(アイコンを単独で指定するソースでは受け付けるが、XMLファイル、MySQLからマーカーを読み込んでいる地図は全滅)

JQtouchのプラグイン側は、自分のサーバ側のソースなのでいじっていないので、Google Map側のサーバで何か変更になったとしか考えらません。今までは問題なく動作していたのに、急に何か変更されても困ります。

ざっとフォーラムを覗いても参考となる情報無し・・・・・がくっ。

jQTouchのscriptとcssをはずすと、iPhone(アイフォン)画面上でマーカーをクリックできるようになりましたので、jQTouchをGoogle Maps API V3で使うのは、原因がわかるまで保留です。

もうjQuery mobileに移行しようかと・・・・・・。

2010/03/14

本日、地震の影響で会社も急遽休業。

時間が出来たので、上記の続きを調べていたら、Google グループのサイトのjQTouchに関連し「Watch out (注意してね)for the new Google Maps V3.4 from March 4th」の文字が目に付いた。

やはり私と同様にaddEventListener がいくつかのマップで働かないとのコメントがある。どうもGoogle Maps API V3の3.4版のリリースに関係があるらしい。

それで読み進めると、トリックは・・・・「A trick is to set draggable=true until the map is shown, then you can set it back to false」とある。おおっ。

しかしよく読むと地図が表示されない場合・・・と書いてある。マーカーをクリックしても反応しない場合と書いてない。無関係か?

試してみた。

				var marker = new google.maps.Marker(
				{
				 map: map,
             			 position: latlng,
            			 icon: icon.icon,
            			 shadow: icon.shadow,
            			 title: name
            			 });

としていたソースの部分にとりあえず、draggable: true,を追加してみた。

				var marker = new google.maps.Marker(
				{
				 map: map,
             			 position: latlng,
            			 icon: icon.icon,
            			 shadow: icon.shadow,
                 draggable: true,
            			 title: name
            			 });

その結果、なんとマーカーをクリックした瞬間、いままで全く無反応であったが、動作した。しかし、これまた理由は不明だが画面が真っ黒に。良くわかりませんが画面遷移に関係しているのか。

falseを指定して改めてiPhone(アイフォン)画面のマーカーをクリックすると、やはり無反応。うーん。一歩前進か?

2011/04/02

やはり、iPhone(アイフォン)用のGoogle MapをjQTouchで製作する必要が出てきましたので、jQtouchのディスカッションフォーラムを見ていると最新情報がありました。 しかもタイトルはずばり「I have solved problems with tap on markers in google maps v3 」。

 

All taps and click on markers were being ignored only when test aplication in the device. But in the PC these problems did not occur. (IOSデバイスでGoogle Mapのマーカータップ(クリック)が無視されるが、PCではそのような問題は発生しない)・・・・・・・とのコメントがあり、まさに同じ現象。

参照先:I have solved problems with tap on markers in google maps v3

これでやっとjQtouchを使ったGoogle Mapを作成できます。感謝です。

 

キモは、下記をjqtouch.jsファイルの条件節に追加記述すればOKと書いてあります。わたしは、jqtouch.min.jsへ追加記述してみました。

 

if ($el.attr('target') == '_blank' || $el.attr('rel') == 'external' || 
$el.is('input[type="checkbox"]') || $el.is('canvas'))

 

 

その結果、javascriptに記載したaddListenerのmarker click イベント(event)がjQtouchでも無事に動作!!!

jQTouchまだまだ何かありそうですが、少しずつ解決されていくのでしょう。とりあえず宿題ひとつ解決です。

 

 

 

カーナビのようにposition_changedイベントでペグマンを常に地図の中心座標に配置する/ストリートビュー(streetView)

◆ Google Maps API v3  / ストリートビュー(streetview)position_changedイベントでペグマンを地図の中心座標に配置

ストリートビュー(streetview)と地図(マップ)を同時に表示させるマップコネクトのストリートビューサンプルですが、ストリートビューをクリックして進んでいくと地図からペグマンがアウトしてししまいます。そこで、ストリートビューを動かしても常にペグマンが地図の中心座標にいるようにposition_changedイベントのソースを加えます。

(WordPress内でのストリートビューマップコネクト動作はコチラ
Read more »

ストリートビュー(streetview)だけを表示する

◆ Google Maps API v3  / ストリートビュー(streetview)だけを表示する

ストリートビュー(streetview)もV3で試していきます。残念なのは、iPhone(アイフォン)ではまだ見れないようですね。

ちょいといじって気がついたのが、ズームレベルが増えていたり、ピッチの設定が逆?になっていたことでしょうか。上向きが正の値になりますね。

それでは、基本から徐々に勉強していきます。

最初は、ともかくストリートビュー(streetview)表示するだけのサンプルについてです。基本は大事ですからね。

google先生のサンプルデモからもっともシンプルなストリートビューのソースは次のようになっています。StreetViewPanoramaOptionsは今回、positionとpovだけですが、まだまだいろいろありますので今後試していきたいと思いますが、日本語版は英文版よりプロパティの説明が抜けていますので、英文版を参考とした方がいいでしょう。

Read more »

XMLファイルから読み込んだマーカー(アイコン)をクリックして、標高(高度)をリクエスト表示する/Elavation API

◆ Google Maps API v3 XMLファイルから読み込んだマーカー(アイコン)をクリックして、標高を表示する

Elavation APIに初めて触れてみた。ちと判りにくい。Google 先生のサンプルも少ない。 うーん。使い道としては、iPhone(アイフォン)とかで現在地アイコンをクリックしたら、現在地の標高を表示するなんてのに使えるかな・・・・ぐらいか? 山のブログでも書いてる人には、重宝しそうなサービスですね。 ・・・・・てなわけで、iPhone(アイフォン)で使うことを前提に、XMLファイルから複数のマーカーを読むこむこのサンプル地図を加工します。 出来上がりは次の通り。 Read more »

ルート検索のドライブルートのポリライン(Polylines)を複数地図に表示させる/ルート検索API(Direction API)

◆Google Maps API V3 ルートのポリライン(Polylines)を複数地図に表示させる

ちょいと時間があったので、DirectionsRendererを個別関数それぞれにぶちこんでルート検索をさせてみた。

いくつものルートが表示できるので面白い。

試しに何本程度ポリラインが表示できるのか? 何本ルートを表示したらブラウザが重くなるのか?

・・・・・・・なんて興味だけで、サンプル作成中の都合のよいマップがあったので、東京のとある地点から全国に散ったマーカまでのルート検索を実行し、ポリラインをnullで消さずに追加していった。

Read more »

ルート検索結果の緑色ディレクションマーカー(Direction Marker)を地図から削除して消す方法/ルート検索API(Direction API)

◆Google Maps API V3  ルート検索の緑色マーカーを地図表示させない方法

ルート検索(Direction API)で表示される緑色のマーカー(アイコン)を表示させない方法があります。後述サンプルで、自分のアイコンと重なってしまうため、緑色のマーカーを消したかったのです。

削除する方法を探していたら、英語版Google Maps API v3リファレンスにちゃんとありました。

はぁ~。日本語版を見る気がなくなります。

英語版リファレンスのgoogle.maps.DirectionsRendererOptions object specificationに、suppressとあります。抑圧するとかいう意味で、緑色のマーカーを表示させないことが可能です。


Read more »

ルート検索結果のルートポリライン(Polylines)を地図から削除して消す方法/ルート検索API(Direction API)

◆Google Maps API V3  ルートポリライン(Polylines)を地図から削除して消す方法

前回、ルート検索(Direction API)で表示される緑色のマーカー(アイコン)を削除しましたが、今度はルート検索結果のルートポリライン(Polylines)を地図から削除してみます。

使い道があるのかはさておき、リファレンスのgoogle.maps.DirectionsRendererのOptions objectを参照方。


Read more »

ルート検索結果の緑色ディレクションマーカー(Direction Marker)のインフォウィンドウ(infowindow)を表示させない方法/ルート検索API(Direction API)

◆Google Maps API V3  ルート検索結果のマーカーをクリックしてもインフォウィンドウ(infowindow)が表示されない

DirectionsRendererオプションのマーカ削除ルートポリライン削除につづく最後のルート検索の削除は、緑色のマーカーをクリックしてもインフォウィンドウを開かないようにします。



Read more »

マウスドラッグでアイコン(マーカー)をスライドして移動可能にする。google.maps.MarkerのraiseOnDragの指定方法

◆Google Maps API V3 のアイコン(マーカー)をスライドして移動可能にする。raiseOnDragの指定

移動可能なマーカー(アイコン)をドラッグ&ドロップ(飛び跳ねるアニメーションでなく、スライドさせる指定です。(飛び跳ねるアニメーションの場合はコチラ

スケートリンクを移動させるイメージですな。

マーカー(アイコン)をスライドで移動できるようにするためには、draggableだけでなく、raiseOnDrag指定する必要があります。

なお、日本語リファレンスには、載っていないので英語版からの紹介です。

Read more »

スポンサードリンク