Posted by 管理人 on 2012年10月31日
「Google Maps API v3 + サイドバー(sidebar, marker list)をクリックしてインフォウィンドウ(infowindow)を表示させる」の記事が良くわからないとのコメントを頂いたので再度ポイントを復習してみます。
①この地図は、外部に用意したxmlファイルからデータを引っ張ってアイコンを表示させるもの。ただし、xmlファイル「http://waox.main.jp/news/maps/googlemapsapi/example/kouen-demo.php」は、MySQL+phpで作成しているのでデータベースを利用していない場合には、テキストエディタで作成すれば良し。gmarker.xmlというファイル名にしてあります。サンプルは、コチラ「xmlファイルサンプル」。
②続いてdownloadxml.js の最新ファイルは、http://code.google.com/p/frisaporceddhu/source/browse/trunk/js/?r=44にあります。downloadxml.jsをダウンロードしてご自分のサーバにアップ
③最後に上記①のxmlファイル「http://waox.main.jp/news/maps/googlemapsapi/example/gmarker.xml」をご自分のPCに保存後、自分のサーバにアップロード。その後、下記の赤字の部分だけを自分のサーバURLに書き換えればOKです。これで動くはずですが・・・・。
Read more »
Posted by 管理人 on 2012年8月5日
Posted by 管理人 on 2012年5月19日
iPhone(スマートフォン用端末)のGoogle Map アプリのような現在地アイコンがいいな~なんて探していたら有りました。
青いドットのアイコンで周囲にレーダーのように青いリングが広がっていくアニメーション付きです。
Read more »
Posted by 管理人 on 2012年5月5日
◆Google Maps JavaScript API V3 Example(Demo)一覧
※本ページのiPhone(スマートフォン端末)用デモを見るには、ブラウザはGoogle Chromeを使用して下さい。
- はじめに
- アイコンとインフォウィンドウ
- コントロール
- マーカー(アイコン)の配列についての検証(2次元配列を理解してみる)
- Google Adsense グーグルアドセンス
- 複数マーカーを配列から読み込むサンプル
- 外部XMLファイルからアイコン(マーカー)データ読み込み
- マーカー(アイコン)
- kmlファイル(アイコンとレイヤー)
- インフォウィンドウ(infowindow)
- サイドバー(sidebar、Markerlist)
- 検索窓(検索ボックス)の地図への埋め込み
- ルート検索(Google Directions API v3)
- MarkerClusterer
- ジオロケータ(現在位置収得)
- php+MySQl
- 1400マーカー表示させてみた。(ブラウザがIE7以下は、地図を広域にすると固まるかも。XMLファイルは、MySQL+PHPで生成)
- Store Locator ( ストアローケータ)+ PHP, MySQL
- Store Locator ( ストアローケータ)+ PHP, MySQL・・・変数で公園のみを指定
- 地図の状態変化イベント(イベントリスナー)によりデータベースから都度マーカーを読み込む。
- google.maps.event.addListener(map, ‘idle’, function()
- google.maps.event.addListener(map, ‘bounds_changed’, function()
- google.maps.event.addListener(map, ‘center_changed’, function()
- google.maps.event.addListener(map, ‘zoom_changed’, function()
- google.maps.event.addListener(map, ‘click’, function()
- google.maps.event.addListener(map, ‘dragend’, function()
- iPhone(アイフォン)向け・・・以下のデモを見るには、ブラウザはGoogle Chromeを使用して下さい(その理由)。
- iPhone(アイフォン)向け jQtouch+Google Map ※jQtouchに若干変更有り、サンプルを逐次作り直します。(ブラウザはGoogle Chromeを使用して下さい)
- ImageMapType
- レイヤー
- ポリライン
- マップイベント
- エレベーション(Elevation API)
- ストリートビュー(streetview)
Posted by 管理人 on 2012年5月4日
本ページのデモを見るには、ブラウザはGoogle Chromeを使用して下さい。
iPhone(アイフォン)やスマートフォンで、google mapを表示させたければ、jQtouchが手軽そうです。
◆jQtouch + Google Mapの作り方(方法)
しばらくiPhone(アイフォン)用のサイトをいじっていなかったので、見直しを兼ねて復習。
jQtouchライブラリも若干変更が出ているようですので、この機会に作りなおすことに。いずれにしても基本となるのは、jqtouchライブラリ
Read more »
Posted by 管理人 on 2012年4月16日
◆Google Maps JavaScript API V3 ブログ目次
Google Maps API v3とは? 本ブログは判らないところをコツコツ積み重ねました。あくまでご参考にされて下さい。Google Maps APIを扱うことは決して難しいことではないと思います。Google Maps JavaScript API V3のページからスタートするといいと思います。
※V2は、2013年11月以降は使用できなくなります。
いきなりサンプル集(example)地図を見るならコチラ
- 地理位置情報サービス Geolocation API
- iPhone(アイフォン)+Geolocation API
- javascript記述メモ
-
◆Google Maps JavaScript API V3 参照ページについて
先ずは、テキスト関係(要は参照webページ)を整理。
Geo Blog、ディスカッショングループやオープンソースを覗いてみる。読み物として面白いかも。
◆Google マップ ストリートビュー参照ページについて
参照webページを整理。
◆Google マップ v3 Google Maps API ウェブ サービスの参照ページについて
参照webページを整理。
◆Google Maps API V3 iPhone(アイフォン)表示用参照ページについて
先ずは、テキスト関係(要は参照webページ)を整理。
その他参照
Posted by 管理人 on 2011年10月9日
コメントを頂いたので、StreetViewのコネクティングマップにマーカーを表示させてみます。
MySQLではソースが判りにくいかと・・・・・この記事で作成していた地図と このデモサンプル(マップコネクト)を掛け合わせて少し調整して完成。
Read more »
Posted by 管理人 on 2011年10月1日
この記事でご要求をいただいたので、記事を付けたし。
余計なソースを削除して、最低限のソースだけにしたサンプル地図
目的地アイコン(マーカー)をクリックして、ルート検索結果と距離を表示させるデモ
Read more »
Posted by 管理人 on 2011年9月29日
◆Google Maps API V3 目的地アイコン(マーカー)をクリックして現在地からのルート検索結果のルートポリライン(Polylines)と距離を表示
DirectionsRendererオプションの3つの使い方(マーカ削除、ルートポリライン削除、インフォウィンドウの非表示)を覚えたところで、目的の地図を作成していきます。
<地図構成>
地図に複数のアイコン(マーカー)を読み込ませておき、それぞれのマーカーをクリックしたら、模擬でセットした現在地アイコンからのルートと距離を表示させます。
1.不要な緑色のディレクションアイコンを消す。
2.現在地を模擬でセット
3.アイコンをクリックしたらルート検索を行う。
4.距離変数を取り出してインフォウィンドウに表示させる
ってなところでしょうか。
Read more »
Posted by 管理人 on 2011年3月14日
◆ Google Maps API v3 / WordPressの記事内にGoogle Mapやストリートビュー(streetview)を表示させる方法。
WordPressの記事内にGoogle Mapやストリートビュー(streetview)を表示させようとしてスムースに行かなかったのでメモ。 記事内にGoogle Mapやストリートビュー(streetview)を表示させるための方法ですが、ポイントは次の通り。様々なやりかたがあると思いますが参考までに。 Read more »