スポンサードリンク

Category Archives: jQTouch

Google Map現在地アイコン/レーダのようにパルス発信するアニメーション

iPhone(スマートフォン用端末)のGoogle Map アプリのような現在地アイコンがいいな~なんて探していたら有りました。

plebeosaur.us “Here We Are Again”

青いドットのアイコンで周囲にレーダーのように青いリングが広がっていくアニメーション付きです。

 

icon icon

Read more »

Googel Maps API + Traffic Layer(交通渋滞情報レイヤー) +ON/OFFボタン /JQtouch

Google Mapに表示することの出来る交通渋滞情報が思っていたよりも便利。Traffic Layer(交通渋滞情報レイヤー) をiPhone(スマートフォン用端末)地図に追加してみます。

出来れば、iPhone(スマートフォン端末)の画面をタップしたら表示/非表示を繰り返すことが出来るような手軽なものに。

Read more »

画面左上部のclass ”back” button(バックボタン)が target=”_webapp”の場合に正常に動作しない問題(不具合)/jQtouch

 

 iPhone(スマートフォン端末用)のサイトをjQtouchで作成中に発生した問題

 

/main/index.html#home ⇒ /googlemap/#mapdemo ⇒ /googlemap/#about ⇒ /googlemap/#mapdemo 、続いて/main/index.html#homeへ戻るためのhomeボタンを押すとここで問題発生、/main/index.html#homeではなく/googlemap/#aboutへリダイレクトされてしまう。何故?

 

homeボタンは、以前と同じソース <a class =”back” target=”_webapp” href=”../main/index.html#home”>Home</a> となっているが何が悪いのか?リンクアドレスは正常。jQtouchライブラリ側で何らか変わった?

/main/index.html#home ⇒ /googlemap/#mapdemo ⇒ /main/index.html#home では正常に動作。

 

  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まだまだ何かありそうですが、少しずつ解決されていくのでしょう。とりあえず宿題ひとつ解決です。

 

 

 

インフォウィンドウ(吹き出し)の外部サイトへのリンクURLの記述/iPhoneサイトをjQTouchで作成する。


◆ Google Maps API v3 /外部サイトへのリンクURLの記述/jQTouch iPhone用

jQtouchをつかったGoogle Mapの地図を作成後、PCで動作をチェックしても問題なかったのだが、iPhone(アイフォン)の実機でインフォウィンドウ(吹き出し)部の外部サイトへのURLをクリックしても新しい画面が開かないことに気がついた。何故?

このサイトを読みますと、「jQTouchを使ったサイト内のaタグのhrefはすべてjQTouchのサイト内での動作になります。」とあります。

対策として、別ウィンドウで開くとよいとありましたので、target=”_self” をtarget=”_blank”に試してみましたが開かず・・・・・。

Read more »

jQTouch iPhone用Google Maps API V3 地図 でのjQuery click event (クリックイベント)

◆ Google Maps API v3 /jQTouchを使ったGoogle Mapでのclickイベントについて jQtouchをつかったGoogle MapのiPhone(アイフォン)用サイトで、google.maps.event.addListener(map, ‘click’, function()のクリックイベントが機能しないことに気がついた。ほんと知らないことばかり、でどうすればいい。

	google.maps.event.addListener(map, 'click', function() //◆地図をクリックした時
	{
	center = map.getCenter();
	searchLocationsNear(center);
	});

あれ?なんで? そおなんです。通常のサイトで動くscriptが、jQTouchだと動かなくなることが・・・・・ よくよくGoogleのフォーラムをみていたら、jQTouchの場合、jQueryのクリックコマンドがあるとのこと。 Read more »

スポンサードリンク