このサーバーにサンプル設置

経度と緯度の確認

Google Maps 使ってみて合点

鈴鹿サーキットを走ろう

  • 使い方:浦安の場合
  • 上のURLに入る
  • 下記の文をアドレスに貼り付けて、あとは知らせると「浦安を走ろうになる」
    javascript:void(map_x=139.9134635925293);void(map_y=35.650182553425296)

Google Local と Froogle

  • Froogleの商品情報検索サービスに,店舗の地図情報を加えた形で提供するというもの。例えば検索語に「iPod Nano」と入れると検索結果画面では,左側にiPod Nanoを取り扱っているニューヨーク市内の店舗と商品情報が,右側には各店舗の位置を示す地図が表示される。ユーザーがすぐに商品を欲しいときや,衣料品など試着してから購入したいもの,家具など送料が高くつくものの場合,近くの店を探せて便利とGoogle社は説明している。
  • http://froogle.google.com/
  • さらに 上記の画面で 「restaurant near tokyo」といれ、Local を押すと 地図上にレストランが表示される」。Mapとの連携である。

文字コード

  • GMapsを作る際の文字コード
    • Google Maps APIを使うには文字コード:UTF-8。
    • Shift_JISとかでソースファイルを作ってしまった場合、APIを呼び出す箇所を変更
    • 変更前
      <script src="http://maps.google.com/maps?file=api&v=1&key=YOURKEY" 
      type="text/javascript"></script>
    • 変更後
      <script src="http://maps.google.com/maps?file=api&v=1&key=YOURKEY" 
      type="text/javascript" charset="utf-8"></script>
  • METAタグも書く
    <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

GoogleMap API まず、アカウントとAPIキーの取得

  • サイトで Google Mapps API を用いた Googleマップ を組み込む場合、最初の1回だけ Google に登録
    • マップ上のロゴやクレジット表記を変更できません。
    • 将来、広告が掲載されることがあります
    • 商用、非商用どちらでも利用可能
  • 1.アカウントの取得
    • Google アカウン取得のページ
    • E-Mailとパスワード(2回)など入力
    • 入力したE-Mail宛に、認証用のURLが届きます。そのページを開くと、アカウント登録完了
  • 2.APIキー取得
    • Google Maps APIサインアップで一番下のフォームで利用規約に合意。
    • My Web Site URL に利用するディレクトリを入力。申告するディレクトリとその下位で有効になるらしい
    • ボタンをクリックすると、即APIキーが発行され、対象URLとキーが表示される
    • また、スクリプトのサンプルが表示される
  • 3.取得ディレクトリにスクリプトを設置
    • スクリプトのサンプルでテスト
    • 一部修正 : UTF-8 とする
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    • URLで対象ディレクトリーを呼び出し、表示されればOK

 次に、本番スクリプトの設置

お勧めスクリプト

参考


トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-08-17 (金) 13:45:00 (2110d)