このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなきゃ損するPC情報を分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Windows:「よく使われるアプリを表示する」が操作不能になった (04/28)
  • VLCプレイヤー:動画の「コマ送り」がしたい (04/26)
  • Windows:ごみ箱内に1ヶ月残っているファイルを自動削除 (04/24)
  • Windowsをアップデートしたら「コントロールパネル」が消えた (04/21)
  • Windows:ブルーライトを軽減する「夜間モード」を使ってみる (04/19)
  • 管理人より
    2200万アクセス突破しました。ありがとうございます。

    GoogleマップAPIの使い方

    このエントリーをはてなブックマークに追加
    こんにちは、さち です!

    今回は Googleマップ APIGoogle Maps API)について
    自分で調べてみたことを自分なりにまとめてみようと思います。

    この記事が Googleマップ API を新たにはじめたいという人の参考になれば幸いです。


    1. Googleマップ API と Yahoo!マップ API の違い

    まずこの2つの違いについて簡単にまとめてみようと思います。

    項目 Googleマップ API Yahoo!マップ API
    コーディング機能 なし あり
    利用できるサイト どこでもOK Yahoo!のサイトのみ
    ヒット数制限 一日5万ヒットまで 制限なし
    ネット上の情報 多い 少ない

    Google と Yahoo! の比較で一番のネックになるのは利用できるサイトではないでしょうか?
    Yahoo! の サイトのみというのはちょっと使いづらいです。
    というか私は Yahoo! のサーバのサイト持ってないですし。
    というわけで Googleマップ API を使うことにしました。


    2. Google マップ API の仕様

    Googleマップ API はJavaScript で制御できます。
    でも JavaScript が分からなくてもある程度制御できます。
    それはネット上に情報が多いのでその情報通りに作業を進めていけば
    大体のことは JavaScript が分からなくてもできるからです。

    他の言語を少しかじっている人は JavaScript もちょっと勉強すれば
    結構理解できるようになると思います。

    Googleマップ API は商用利用できないという誤解があるようですが
    実際には商用利用も可能なようです。

    もちろん条件があり
    「エンドユーザが無料でその Googleマップ API を利用しているサイトにアクセスできる」
    というのが条件だそうです。つまり
    「自由に誰でも無料で見ることができるサイトで Googleマップ API を使ってください」
    ということだと思います。

    昨今は閲覧が有料のサイトなんてほとんどないですから
    この条件に引っかかることはまずないと思います。


    3. APIキーの適用範囲

    Googleマップ API を使うにはここで APIキー を取得する必要があるのですが
    この APIキー の部分が調べていて一番分かりづらかったです。

    APIキー は使用するディレクトリ毎に取得しなくてはいけません。
    (取得にはGoogleアカウントが必要になります。アカウント取得は無料です。)
    例えば 「http://daredemopc.blog51.fc2.com/map/sample.html」 で
    Googleマップ API を利用しようとする場合には
    APIキー の申請は 「http://daredemopc.blog51.fc2.com/map」 で行います。
    「sample.html」 はディレクトリではなくファイルなので入れてはいけません。

    「http://daredemopc.blog51.fc2.com/chizu/test.html」で
    Googleマップ API を利用する場合は、また新しく
    「http://daredemopc.blog51.fc2.com/chizu」で
    APIキー取得の申請 をしなくてはなりません。

    APIキー は1つのアカウントで複数取得することができます。
    アカウントを作り直す必要はありません。

    また、「1.」で書いたヒット数制限5万ヒットというのはこの APIキー 毎のヒット数です。
    APIキーを2つ持っている場合は10万ヒットまで(ただし1つのAPIキーにつき5万ヒットまで)
    大丈夫ということです。

    APIキーを取得すると英語のページが表示されます。
    一番下のテキストエリアは JavaScript のサンプルコードです。
    これを htmlファイル にコピペするだけで地図が表示されます。

    JavaScript が分からないけど Googleマップ API を使いたいという人は
    このページの情報を丸ごと保存しておきましょう。
    特に一番上の API KEY はあとで必要になります。
    (ページをブックマークしておいても大丈夫みたいです)


    4. JavaScriptが分からなくても地図を自動作成

    JavaScript が分からなくても
    こちらGeekなぺーじ様のGoogle maps簡単作成ツールGMapCreatorを利用すれば
    簡単に思い通りの地図ができます。

    もっと細かく設定したい場合は同じく Geekなぺーじ様 で
    Googleマップ API JavaScript のいじり方を勉強しましょう。
    変更するところなどが太字で書かれていたりしてとても分かりやすいです。

    実際に作ってみたらこんな感じでできました。(作業時間5分未満)



    5.文字コードは UTF-8 で

    Googleマップ API を利用するHTMLファイルは UTF-8 で保存しましょう。
    それ以外の文字コードでは文字化けが起こります。

    既に SHIFT-JIS や EUC-JP などの違う文字コードで
    ホームページを作成してしまっていて文字コードの変更が難しい場合には
    インラインフレームタグを利用(iframe)して UTF-8 で保存した
    Googleマップ API のHTMLファイルを外部から読み込むようにすればOKです。


    PHP で Googleマップ API を操作する方法もあるようです。
       →デジットさんのGoogle Maps APIの利用(PHP)
       →phpでGoogle Mapsをカンタンに使う

    今回の記事を作成するにあたってこちらのサイト様のページを参考にさせていただきました。
    本当にありがとうございました。

       → Nature's Linux Tech (Google Maps API 1)
       → Geekなぺーじ (Google MAPS APIプログラミング)
       → earthhopper (2分でわかる Google Maps API)
       → Google Maps API の Key を取得する









    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら


    Google Maps
    「Google Maps」とはGoogleが提供するオンライン地図検索サービスです。地図と検索が融合した素晴らしいオンラインツールです。世界中の地図と衛星写真を閲覧できます。ありがとうございます!
    scik | 2009/08/07/Fri [EDIT]
    Googleマップ API で困っていました。沢山検索して来ましたがこちらが一番わかりやすかったです!どうもありがとうございました。
    名無し | 2010/10/18/Mon [EDIT]
    >>名無しさん
    コメント頂きありがとうございます。
    お役に立てたようでよかったです。
    さち | 2010/10/20/Wed [EDIT]



    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2017 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ