◆ MarkerClusterer V3 gridsizeオプション
MarkerClustererオプションの”gridSize”、MarkerClusterer V3のクラスリファレンスのページには記載が無いが、V2にはgridSizeのオプションある。V3は無効かと思ったが試したら機能するようだ。
スポンサードリンク
MarkerClustererオプションの”gridSize”、MarkerClusterer V3のクラスリファレンスのページには記載が無いが、V2にはgridSizeのオプションある。V3は無効かと思ったが試したら機能するようだ。
Google Maps API v3の地図をiPhone(アイフォン)やスマートフォンで見れるように表示させるには、次のメタタグとscriptタグを<header>タグ内に記述しておく必要があります。
ここで注意点です。
Google先生のデフォルトは、
<meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” />
<script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=set_to_true_or_false“></script>
となっています。
とりあえずMySQLからデータを引っぱって表示させてみた。 せっかくなので、Googelコードを試す。参照ページは「Google マップと PHP/MySQL を使用」。このページ、以前はV2だったが、V3用に変わっていた。下記サンプル地図の表示マーカー数は、172マーカー。ちと重いかな。 iPhone(アイフォン)でサンプル地図をWi-Fiでなく3G回線で読み込んでみたが、まあ動くでないの。Google Maps API V3のスマートフォン対応恐るべし。次回は、MarkerClusterer+PHP+MySQL(XMLファイル生成)+Google Maps API V3を練習する予定。 ◆Script記述 Read more »
Google Maps API v3で気がついたのがインフォウィンドウの開き方。一度クリックファンクションであるマーカーのインフォウィンドウを開くと、次のアイコンをクリックしてもそのまま残ってしまう。
XMLファイルを読み込んで表示する練習をしていた時は、気づかなかった。何故かって、インフォウィンドウが常に一つだから。
しかし、アイコンの種類を変更するサンプルを作成時、次のアイコンをクリックしても前のインフォウィンドウが消えないことに気が付きました。
え~。V3では、わざわざcloseコマンドを使わなければ、インフォウィンフドウを閉じることが出来ないようだ。
良くわからんので、Googleのサンプルを探してたらありました。
お遊びで、このマップ(V2)で700マーカー以上のたくさんのマーカー(アイコン)を表示させているXMLファイル(MySQL+PHPで生成)をGoogle Maps API V3で読み込んで表示させてみた。 驚いた。大量のマーカにもかかわらず、まず本当に数秒で地図上にマーカー(アイコン)が表示される。 IE7のように遅いブラウザの場合、まず地図に表示されるまでに数十秒かかるのだが、ほんの数秒でOK。 Read more »
Google Maps API v3で地図を表示させたので、こんどはやはりマーカーとインフォウィンドウ(情報ウィンドウ)を表示させてみる。マーカとインフォウィンドウは最低限使います。
先生は、googleコードのインフォウィンドウの箇所。オーストラリアの中央にマーカーを表示し、マーカーをクリックすると情報ウィンドウが表示されるもの。
うーむ。気になったのは、インフォウィンドウの大きさ。
設定は、情報ウィンドウのサイズは自動調整だが、設定出来るようだ。なお、インフォウィンドウの縦・横スクロールを無効にするには、どうしたらいい?
マーカー(アイコン)を表示させるのであれば、複数のマーカーを表示させたい。
v2でPHP+MySQLが使えないときに、XMLファイルから読み込んだ手を試してみる。
参照ページ;Google グルーディスカッションのサンプルより
ともかくGoogle Maps API v3でともかく地図を表示させてみよう。 Google Map JavaScript API V3 チュートリアルにあるGoogle マップ V3 の「Hello, World」を表示させてみることに。
うーん。APIキーが無いのがいいですね。 あと目立つのは、コントローラ近くのストリートビューのアイコン。 スマートフォン、iPhone(アイフォン)用の位置情報取得用にセンサーの使用有無を示すための sensor パラメータの設定が出来るようになっています。 それでは、初期表示の座標を東京あたりに変更して・・・・。
まずあとで、ブログ等で使うことを考えて、bodyイベントのinitialize();は、scriptの中へ。jsファイルは共通で使いたいので、個別に指定する地図タイプ、初期表示座標、ズームは、別のscriptに分けておく。マップタイプは、4つのタイプから選択。
スポンサードリンク