Web Service

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

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

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

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

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

共有

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

メニュー

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

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

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

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

地図を埋め込む

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

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

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

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

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

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

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

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

「/(スラッシュ)」を「・(中黒)」に変更Macで「/(スラッシュ)」を「・(中黒)」に変更する設定方法前のページ

Photoshopで画像をウィンドウサイズにピッタリ合わせるやり方次のページPhotoshopで画像をウィンドウサイズに合わせる

関連記事

  1. Web Service

    ドラッグしたテキストを音声で読み上げてくれるChrome拡張機能「SpeakIt!」を使ってみた

    こういうの欲しかったのでかなり嬉しいです。ドラッグしたテキストを音声で…

  2. Web Service

    あとで読むサービス「Read it Later」をMacで快適に読むアプリ「ReadNow」

    iPhoneであとで読むアプリとしてRead it Laterを使って…

  3. Pocketのリスト並べ替え

    Web Service

    Pocket(Web版)で記事リストを最新から最古に並べ替える設定方法

    Web版(ブラウザ)のPocketで記事リストを表示させるとデフォルト…

  4. Responsive Design Bookmarklet

    Web Service

    レスポンシブなデザインを瞬時に確認する為のブックマークレット「Responsive Design B…

    シンプルですが、かなり便利なブックマークレットを見つけたのでご紹介しま…

  5. Web Service

    現在のブラウザサイズをリアルタイムで教えてくれる「What’s My Browser S…

    かなりシンプルでよさげなWebサービスがあったのでご紹介します。現在の…

  6. TodaysList

    Web Service

    シンプルで美しいToDoリスト「TodaysList」

    とてもシンプルで美しいToDoリストを発見したのでご紹介します。「To…

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP