スポンサードリンク

Tag Archives: Google Maps API v3

ストリートビュー地図(マップコネクト)の外にペグマンの表示位置を切り替えるボタンを設置する

以前の記事「Google Street View(ストリートビュー)のConnecting MapにMarkerを表示させる」で作成したストリートビューのマップコネクトの地図がベースです。

複数の駐車場の入り口を紹介するために、ストリートビューと地図を使ったマップコネクトを使用します。地図の外に複数のボタンを設けて、クリックするとそれぞれの駐車場の入り口を表示させるものです。

Read more »

マウスドラッグでアイコン(マーカー)をスライドして移動可能にする。google.maps.MarkerのraiseOnDragの指定方法

◆Google Maps API V3 のアイコン(マーカー)をスライドして移動可能にする。raiseOnDragの指定

移動可能なマーカー(アイコン)をドラッグ&ドロップ(飛び跳ねるアニメーションでなく、スライドさせる指定です。(飛び跳ねるアニメーションの場合はコチラ

スケートリンクを移動させるイメージですな。

マーカー(アイコン)をスライドで移動できるようにするためには、draggableだけでなく、raiseOnDrag指定する必要があります。

なお、日本語リファレンスには、載っていないので英語版からの紹介です。

Read more »

iPhone(アイフォン)でのユーザの現在座標位置を地図に表示する地理位置座標サービス(Geolocation)のGoogle Mapでの使い方とは?/watchPosition+clearWatchの切り替え方法

◆Google Maps JavaScript API V3 + Geolocation (watchPosition+clearWatch)

iPhone(アイフォン)の地図が見れるようになりました。自分の座標位置をGPS情報から収得できるようにもなりました。

しかし、以前に学んだwatchPositionとcurrentPositionだけでは、iPhone(アイフォン)用として使いにくいことが判明。

getcurrentPosition()では、収得できる座標の制度が悪すぎる。100m近くずれることがあります。

一方、watchPosition()を使うと、Google Mapで位置をずらすと数秒後に現在地に戻されてゆっくり地図を見ることもできません。

さて、どうすればいい?

完成したサンプルは、次のようなイメージ。左が追跡中。右がGeoLocation(地理位置座標サービス)の停止中。

詳しくは、下記参照。

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 »

Apple iPhone(アイフォン)で正確な地理的座標位置を取得するメソッドの比較。/Googel Maps API v3 Geolocation 

◆ navigator.geolocation.getCurrentPosition() と navigator.geolocation.watchPosition()メソッド

iPhone(アイフォン)の座標収得で使用するnavigator.geolocation.getCurrentPosition()、と navigator.geolocation.watchPosition()メソッドの大きな違いは、都度、現在位置をユーザが読み込んで位置情報を収得するのか、それとも連続的に収得するだけだと思っていたが、正確な座標制度を得るには、navigator.geolocation.watchPosition()を使った方が良いとの記事を見つけた。 <記事URL> Read more »

Google Maps API V3の地図(マップ)をPC、スマートフォンで見れるように表示させるscriptとメタタグの設定

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>

 

となっています。

Read more »

常にインフォウィンドウを1つだけ表示する方法/Google Maps JavaScript API V3

◆インフォウィンドウを1つだけ表示する方法

Google Maps API v3で気がついたのがインフォウィンドウの開き方。一度クリックファンクションであるマーカーのインフォウィンドウを開くと、次のアイコンをクリックしてもそのまま残ってしまう。

XMLファイルを読み込んで表示する練習をしていた時は、気づかなかった。何故かって、インフォウィンドウが常に一つだから。

しかし、アイコンの種類を変更するサンプルを作成時、次のアイコンをクリックしても前のインフォウィンドウが消えないことに気が付きました。

え~。V3では、わざわざcloseコマンドを使わなければ、インフォウィンフドウを閉じることが出来ないようだ。

良くわからんので、Googleのサンプルを探してたらありました。

Read more »

ドラッグ&ドロップマウスで移動可能なマーカ(アイコン)の指定方法/Google Maps API v3

◆Google Maps API V3 のドラッグ・アンド・ドロップを可能にするマーカ(アイコン)の変更

遊び半分で、マーカー(アイコン)をマウスで移動できるようにするのは、どうでしょうか。ルート検索以外に使い道は無いものか・・・・。

まあ、何かに使えるかも。

マーカー(アイコン)をドラッグ&ドロップで移動できるようにするのは、非常に簡単。

Read more »

マーカーのアイコン種類を変更する+影指定/Google Maps JavaScript API V3

Google Maps API V3 の標準マーカのアイコン種類の変更

やはりアイコンの種類をいろいろ変えたいですよね。

取り急ぎ、下記3つメモ。複数マーカーのアイコンを変更するスマートな方法はないでしょうかね。

Read more »

アイコン(マーカー)+インフォウィンドウ地図に表示/Google Maps JavaScript API V3

Google Maps API v3で地図を表示させたので、こんどはやはりマーカーとインフォウィンドウ(情報ウィンドウ)を表示させてみる。マーカとインフォウィンドウは最低限使います。

先生は、googleコードのインフォウィンドウの箇所。オーストラリアの中央にマーカーを表示し、マーカーをクリックすると情報ウィンドウが表示されるもの。

◆Google Maps V3 インフォウィンドウ

うーむ。気になったのは、インフォウィンドウの大きさ。

設定は、情報ウィンドウのサイズは自動調整だが、設定出来るようだ。なお、インフォウィンドウの縦・横スクロールを無効にするには、どうしたらいい?

InfoWindowOptions オブジェクトの仕様

Read more »

1 / 212

スポンサードリンク