Seesaaブログの記事にGoogleマップの地図を埋め込む

皇居:東京メトロ沿線

Seesaaブログでは記事投稿画面の文字装飾アイコンにある [地図] ボタンより地図を記事に貼り付けることができますが、この地図はYahoo!地図を利用しています。
※文字装飾アイコンにある [地図] ボタンによる地図の貼り付け方法はこちらのヘルプをご利用ください。

記事にGoogleマップの地図を埋め込みたい場合にはGoogleマップからHTML埋め込みコードを取得する必要があります。

今回はGoogleマップの地図を記事に埋め込む方法をご紹介します。


地図を埋め込むためのコードを取得する

まずはGoogleマップで地図を埋め込むためのHTML埋め込みコードを取得します。

  1. Googleマップにアクセスします。
  2. Googleマップが表示されたら [Googleマップを検索する] のテキストボックスに検索した場所や住所を入力し [Enter] キーを押すか虫眼鏡マーク(赤枠)をクリックします。
    ※今回は「シーサー株式会社」と入力します
  3. 手順2で入力した場所の情報が表示されたら [共有] (赤枠)をクリックします。
  4. ボックスが表示されたら [地図を埋め込む] (赤枠)をクリックします。
  5. 表示が切り替わったら、希望の埋め込みサイズを選択し、HTML埋め込みコードをコピーします。
    ※画像は「中」を選択したときのサイズです

記事に地図を埋め込む

HTML埋め込みコードを取得したら実際の記事に貼り付けていきます。

  1. マイブログにログインしたら [新規投稿] をクリックします。
  2. 新規投稿画面が表示されたら、適宜記事のタイトル・本文を入力します。
  3. 本文の地図を埋め込みたい場所にカーソルを合わせます。
    ※必ず画像を貼り付けたい位置にカーソルが点滅していることをご確認ください。
  4. 先ほどコピーしたHTML埋め込みコードを貼り付けます。
    ※手順3でカーソルを合わせた位置にHTML埋め込みコードが表示されていることをご確認ください。
  5. 各サイズのHTML埋め込みコードと地図の実サイズは以下の通りです。

    埋め込みサイズ:小(400×300)

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.8115611268277!2d139.70439511528767!3d35.65701408019993!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ca7854b49f7%3A0x2a5b91a16f1bce27!2z44K344O844K144O85qCq5byP5Lya56S-!5e0!3m2!1sja!2sjp!4v1461771761100" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
    

    埋め込みサイズ:中(600×450)

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.8115611268277!2d139.70439511528767!3d35.65701408019993!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ca7854b49f7%3A0x2a5b91a16f1bce27!2z44K344O844K144O85qCq5byP5Lya56S-!5e0!3m2!1sja!2sjp!4v1461771761100" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    

    埋め込みサイズ:大(800×600)

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.8115611268277!2d139.70439511528767!3d35.65701408019993!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ca7854b49f7%3A0x2a5b91a16f1bce27!2z44K344O844K144O85qCq5byP5Lya56S-!5e0!3m2!1sja!2sjp!4v1461774006223" width="800" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
    

  6. 記事作成が終わったら新規投稿画面にある [保存] ボタンをクリックし作成した記事を保存します。

貼り付ける地図のサイズ調整

PC版ブログでは、上の「埋め込みサイズ:大」のようにブログに設定されているデザインによっては埋め込んだ地図がはみ出してしまう場合があります。

Googleマップの埋め込みサイズには「カスタムサイズ」があり、そちらでお好みのサイズに調整した地図を埋め込むことが可能です。

カスタムサイズ(例:300×225)

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.8115611268277!2d139.70439511528767!3d35.65701408019993!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ca7854b49f7%3A0x2a5b91a16f1bce27!2z44K344O844K144O85qCq5byP5Lya56S-!5e0!3m2!1sja!2sjp!4v1461777608076" width="300" height="225" frameborder="0" style="border:0" allowfullscreen></iframe>

また、GoogleマップでコピーしたHTML埋め込みコードをそのまま貼り付けただけでは、スマートフォンやタブレットに最適化されたサイズに自動調整されません。

そのため、スマートフォンなどで表示した際に地図のサイズを自動調整させる場合は、以下の要領でCSSをカスタマイズする必要があります。

  1. マイブログにログイン後、[デザイン] > [PC] および [スマートフォン] > [デザイン設定] と順にクリックします。
    ※従来のデザインシステムでは、[デザイン] > [スマートフォン] > [デザイン一覧] でも同様の設定を行います。
    ※必ずPC版とスマートフォン版の両方に設定してください。
  2. デザイン設定画面が表示されたら、ブログに設定されているデザインのタイトル名をクリックします。
  3. スタイルシート編集画面が表示されたら、以下のソースコードを貼り付けます。
    ※どこに貼り付けても問題ないですが、分かりやすいように一番下に貼り付けます。
    /* 地図サイズの最適化 */
    .map {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    }
    .map iframe,
    .map object,
    .map embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    
  4. 上のソースコードを貼り付けたらスタイルシート編集画面の [保存] ボタンをクリックします。

CSSの編集が終わったら、実際の記事投稿で地図を貼り付ける際、GoogleからコピーしたHTML埋め込みコードをそのまま貼り付けず、以下のように<div>タグで埋め込みコードを囲います。

<div class="map">
GoogleからコピーしてきたHTML埋め込みコード
</div>

実際にGoogleマップから「埋め込みサイズ:中」のHTML埋め込みコードをコピーし、<div class="map">で埋め込みコードを囲って貼り付けた地図が以下の通りです。
※スマートフォンやタブレットでご覧ください。

スマートフォン最適化


まとめ

いかがでしたか。
ちなみに地図サイズのスマートフォン最適化については、あらかじめCSSをカスタマイズしておくことで記事投稿画面の文字装飾アイコンにある [地図] ボタンより貼り付けることができるYahoo!地図にも適用することができます。

※以下の地図は「渋谷駅」でランドマーク検索して、サイズを「大:480x320」にしたものです。

<div class="map">
<script type="text/javascript">var YMapConfig={"datum":"","layer":4,"lat":35.65524864205892,"lon":139.70498603737303,"height":"320px","width":"480px","id":"YMap-bb2b1","mode":"map"};</script><script type="text/javascript" src="http://blog.seesaa.jp/js/yahoo_maps.js"></script><div id="YMap-bb2b1">[ここに地図が表示されます]</div>
</div>
[ここに地図が表示されます]

記事に地図を貼り付ける際にぜひご活用ください。