◆Google Maps JavaScript API V3 ブログ目次
Google Maps API v3とは？ 本ブログは判らないところをコツコツ積み重ねました。あくまでご参考にされて下さい。Google Maps APIを扱うことは決して難しいことではないと思います。Google Maps JavaScript API V3のページからスタートするといいと思います。
※V2は、2013年11月以降は使用できなくなります。
いきなりサンプル集（example）地図を見るならコチラ
- Google Maps API
- 地図に表示する。
- ナビゲーションコントロール、マップタイプコントロール、距離スケールコントロールを表示する標準マップ
- Google Maps API v3 アイコン表示能力は？ 表示可能なたくさんの大量マーカー（アイコン）の数は？
- 今度はアイコン（マーカー）を地図に表示＋XMLファイルデータ読み込み
- Google Maps API v3 + 外部XMLファイル + サイドバー（sidebar）の復習
- WordPressの記事内にGoogle Mapを表示させる
- 交通渋滞情報を「交通レイヤー」または「ImageMapType」で表示する（スマートフォン用）
- ストリートビューの青い道路を常に表示させるオーバーレイヤーに変わるImageMapType
- 地図に天気情報を表示させる／お天気と雲のレイヤー
- Google Adsense グーグルアドセンスを地図の中に表示する方法
- コントローラ
- アイコン
- マーカー
- マーカーの設定 new google.maps.Marker()
- アイコン（マーカー）を変更する。・・・・複数マーカー（アイコン）
- アイコンが表示されていないただの地図にアイコン（マーカー）を追加する方法
- 移動可能なアイコンの指定
- ドラッグ＆ドロップマウスで移動可能なマーカ（アイコン）の指定方法
- スライドして移動可能にする。google.maps.MarkerのraiseOnDragの指定方法
- アニメーションクラス（アイコンが降ってきたり、飛び跳ねたり！）
- Google Map にパノラミオ（panoramio）の写真サムネイルを地図にオーバーレイ（overlay）表示させる
- 地図をクリックして、マーカー（アイコン）を追加／全てのマーカー（アイコン）を一括で削除する方法
- マーカー（アイコン）をクリックして、そのマーカーを消す
- kmlファイルからアイコン＆レイヤーを表示
- インフォウィンドウ（infowindow）
- 検索バー
- ルート検索
- ルート検索の基本マップの作成（スタートとゴール）
- 複数のwaypointを通るルート経路検索+ルートディスプレイ表示
- 通過地点（stopover）の設定（マーカでない経由ポイントを設定）
- preserveViewport ルート全体を表示させずに地図を指定座標、ズームレベルで表示させる方法
- マップ（地図）をクリックしてルート経路検索
- 合計距離+区間距離をルートディスプレイとは別に地図の外に表示させる
- トータルの合計距離を表示させたい！（+MarkerClusterer）
- ルート検索結果の緑色ディレクションマーカー（Direction Marker）を地図から削除して消す
- ルート検索結果のルートポリライン（Polylines）を地図から削除して消す
- 緑色ディレクションマーカー（Direction Marker）のインフォウィンドウ(infowindow)を表示させない
- 目的地アイコン（マーカー）をクリックして現在地からのルート検索結果のルートポリライン（Polylines）と距離を表示させる方法
- ルートのポリライン（Polylines）を複数地図に表示させる
- MarkerClusterer
- php+MySQL
- その1：データベース（phpMyAdmin）の準備
- その2：データベースのマーカ情報をXMLファイルで読み出すためのphpファイルの作成
- MySQL データベースの情報を記述するPHPファイルの作成
- XML形式にテーブルデータをGoogle Mapsで読み出すためのPHPファイルを作成
- PHPを使用したXMLファイルの出力を確認チェックする方法・・・（ココまでがMySQL、XMLファイル吐き出しの基本。）
- エラー
- その3：phpファイルに記述するSQL文（WHERE 、SELECT）
- その4：サンプル地図の作成
- データベースから地図の中心より半径（km）を指定した距離範囲のマーカー（アイコン）を表示するphp+MySQL
- ズームレベルに連動しマーカー収得用の半径距離（km）を自動変更する。
- 同じマーカー（アイコン）のデータを読み込まないようにして地図表示を高速化する方法
- 地理位置情報サービス Geolocation API
- iPhone（アイフォン）+Geolocation API
- アイフォンの画面サイズとGoogle Mapのサイズ
- 地理位置情報サービス Geolocation API をサポートしているブラウザ一覧
- Webオンライン iPhone（アイフォン）用シミュレータTest iPhone.comをブラウザを変えて比較してみる。
- V3の地図（マップ）をiPhone（アイフォン）、スマートフォンで見れるように表示させるメタタグ
- iPhone（アイフォン）向け地図にもAndroid コントローラの拡大縮小のズーム コントロールを表示させる。
- iPhone（アイフォン） Geolocation（座標収得）
- Apple iPhone（アイフォン）で正確な地理的座標位置を取得するメソッドの比較。
- iPhone（アイフォン）navigator.geolocation.getCurrentPosition() と navigator.geolocation.watchPosition()メソッド
- iPhone（アイフォン）にもAndroid 似の拡大縮小のズーム コントローラーを表示させる。
- 現在地追跡開始＋停止する方法（watchPosition+clearWatch）
- iPhone（アイフォン）用サイトを作成したい（1）。無料UiUlKitでホームページを作成してみる。
- iPhone（アイフォン）用サイトを作成したい（2）。jQtouchが便利そう。
- 外部サイトへのリンクURLの記述／jQTouch iPhone用
- jQTouch iPhone用Google Maps API V3 地図 でのjQuery click event （クリックイベント）
- jQTopuch iPhone用のgoogle map でmarker click イベント（event）が働かなくなった。
- jQTopuchでGoogle Map用のスマートフォン端末用サイトを作成作り直す。
- Googel Maps API + Traffic Layer（交通渋滞情報レイヤー） +ON/OFFボタン
- 画面左上部のclass ”back” button(バックボタン)が target=”_webapp”の場合に正常に動作しない問題
- iPhone（アイフォン）小技
- iPhone（アイフォン）でGoogle Maps地図画面をスクリーンショット（コピー／キャプチャー）する方法
- 目的地アイコン（マーカー）をクリックして、ルート検索結果と距離を表示させる方法の続き
- イベント（Events）
- エレベーション（Elevation API）
- ストリートビュー（streetview）
- javascript記述メモ
-
◆Google Maps JavaScript API V3 参照ページについて
先ずは、テキスト関係（要は参照webページ）を整理。
- スタートページ：Google Maps JavaScript API V3
- 基本ページ：Google Maps JavaScript API V3 – 基本（Geolocation）
- APIリファレンス
- コードサンプル （コードプレイグラウンド）
- モバイル向け地図アプリケーションの作成
- 地理空間データの視覚化
- 地図のカスタマイズ
- Google Code コードプレイグランド・・・・次のサンプルをメモ
- Google Fusion Tables API
- Google Fusion Tables API Sample Code
- Fusion Tables Layer Example
Geo Blog、ディスカッショングループやオープンソースを覗いてみる。読み物として面白いかも。
- Google Maps API v3 Sample Code (gmaps-samples-v3)・・・・・必要なutil.jsファイル等のダウンロード検索用
- Google Maps JavaScript API V3 の記事・・・・・一読してみて。(お勧め)
- MVC オブジェクトの活用
- PHP、MySQL、Google マップを使用した店舗検索機能の作成 （ブログ内記事）
- Too Many Markers!・・・・・大量（多く）の位置とマーカーを表示するのに使用できる様々なテクニック
- 情報ウィンドウからデータベースへ: ユーザーの追加形式データ
- PHP/MySQL で住所をジオコーディングする
- 現在地情報を利用したモバイル Web アプリケーションの作成（英語）
- Google Geo Developers Blog
- Showcase
- mobile geo social
- Discuss the Google Maps JavaScript API v3
- Google Code でのプロジェクト ホスティング
◆Google マップ ストリートビュー参照ページについて
参照webページを整理。
- スタートページ：Google Maps JavaScript API V3
- コード参照用：
- Mapsicle 1.0 （マップコネクトサンプル有り）
- ストリートビュー: 世界中をバーチャル散歩しよう
◆Google マップ v3 Google Maps API ウェブ サービスの参照ページについて
参照webページを整理。
- スタートページ：Google Maps JavaScript API V3
- Google Directions API・・・・ルート計算サービス
- 交通手段（トラベルモード）・・・
bicycling（自転車）は、現在米国でのみ利用なのでscriptから削除しないとエラー
- 交通手段（トラベルモード）・・・
- Google Distance Matrix API・・・・出発地と目的地の行列から、移動距離とその所要時間を計算するサービス
- Google Elevation API・・・・場所の高度データを要求
- Google Geocoding API・・・・住所の地理座標変換
- Google Directions API・・・・ルート計算サービス
◆Google Maps API V3 iPhone（アイフォン）表示用参照ページについて
先ずは、テキスト関係（要は参照webページ）を整理。
- スタートページ：Google Maps JavaScript API V3
- Google Code内参照ページ：
- Google Code でのプロジェクト ホスティング
- iPhone（アイフォン） プロジェクト検索
- 「site:groups.google.com iPhone」で検索すればキーワード「iPhone」で
その他参照
- スタートページ：Google Maps JavaScript API V3
スポンサードリンク
ご指導頂けませんか。Google Maps V3 Hello Worldが表示出来ない！
環境wp3.5 Twenty Ten 1.3
行つた事
●メタタグとscriptタグをタグ内に記述
●Google マップ V3 の「Hello, World」をsensor=trueでwpの投稿に
で投稿するが表示出来ない又◆Google Maps JavaScript API V3 サンプル
も表示出来ない
ご指導ください
NO2 WordPressの記事内に表示させる件。
環境wp3.5 Twenty Ten 1.3
①Add to Headerを有効化する
②PS Disable Auto Formattingを有効化する
③「下記のサンプルでは、外部ファイルと次のソースを貼り付けてあります」
のソースと「◆HTMLソースは、記事内に記述」をwpの新規投稿に追加する。
●結果 map枠は表示されるが地図は表示されない！
ご指導頂けませんか。
@tenapaさん
遅くなりました。
記事を書いたので、ご参考下さい。表示されるはずなのですが・・・・
http://waox.main.jp/news/?p=4046