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

    CSSでBorder Radiusだけのコードを生成してくれるジェネレーター「CSS Border …

    CSSでBorder Radiusだけのコードを生成してくれるジェネレ…

  2. ブラウザでストップウォッチ

    Web Service

    ブラウザで手軽にストップウォッチが利用できるサービス

    ブラウザでちょっと何かの時間を計りたい時に役立つストップウォッチのサー…

  3. Web Service

    材料・時間・カロリー指定もできる「Google レシピ検索」

    Google レシピ検索という便利なサービスを試してみました。Goog…

  4. Web Service

    Chromeで手軽に電卓を使いたい時に便利な拡張機能「Calculator」

    Chromeでネットを閲覧中にちょっとした計算をしたいといった時がある…

  5. Hex Preview

    Web Service

    カラーコード(HEX値)を入力して色のプレビューを確認できる「Hex Preview」

    Hex Previewという便利なサービスを発見したのでメモがてらご紹…

  6. Web Service

    URLを入れるだけでレスポンシブなWebデザインを色々なデバイスで表示確認できる「The Respo…

    スマートフォンやタブレットなんかの色々なデバイスで表示確認することがで…

最近の記事

  1. 生ハム&モッツァレラチーズ サラダラップ
  2. コガネムシ
  3. ショルダーハム&5種の野菜サンドイッチ
  4. ジョン・リーチ マグカップ
PAGE TOP