SYNCERのロゴ
アイキャッチ画像

Google Maps API

ウェブサイトに地図を設置したい時に便利な、Google Mapsの各APIの使い方をまとめています。用途に応じて使い分けましょう。

Google Maps JavaScript API

JavaScript APIはその名の通り、地図をJavaScriptで自由に操作できるAPIです。表示するだけではなく、ユーザーの操作に応じて様々な応答をしたい時に有用です。利用するにはJavaScriptの基本的な知識が必要です。

Google Maps JavaScript API
アイキャッチ画像
Google Maps JavaScript APIの使い方を、初心者にも分かるようにまとめています。

デモ

地図をクリックするとマーカーを設置でき、マーカーをクリックすると消せます。特に意味はありませんが、このような、開発者が考えた好きな機能を自由に地図に持たせられます。

Goole Maps Embed API

Embed APIは、iframeにurlを指定するだけで利用できる地図です。プログラムの知識が不要な分、手軽ですが、JavaScript APIに比べて自由度は低いです。

Google Maps Embed API
アイキャッチ画像
iframeにurlを指定するだけで地図が埋め込むことができるGoogle Maps Embed APIの使い方を、初心者向けにまとめてあります。

デモ

スポットの場所を表示する、などのシンプルな用途なら、JavaScript APIではなく、こちらのEmbed APIの方が有用です。

Google Static Maps API

Static Maps APIは、地図の画像を出力するAPIです。ルールに従ったurlを、img要素のsrc属性に指定するだけで利用できます。

Google Static Maps API
アイキャッチ画像
地図の画像を出力できる、Google Static Maps APIの使い方を、初心者にも分かるようにまとめてあります。

デモ

地図の画像を表示しています。操作は一切できませんが、大量のライブラリを読み込む他のAPIに比べて、通信量やブラウザへの負担がないので、ユーザーに優しいです。

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2015年9月1日 (火)
コンテンツを公開しました。