How to make a Location Based AR with Google Maps

Googleマップから位置情報型ARを作成する方法

このページは、Googleマップで自分の地図を作る「マイマップ」を使い、そこに置いたマーカーを、AR(拡張現実)のタグとして出す方法について説明しています。

h5ar
  1. iPhoneやiPadでは動かない
    現在この方法でARを表示できるのはAndroidのスマートフォンだけです。iPhoneやiPadでは実現できていません(頑張ります)。もし、iOSでのやり方について助言をいただけるとありがたいです。
  2. Firefoxのダウンロード
    現在私達が開発に使っているのはAndroidのFirefoxです。
    お持ちで無い方は以下からFirefoxをダウンロードして使ってください。
    https://play.google.com/store/apps/details?id=org.mozilla.firefox&hl=ja
  3. Googleマップに情報を書き入れ、公開する
    自分で地図を作る方法は以下です。 Google: マイマップ ヘルプセンターの情報も参考にしてください。
    1. Google/Gmailのアカウントで、パソコンのブラウザでログインします。
      https://accounts.google.com/login?hl=ja
      Googleマップは、Googleのサービスを使うのでGoogleのブラウザGoogle Chromeが相性が良いです。
    2. Googleマップを表示します。
      https://www.google.co.jp/maps
    3. 左上に漢数字の「三」に似たアイコンの"メニュー"から「マイマップ」を選び、一番下の「地図を作成」に進みます。
    4. 「無題の地図」「無題のレイヤ」に文字を入れます。
    5. 右の「手」「マーカー」「ラインを描画」が並んだなかから「マーカ」を選んで「ポイント」と「説明」を入力します。ここに書いた文字がARのエアタグとして出力されます。
    6. 「共有」を押して、「非公開」になっているところを変更→オン・ウェブ上で一般公開/リンクを知っている...のどちらかを選び「保存」のボタン。一般公開にすると、地図が検索で見つかるようになります。
    7. その後「完了」のボタンで地図に戻ります。
  4. Googleマップの地図のIDを確認する
    作成した地図のIDを確認します。編集中のURLが
      https://www.google.com/maps/d/edit?hl=ja&authuser=0&mid=zMGTbS-sr-Og.kjsEJPO9FEhE
    だとすると、下線部、 zMGTbS-sr-Og.kjsEJPO9FEhE の部分が、地図ID(mid)です。
  5. GoogleマップをARに変換する
    最後に、地図IDを使ってGoogleマップをARに変換します。
    1. 以下のGoogleMap IDの枠内に、地図IDを入力して、[Convert to AR!]のボタンを押すか
    2. 別ウインドウで開く、以下のCGIページに接続して、地図IDを入力するか
      http://ar.miyakyo-u.ac.jp/cgi-bin/gmap2ar.cgi
    3. 次のように、?マークに続いて地図IDを入力してブラウザに貼り付けると
      http://ar.miyakyo-u.ac.jp/cgi-bin/gmap2ar.cgi?zMGTbS-sr-Og.kjsEJPO9FEhE
    うまくいくとARに変換後のダウンロードリンク,プレビューURL,QRコードが現れます。
  6. そこにあるURLを、AndroidのFirefoxに入力するか、QRコードリーダで読み取りFirefoxで開くと、スマートフォンのAR画面に、Googleマップで入力したポイントが現れます。 スマートフォンのAR画面を上スクロールすると、マップに入力した「ポイント」や「説明」が見えます。位置を移動した場合は、Firefoxでリロード(再読み込み)で現在位置を読み込んでください。
  7. データの著作権と維持時間
    このサービスは、公開されたGoogleマップのデータを読み取り、ARで読める形に変換することで成り立っています。 利用者のConvert!ボタンの操作により、Googleから本サーバに一時的にコピーされますが、著作権はGoogleとマップの作成者にあります。
    本サーバのデータは少なくとも1ヶ月は保持しますが、その後は消去されます。その場合は、再度変換しなおしてください。
  8. HTML5 Location Based ARに関しては、以下のサイトを参考にしました。
    1. MobiForge: HTML5 for the Mobile Web – a guide to the Geolocation API
    2. W3C: AUGMENTED REALITY COMMUNITY GROUP
    3. GitHub: dontcallmedom/html5-augmented-reality

How to make a Location Based AR with Google Maps

Markers in your "Google My Maps" will appear in smart phone AR.

  1. iPhone and iPad are not supported.
    It works Android Smart Phone only. Your suggestions to create IOS version are welcome.
  2. Download Firefox.
    We are using Android Firefox for development.
    If you do not have the Firefox, download.
    https://play.google.com/store/apps/details?id=org.mozilla.firefox
  3. Prepare Google Map and publish it.
    Please be sure to Share your map to PUBLIC, otherwise we cannot read it for conversion.
    Google: My Maps Help, Share a map
    Google: Get started with My Maps
  4. Confirm Google Map ID.
    You can find your map ID in browser location bar. If the URL is something like:
      https://www.google.com/maps/d/edit?hl=ja&authuser=0&mid=zMGTbS-sr-Og.kjsEJPO9FEhE
    then, the underscored part  zMGTbS-sr-Og.kjsEJPO9FEhE  is the Map ID.
  5. Convert Google Map to AR
    Convert Google Map to AR by using Map ID.
    1. Enter Map ID in following form and press [Convert to AR!]
    2. Enter Map ID in next CGI window.
      http://ar.miyakyo-u.ac.jp/cgi-bin/gmap2ar.cgi
    3. Enter Map ID followed by ?. Sample:
      http://ar.miyakyo-u.ac.jp/cgi-bin/gmap2ar.cgi?zMGTbS-sr-Og.kjsEJPO9FEhE
    Converted Data Download Link, Preview URL, QR code will appear.
  6. Type the URL to Android Firefox or Read QR Code with Reader Apps, then the markers in your "Google My Maps" will appear in your browser. By scrolling down, you will find the marker title and the description. When you move to another place, you must reload the page for read the current position.
  7. Copyright of the data and the cache period.
    This conversion service is made by caching shared Google Maps data in our server. Although conversion is conducted by your clicking, the Copyright is remaining in Google and the Map creator.
    The data will be cached at least one month. If deleted, convert again.
  8. Reference to HTML5 Location Based AR
    1. MobiForge: HTML5 for the Mobile Web – a guide to the Geolocation API
    2. W3C: AUGMENTED REALITY COMMUNITY GROUP
    3. GitHub: dontcallmedom/html5-augmented-reality

contact: