見出し画像

Maps JavaScript API とは?一番簡単な地図の貼り付け方

記事は3部に分割しています。
Step1 : 一番簡単な地図の貼り付け方
Step2 : Maps JavaScript APIを使って地図を描画する方法
Step3 : 現在地を中心に地図を描画する方法

Maps JavaScript APIとは?

ウェブアプリ用に動的でインタラクティブな地図、位置情報、地理空間のエクスペリエンスを作成し、高度にカスタマイズできるようにするための便利なAPIのこと

便利なAPIとは?

地図の表示をカスタマイズしたり、指定した場所にピンを置いたり、ルート検索したり、いつも使ってるgoogle mapの機能を自分のサイトに埋め込んで使えるようにするためにGoogleが提供しているAPIのこと
(普段使ってるgoogle mapの機能が全て使えるわけではない&全部無料で使えるわけではない)

具体的にMaps JavaScript APIでどんな事ができるの?

公式サイトを見てみる

単純に地図を埋め込むとはどう違うの?

便利なAPIが使えるかどうかの違い。ただ単純に地図をサイトに埋め込みたいだけだったら <iframe> を使えばOK

iframeを使った地図の埋め込み方

  1. google mapを開いて、【共有】ボタンをクリック

  2. ポップアップウィンドウ内にある【地図を埋め込み】タブをクリック

  3. 【HTMLをコピー】をクリックして、自身のサイトのHTMLに貼り付ける

次の記事(Step2 : Maps JavaScript APIを使って地図を描画する方法)を見る

この記事が気に入ったらサポートをしてみませんか?