ブログでは、Googleマップを挿入する

4

ブログでは、Googleマップを挿入する方法です。 ここで説明する方法は、Googleマップのサイトの 「地図埋め込み」ページを参照しています。 (グーグルマップUIは2015年7月末 現在のものです。)

ブログでは、Googleマップを追加する手順

1。 まず、 グーグルマップ サイトに移動して、目的の地域を検索します。
Googlemap search

2。 左上のメニューアイコンをクリックします。
Googlemap menu icon

3。 表示されるメニューから 「マップを共有するか埋め込み "を選択します。
Googlemap Share or Embed Map

4. 「地図埋め込み」を選択します。
Googlemap Embed Map including WordPress - ブログでは、Googleマップを挿入する

希望のサイズを選択し、コードをコピーして、Webサイトやブログのソースコードにコードを貼り付けます。

ちなみにUIが英語で出てくるメニューから 「Korean - 韓国語」を選択すると、UIが日本語に変わります。
Googlemap UI language

ちなみに反応型で、Googleマップを挿入するには、iframeの外部に別のclassをめぐる次のCSSで調整してくれればされます。

<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?...</iframe>
</div>

次のCSSを使用します。

.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
/* Source: ostraining

上記のように適用すると、Googleマップが携帯でも正しく表示されます。

参考

4のコメント

  1. 新しいGoogleのマップAPIの標準プランに基づいて2016年6月22日以降に作成されたすべての新規アプリケーションでは、Google Maps APIキーが必要です。 http://www.thewordcracker.com/basic/%EA%B5%AC%EA%B8%80-%EB%A7%B5-%EC%B6%94%EA%B0%80-%EC%8B%9C-%EC%98%A4%EB%A5%98%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EA%B2%BD%EC%9A%B0/ 文を参考にしてください。

  2. グーグルマップを挿入するときの言語を指定する場合は、次の記事を参照してみてください:
    http://www.thewordcracker.com/miscellaneous/%EB%B8%94%EB%A1%9C%EA%B7%B8%EC%97%90-%EA%B5%AC%EA%B8%80%EB%A7%B5%EC%9D%84-%EC%82%BD%EC%9E%85%ED%95%A0-%EB%95%8C-%EC%96%B8%EC%96%B4-%EC%A7%80%EC%A0%95%ED%95%98%EA%B8%B0/

  3. 場合でも、応じて、次のようなエラーが発生する可能性があります。

    申し訳ありません。 問題が発生しました、GOOGLEの地図が正常にロードされていない。 JavaScriptコンソールでの技術情報を確認してください

    この場合、 http://www.thewordcracker.com/basic/%EA%B5%AC%EA%B8%80-%EB%A7%B5-%EC%B6%94%EA%B0%80-%EC%8B%9C-%EC%98%A4%EB%A5%98%EA%B0%80-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EA%B2%BD%EC%9A%B0/ 文を参照して、問題の解決を試してみてください。

コメントを残す

コメントを入力してください!
名前を入力してください