![Locator Plus ソリューション | Google for Developers](https://cdn-ak-scissors.b.st-hatena.com/image/square/db0d7cc698c98d9fedeb1a8802f43985d6a46010/height=288;version=1;width=512/https%3A%2F%2Fdevelopers.google.com%2Fstatic%2Fmaps%2Fimages%2Fgoogle-maps-platform-1200x675.png%3Fhl%3Dja)
Google Maps V3サンプル Store Locator (店舗検索)+ PHP, MySQL を試す。 データベースから地図の中心より半径(km)を指定した距離範囲のマーカー(アイコン)を表示するphp+MySQL(その1) (その1)php+MySQL サンプルStore Locatorを試してみる。 (その2)マップオブジェクトの状態変化イベント及びマウスイベントを試す。デモのサンプル地図/Map Events Demo (その3)addListener() イベント ハンドラで地図(マップ)イベントによりデータベースから都度マーカーを読み込むphp+MySQL (その4)データベースから地図の中心より半径(km)を指定した距離範囲のマーカー(アイコン)を表示するサンプルデモ完成 ◆ Google Maps API v3 / php+MySQL サンプルStore Locat
ユーザの現在座標位置を収得する方法とは?/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(アイフォン)の
Google Maps API V3 で、追加したマーカーをクリックしたときに情報ウィンドウを表示させてみました。 Google公式のリファレンスを参考にしました。 Google Maps JavaScript API V3 リファレンス バージョン3はIE6 サポート対象外なのでお気をつけ下さい。 Markerに情報ウィンドウを表示させる 追加したMarkerに情報ウィンドウを表示してみました。 1. Mapクラスを生成 MapOptionsオブジェクトの設定して、Mapクラスの引数に指定します。 var op={ zoom:15, center:new google.maps.LatLng(35.507456,139.617585), mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(docum
JSONまたはXMLなどの外部データを読み込んで、複数のマーカーをGoogle Maps API V3 に追加してみました。 Google公式のリファレンスを参考にしました。 Google Maps JavaScript API V3 リファレンス バージョン3はIE6 サポート対象外なのでお気をつけ下さい。 JSONデータからMarkerを生成 JSONファイルを読み込んで、複数のMarkerをマップ上に追加してみました。 1. JSONファイルを読み込む Google Maps JavaScript API V3 から、XMLファイルの読み込み関数 と XMLパーサーのライブラリがなくなりました。 バージョン2でいうと、GDownloadUrl関数 や GXml.parse などです。 なので、jQueryでJSONファイルを読み込んでいきます。 map.json {"Marker":
addressプロパティには、検索する住所文字列を指定します。 住所に日本語を指定できるようにするには、languageプロパティに「ja」を指定します。 その他、国コード(regionプロパティ)、検索範囲(bounds)などを指定可能です。 注: Geocoding API は Google マップと組み合わせて使用する場合にのみ使用できます。地図に表示せずにジオコーディングの結果のみを利用することは禁止されています。 //ジオコードオブジェクト var geocoder = new google.maps.Geocoder(); geocoder.geocode( { 'address': '住所文字列', 'region': 'jp' }, function(results, status){ if(status==google.maps.GeocoderStatus.OK){ /
geolocation APIの「位置情報を連続して取得する」を使って、Google Mapで現在位置を連続で取得し、移動した場所にマーカーを付けていきます。 また、精度の上げ方を変えて試してみました。 >> Google Mapを表示するサンプル4 >> Google Mapを表示するサンプル5(精度UP) >> Google Mapを表示するサンプル6(センサーtrue) >> Google Mapを表示するサンプル7(精度UP&センサーtrue) サンプル4の結果↓ サンプル5の結果↓ サンプル6の結果↓ サンプル7の結果↓ Explanation サンプル4の画像は、下から上に向かって、歩きながら確認したものですが、位置情報がいまいちなところもあって、若干ずれています。 サンプル5の画像は、上から下に向かって戻るときに、確認したものですが、精度を上げているので、かなり正確に表示して
Google マップはグーグルが提供している地図サービスです。この Google マップをカスタマイズして独自のマーカーを表示させたり、指定した区間のルート検索を行ったりすることができるように色々な API が提供されています。ここでは Google マップで提供されている API の中でもウェブサイトで利用者が操作可能な地図をカスタマイズして表示することができる Google Maps JavaScript API の使い方の解説します。 ※ Google マップを利用者として使う場合の使い方については「Googleマップの使い方」を参照されて下さい。 なお JavaScript の基本的な使い方については「JavaScript入門」を参照されてください。
jQuery MobileでGoogle Mapsの表示からお問い合わせフォームの作成まで「jQuery Mobile」でスマホサイトを作ってみよう【実践編】 スマートフォン向けフレームワーク注目の「jQuery Mobile」の第2弾の記事です。前回はjavascriptを一行も書かずにjQuery Mobileでページを作成してみましたが、今回はスマホサイトで、google Mapsやお問い合わせフォームの設置など、より実践的に使える内容を作っていきたいと思います。 前回の記事はこちらになりますので見ていない人はこちらから見るとより今回の記事がわかりやすいくなります。 スマートフォン向けフレームワーク注目の「jQuery Mobile」でスマホサイトを作ってみよう【基本編】 さて前回もあげましたが、jQuery Mobileのメリットと言えば! マルチデバイスに対応できる クロスブラウ
Google MAPS APIで遊んでいて、複数のgoogle.maps.Marker の、それぞれに吹き出し(openInfoWindow)をつけたかったのに、どれをクリックしても最後のマーカーから吹き出しが出てくる!というミスをしないための備忘録。質問しても「クロージャがわかってない奴は云々」とか説教垂れられるだけなので。。 V2 版はこちらです。 <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script> <div id="map" style="width: 740px; height: 400px;"></div> <script type="text/javascript"> function attachMessage(marker, msg) { goog
(2011/04/15 追記) 広義の HTML5、狭義の HTML5 について追記しました もりやまです。 最近比較的余裕があるので色々調べたりしているのですが、今回はブラウザの位置情報取得機能(Geolocation API)について調べてみました。 携帯端末では昔から結構使われていましたが、今回調べてみたところ、ほとんどのモダンブラウザが対応していることがわかりました。 というわけで、ここにまとめてみます。 Geolocation API とは ホストデバイスに関連する地理的な位置情報へのスクリプトによるアクセスを提供する API です。 ザックリ言ってしまうと、ブラウザ上で動く JavaScript から現在の位置情報を取得するためのAPI の仕様、ということです。 W3C で策定中の規格で、現在は最終草案(Last Call Working Draft)の段階です。 よく「HTM
先日、Google Mapを利用する機会があったのですが、最初は単に地図があればいいということだけだったようなので、Google MapのAPIとかを利用せずに、地図の右上にあるリンクの作成ででてくるiflameを表示させようと思っていた。 しかし、APIの利用方法ってどうだったかなー?なんて思ったので、以前利用したことがあったのですが、再度調べてみることに。 今はバージョンが3も出ているのですが、それは利用したことがなかったので、それの利用方法メモです。 Google Map APIの利用 バージョン3からはAPIキーが不要とのこと。利用が楽になってますね。 まずはMapを利用するためのライブラリの読み込み <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></scri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く