GoogleマップAPIの使い方

この記事は約5分で読めます。
記事内に広告が含まれています

こんにちは、さち です!

今回は Googleマップ API(Google 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 を取得する

コメント

  1. scik より:

    「Google Maps」とはGoogleが提供するオンライン地図検索サービスです。地図と検索が融合した素晴らしいオンラインツールです。世界中の地図と衛星写真を閲覧できます。ありがとうございます!

  2. 匿名 より:

    Googleマップ API で困っていました。沢山検索して来ましたがこちらが一番わかりやすかったです!どうもありがとうございました。

  3. さち より:

    コメント頂きありがとうございます。
    お役に立てたようでよかったです。

"),m.no_overlay||s.append("
");var c=s.find("img:first"),d=s.find("img:last");s.append("
");var l=s.find(".twentytwenty-handle");l.append(""),l.append(""),s.addClass("twentytwenty-container"),c.addClass("twentytwenty-before"),d.addClass("twentytwenty-after");var i=s.find(".twentytwenty-overlay");i.append("
"),i.append("
");var a=function(t){var e,n,i,a,o=(e=t,n=c.width(),i=c.height(),{w:n+"px",h:i+"px",cw:e*n+"px",ch:e*i+"px"});l.css("vertical"===r?"top":"left","vertical"===r?o.ch:o.cw),a=o,"vertical"===r?(c.css("clip","rect(0,"+a.w+","+a.ch+",0)"),d.css("clip","rect("+a.ch+","+a.w+","+a.h+",0)")):(c.css("clip","rect(0,"+a.cw+","+a.h+",0)"),d.css("clip","rect(0,"+a.w+","+a.h+","+a.cw+")")),s.css("height",a.h)},o=function(t,e){var n,i,a;return n="vertical"===r?(e-v)/p:(t-w)/f,i=0,a=1,Math.max(i,Math.min(a,n))};g(window).on("resize.twentytwenty",function(t){a(e)});var w=0,v=0,f=0,p=0,y=function(t){(t.distX>t.distY&&t.distX<-t.distY||t.distX-t.distY)&&"vertical"!==r?t.preventDefault():(t.distXt.distY&&t.distX>-t.distY)&&"vertical"===r&&t.preventDefault(),s.addClass("active"),w=s.offset().left,v=s.offset().top,f=c.width(),p=c.height()},h=function(t){s.hasClass("active")&&(e=o(t.pageX,t.pageY),a(e))},u=function(){s.removeClass("active")},_=m.move_with_handle_only?l:s;_.on("movestart",y),_.on("move",h),_.on("moveend",u),m.move_slider_on_hover&&(s.on("mouseenter",y),s.on("mousemove",h),s.on("mouseleave",u)),l.on("touchmove",function(t){t.preventDefault()}),s.find("img").on("mousedown",function(t){t.preventDefault()}),m.click_to_move&&s.on("click",function(t){w=s.offset().left,v=s.offset().top,f=c.width(),p=c.height(),e=o(t.pageX,t.pageY),a(e)}),g(window).trigger("resize.twentytwenty")})}}(jQuery)
タイトルとURLをコピーしました