HPに簡単に作成できる！Google mapを埋め込む方法5つ

公開日：2018/07/28　更新日：2019/08/09　

かつては画像ソフトなどでマップを切り抜いてHPに貼り付けていましたが、いまではGoogle mapという便利なツールがあります。しかも簡単に自分のHPに貼り付けができるんです。ユーザーはこのマップで簡単に位置の情報を得ることができる便利ツールなのです。

ブログに食レポを書いたり、おすすめのお店の案内でマップを埋め込んだり…といまやマップは欠かせませんよね。

でも簡単に設置できるといっても難しくないのでしょうか？そのやりかたはどのようにするのでしょうか？ご紹介致します。

Google mapの利用には「無料」「有料」の2つがある

まず、Google mapには、無料と有料があるのをご存知でしょうか？無料のイメージがあるGoogle mapですが、有料版になるとさらに機能を拡張して便利に使うことができるのです。

通常、多くの人がこの無料版を使っておられることかと思います。Google mapの無料版では、まずアクセスが制限されているサイトへのアクセスができません。具体的にはイントラネットの中やパスワードが必要なサイトなどのことを指します。これはかなり不便ですよね。

また、人や物の動態管理、すなわち動くものを追跡して管理しているサイトへのアクセスも無料版ではできません。

また同じGoogle のサービスでもストリートビューなどのJavaScript APIの使用が25,000回を越えるとマップが表示されなくなるなど、無料版での制限は多いです。

では、上記無料版にはない、Google mapの有料版のサービスにはどんなものがあるのでしょうか？

まず、上記にも記したイントラネットやパスワードを必要とするアクセスが制限されているサイトなどへのアクセス制限、動態管理に使っているサイトへのアクセス制限、そしてJavaScriptAPIの利用上限があるなど、ここぞというときに使いたいサイトで使えないのは本当にがっかりしてしまいますね。

このGoogle map platformという有料版サービスは、2018年6月に始まったばかりです。これはいままで18種類もあったGoogle mapのAPIが単純化され Maps、Routes、Places の3種類になったというものです。

これによってすでにGoogle map　APIを使用している人でプレミアムプランを持っている人は、特にコードを変更することなく、そのままで使うことができます。しかしスタンダードプランの人は、Trasition Toolからの変更が必要です。

有料版といっても、果たして料金は高いんだろうか？大変気になるところですね？でも実際は月に200ドル分までは、無料で使えるんだそうです。しかもプレミアムプランだとテクニカルサポートまでついています。

マップへのアクセス数で利用料が変わってきますが、専門的な業務に使うなどの以外で普通に使う分なら、大抵は無料分でまかなえるとのことです。この機会に有料版を体験してみるのもいいかも知れませんね。

なお利用料はGoogle Cloud Platform Consoleで確認できます。

なお、上記サイトから「割り当て」という項目をクリックすることで、料金無料の枠を超えないように設定することもできますよ。

では、実際にGoogle mapをホームページに埋め込む方法をご紹介します。ここではタグ利用とその応用編、Google Maps embed API利用編バージョンをご紹介したいと思います。

まずはシンプルな基本編からです。

まずはGoogle mapにアクセスをしてMapを表示させ 左側上の三本線 から あなたのサービスの名称 を入力して検索します。

出てきたサービスが正しい地図に立っているかを確認します。

次に埋め込みコードを取得します。それにはやはり 左上の三本線のメニュー をクリックして表示されたメニューから 「地図を共有または埋め込む」 を選んでクリックします。

次にHPのテキストモードにURLのスペースのところに表示されている 「埋め込みコード」 をコピー＆ペーストします。

こうすることで、自分専用の地図を作ることができ、大きさを選べるアイコンで場所を表示させることができるようになります。

次ページ：Google mapをホームページに埋め込んでみよう！（タグ利用・応用編）

1 2