スポンサードリンク

Category Archives: Google

データベースから地図の中心座標より半径(km)を指定した距離範囲のマーカー(アイコン)を表示するサンプルデモ完成

データベースから地図の中心より半径(km)を指定した距離範囲のマーカー(アイコン)を表示するphp+MySQL(その4)

◆ Google Maps API v3 /データベースから地図の中心より半径(km)を指定した距離範囲のマーカー(アイコン)を表示する

(1)マーカーを読み出すイベント

無事に地図を動かす度にマーカーを読み出すことに成功しましたが、データベースからマーカーを読み出すのにベストな地図の状態変化イベントは、dragendと決め付けました。

しかしながら、dragendの場合、少し問題があって、地図が最初に表示されたときにマーカーを読み込めません。地図が表示された時にイベントが発生しないことが判ります。地図をドラッグして初めてイベントが発生します(デモ)。

一方、idleイベントは、地図を読み込んだ直後でもイベントが発生しますので、これなら地図表示と同時にマーカーを表示できますが、その後、ズームでもイベントが発生してしまいますので、少しマーカーの読み込むが頻繁すぎる感じがあります。iPhone(アイフォン)用に転用しようと考えていますので、出来るだけデータベースとの通信間隔を少なくしたいものです。 そこで、projection_changed eventsを使います。 Read more »

マップオブジェクトの状態変化イベント及びマウスイベントを試す。デモのサンプル地図/Map Events Demo

データベースから地図の中心より半径(km)を指定した距離範囲のマーカー(アイコン)を表示するphp+MySQL(その2)

◆ Google Maps API v3 / マップオブジェクトの状態変化イベント及びマウスイベントを試す。デモのサンプル地図

マーカーが多く増えてきたので、Google先生のViewport Marker Management(地図に表示されている範囲のマーカーだけを表示させる)なるものに挑戦しようと他webで紹介されていたAjax案を試していて気がついた。地図が広域になれば、マーカーが増えすぎて、クラスタリング処理でもしないと重くなるのね・・・・・はぁっ当然ですな。

MarkerClusererと組み合わせることを考えたが、このクラスタリング方法も広域にすると個々のアイコンが見えなくなってしまう。

希望のサイト製作には不向きだなと考えていたら、地図の中心から半径(km)の距離範囲のマーカーをデータベースから取り出すSQLがありました。

これを使っていきます。

Read more »

Google Maps V3サンプル Store Locator (店舗検索)+ PHP, MySQL を試す。

データベースから地図の中心より半径(km)を指定した距離範囲のマーカー(アイコン)を表示するphp+MySQL(その1)

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

php+MySQLでデータベースから表示させるマーカーを選択する方法の一つとしてGoogle 先生のデモをいじって理解を深めたいと思います。

まず、自分のデータベースを使うので、マーカー座標のある日本に初期座標を変更。データベースは、次のように変数が登録されております。

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 »

ブログの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 »

Google Maps API v3 + サイドバー(sidebar, marker list)をクリックしてインフォウィンドウ(infowindow)を表示させる

◆ Google Maps API v3 サイドバー(sidebar)をクリックしてinfowindowを開く

グーグルマップの外側に、アイコン(マーカー)をクリックしたときと同じように、インフォウィンドウ(infowindow)を開くことの出来るサイドバー(sidebar)(※マーカーリストともいうのか?)を追加してみる。

今回は、私的に苦戦。Googel先生のデモ、スプレッドシートからの読み込みも最後にうまく動かん・・・やりたいことが出来ん。V3サイドバー付きの良いサンプルも見当たらない?何故?

まあ、結局はV2版参考にせこせこ変更して出来たのだが・・・・・・・V3+サイドバー。遅いと評判のブラウザIE7で、約120マーカーを読み込むとサイドバーのせいか非常に遅い!!

これでは、使えんな。次のサンプルをIE7でお試しください。

<サンプル地図> Read more »

ユーザの現在座標位置を収得する方法とは?/Geolocation + iPhone(アイフォン)+Google Maps API v3

◆Google Maps JavaScript API V3 + Geolocation (現在位置の座標情報を取得する)

iPhone(アイフォン)で地図が見れるようになりましたので、出かけたときに自分の位置をGPS情報から収得したいでうすよね。さて、どうすればいい? いつものように、Google Maps JavaScript API V3のトップページからスタート。Google Maps JavaScript API V3 – 基本ページに、ユーザーの現在地の検出(Geolocation)について説明があり、下記のような内容。

  • iPhone(アイフォン)で位置情報を収得するのは、Google Maps API では無い。
  • iPhone(アイフォン)のブラウザsafariがサポートしている”W3C Geolocation 規格”の”Geolocation” を用いる。
  • W3C Geolocation 規格”で位置を収得できない場合、Google Gears Geolocationを使う方法がある。

このページにあるサンプルコードをみると

// Try W3C Geolocation (Preferred) if(navigator.geolocation) { browserSupportFlag = true; navigator.geolocation.getCurrentPosition(function(position) { initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); map.setCenter(initialLocation); }, function() { handleNoGeolocation(browserSupportFlag); });

Read more »

スポンサードリンク