スポンサードリンク

マーカーアニメーションクラス アイコンが降ってきたり、飛び跳ねたり!

◆ Google Maps API v3 / マーカーアニメーション Class

日本語のブラウザでアニメーションクラスを検索し、日本語版リファレンスへ飛んでも記載なし。英語版で確認してください。

google.maps.Animation class

現在、サポートされているmarkerのAnimations classは、”DROP”と”BOUNCE”

*  DROPは、マーカー表示の際に上から落ちてくるアニメーション。
* BOUNCEは、クリックイベントで飛び跳ねるアニメーションが可能。
面白いので、実装してみては?
Read more »

マーカーの設定 new google.maps.Marker()

var marker;

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);

marker = new google.maps.Marker( { position: myLatlng, title:”Hello World!” });

marker = new google.maps.Marker( { map:  map, //・・・・・・マーカを表示させる地図の指定

position: initialLocation, //・・・・・・マーカの座標・位置を指定

icon:  ’http://waox.main.jp/maps/icon/car2.png’,  //・・・・・・アイコンの画像を指定

shadow: shadow, //・・・・・・アイコンの影画像を指定

flat:  false, //・・・・・・true の場合、マーカーの影は表示しない

title: ‘現在位置’, //・・・・・・タイトルの表示文字

draggable:  false //・・・・・・マーカー(アイコン)移動の有効無効

clickable: true,  //・・・・・・クリック有効無効

visible: true,//true の場合、マーカーを表示する。

animation: google.maps.Animation.DROP,//・・・・・・マーカー(アイコン)のアニメーション

iPhone(アイフォン)向け地図にもAndroid コントローラの拡大縮小のズーム コントロールを表示させる。

◆ Google Maps API v3 / php+MySQL サンプルStore Locatorを試してみる。

iPhone(アイフォン)の地図のコントロールナビゲーションUIには、google codeを見るとiPhone(アイフォン)用のデフォルトは無し

しかし、iPhone(アイフォン)でも、ナビゲーションのオプション設定すればOK。お試しあれ。

Read more »

トータルの合計距離+地図から行きたい場所を探して、出発、中継点、到着点を入力クリックしてドライブルート経路検索

◆Google Maps API V3 + Directions API (トータルの合計距離を表示させたい)

デモギャラリーサンプルをいじってみたが、何か足りん。

そう、地図右側に表示されるルート表示のサイドバーでは、トータルの距離がわからないのである。ぐっ不便。

しかしながら、デモギャラリーでなく、Google Maps Javascript API V3 Examplesのサンプルを見ていたらtotal distanceを表示したサンプルが・・・。

せっかくなので、MarkerClustererと組み合わせて、MarkerClustererで表示されたアイコン間をドライブした気分でルート検索した合計距離を表示させてみる。

Read more »

マップ(地図)をクリックしてルート経路検索/Google Maps Directions API V3

◆Google Maps API V3 + Directions API (マップ(地図)をクリックしてルート経路検索)

v2と何が違うかは、さておきGoogle Maps JavaScript API V3 デモ ギャラリーから自分のサイトで使えそうなサンプルを試してみる。

コレがのちのちiPhone(アイフォン)用でも使えそう。

このデモギャラリーサンプル、機能が足りないところがあるので追加。

  • Get directions!で表示せた緑色のマーカー(アイコン)も移動できないので、同様に「draggable: true」を追加。
  • 日本で対応していない var mode の “case “bicycling”: mode = google.maps.DirectionsTravelMode.DRIVING;break;”をscriptから削除。
  • HTMLの<option value=”bicycling”>は削除
  • HTMLの input タグで、highway tolls のcheckedはデフォルトに不要なので削除
    • <input type=”checkbox” id=”highways” checked=”checked” />・・・・・一般道優先(チェックすると高速を使わない)
    • <input type=”checkbox” id=”tolls” checked=”checked”/>・・・・・チェックすると有料道路を使わない(※試してみたら有料の橋やバイパス道路を避けた。highwaysとは別)
  • 英語コメントを日本語に書き換えて終わり。

Read more »

bodyタグでのonloadイベントを外部Scriptファイルに記述する方法

◆<body onload=”initialize()”>をbodyタグの代わりにscriptに記述したい・・・・。

あちこちのサイト覗いても良くわからないのでscriptへ下記を記述したらOKでした。scriptの最後に書いておけば良いのか?

まあ、動くのでメモ。

Read more »

iPhone(アイフォン)用サイトを作成したい(1)。無料UiUlKitでホームページを作成してみる

◆ iPhone(アイフォン)用サイトの作成にチャレンジ

Google Mapsを外出時にiPhone(アイフォン)で切り替えて使うには、専用のアプリケーション用ソフトが必要らしいので、今回は見送り。Google Codeを検索

The UiUIKit (Universal iPhone UI Kit)ならiPhone(アイフォン)用のサイトを容易に製作できるというので試してみる。このkitは、Google codeのiphone-universalのページ右端にあるFeatured downloads:から、UiUIKit-2.1.zipをダウンロード。

Read more »

WordPress RSSが更新されない。

あるとき気が付いたら、RSSが数ヶ月前から更新されていない。なぜ?

いろいろ調べたが良くわからず・・・・・・ダッシュボード左側「表示設定」で、RSS/Atom フィードで表示する最新の投稿数を減らしたら数分で反映された・・・。うーむ。

ブログのRSS FeedをGoogle FeedBurnerへリダイレクトするプラグイン/FeedBurner FeedSmith

◆ Google FeedBurner

登録後ほったらかしのGoogle FeedBurner 、良く良くみるとHelp画面にWordPressでのRSS feedのリダイレクト方法が  書いてあったので試す。おまけに、Google Adesenseのフィード向け AdSenseも使えるようになる。

Read more »

Google Maps API v3 ローカルサーチ(Local search)用検索フォーム(ボックス)を地図に埋め込む

◆ Google Maps API v3 用地図でローカルサーチ(Local search)用の検索ボックス

V3用で困っていたローカルサーチ(LocalSearch)用の検索ボックス(検索バー)やっと使えるようになったらしい。

正確には、「A GoogleBar-like control for GMaps API v3」

待ちに待った「gmaps-api-v3-googlebar」のファイルをダウンロードしてみる。試しに地図に埋め込むと、おおっV2と変わらずに検索できる。

ちょいとアイコンが変わったか?

あれ、検索数が少ない?・・・と思ってV2とV3を比較してみたが、検索結果は同じ、V3の方が検索後に地図が少し広域になる?ための錯覚かな。ともあれ、満足。

マップ内の検索機能がないとV3への全面移行に踏み切れなかったのでとってもで嬉しい。

Read more »

スポンサードリンク