Web Service

Google マップの地図の埋め込みをするやり方

以前までGoogle マップの地図をサイト内に埋め込むには歯車アイコンをクリックしてから埋め込みしていましたが、いつのまにかやり方が変わっていたのでご紹介します。

久しぶりにGoogle マップを使ったときに「あれ、どこから地図の埋め込みコードを取得するんだっけ?」と迷う方がいるかと思うので(僕は迷いました……)少しでもお役に立てれば幸いです。

共有、またはメニューから埋め込みコードを取得できる

Google マップで目的の場所を表示すると左側にいろいろと詳細が表示されますが、ここにある「共有」から埋め込みコードを取得できます。

共有

あるいは左上のメニューから、

メニュー

「地図を共有または埋め込む」をクリックします。

地図を共有または埋め込む

クリックするとタブメニューが「リンクを共有」になっているので、ここを「地図を埋め込む」に切り替えます。

すると埋め込みコードが出てくるので、あとはこれをコピペすればOKです。

地図を埋め込む

埋め込む地図のサイズについて

デフォルトのサイズは中になっているので、もしサイズを変更したい場合は「中」の場所をクリックすると、小・中・大・カスタムサイズのなかから選択できます。

埋め込む地図のサイズ変更

  • 小(wight: 400px, height: 300px)
  • 中(width: 600px, height: 450px)
  • 大(width: 800px, height: 600px)
  • カスタムサイズ(好きな数値を指定可能)

小・中・大に使いたいサイズのものがない場合はカスタムサイズから好きな数値を指定すれば理想のサイズのマップを取得できます。

従来の歯車アイコンからの地図の埋め込みに慣れている方は、今回の変更でどこからコードを取得すればいいかわからなくなりそうですよね。

普段からよくGoogle マップの埋め込みをおこなっている方は、すでにご存知だと思いますが、たまにしか使わない方は、覚えておくと安心です。

というわけで、以上、Google マップの地図の埋め込み方法でした。

関連記事

  1. Web Service

    自分の興味にあったニュースや記事を推薦してくれる「Gunosy(グノシー)」を使ってみた

    自分の興味に合うニュースや記事を推薦してくれるGunosy(グノシー)…

  2. Web Service

    テキストや画像はもちろん!手軽にiPhoneからエバノートにメモできるアプリ「Tap2Ever」を使…

    出先でちょっとしたメモなんかをサクっとエバノートにアップロードできるi…

  3. EmChart

    Web Service

    CSSでフォントサイズをem指定する時に便利なEmChart

    レスポンシブWebデザインなどによりem指定をする機会が多くなってきて…

  4. Web Service

    CSSで多彩なエフェクトをつけることができるジェネレーター「CSSPainter」

    CSSで多彩なエフェクトをつけることができるジェネレーター「CSSPa…

  5. Web Service

    テキストのCSSを手軽に設定できる「CSS Type Set」

    ちょっと確認したい時なんかによさそうですね。フォントやフォンサイズなど…

  6. TodoistのChrome拡張機能

    Web Service

    TodoistのChrome拡張機能があったので使ってみた

    普段から使っているTodo管理サービス「Todoist」のChrome…

最近の記事

  1. リンツ リンドール
  2. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  3. ブラジルイパネマ

アーカイブ

PAGE TOP