どうも!ウィリスです!
ブログやホームページなどでGoogleマップが埋め込まれているのをみたことありませんか?
地図の画像が張っているわけではなく、こんな感じで実際にGoogleマップが埋め込まれている感じです
この形式よくみますよね!
今回はグーグルマップをはてなブログに埋め込む方法を紹介します!
グーグルマップへ
まずはグーグルマップを表示させましょう
このようにグーグルマップが表示されます(PCでの表示)
![f:id:uxirisu:20170915044407p:plain f:id:uxirisu:20170915044407p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170915044407.png)
ここで左上の「Googleマップを検索する」という部分に目的の場所を入力します
場所検索する
正式な住所でもいいですし、 一般的に呼ばれている名前でもOKです
今回は例として「皇居」を目的場所としておきます
![f:id:uxirisu:20170915044411p:plain f:id:uxirisu:20170915044411p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170915044411.png)
この状態で地図のコードを取得します
コードを読み取る
ここがメインと言っていいでしょう
画面左上のタブをクリックします
![f:id:uxirisu:20170915044415p:plain f:id:uxirisu:20170915044415p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170915044415.png)
すると、次のようなメニューバーが出てくるので
そこから「地図を共有または埋め込む」を選択します
![f:id:uxirisu:20170915044419p:plain f:id:uxirisu:20170915044419p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170915044419.png)
画面中央に次のような画面が登場するので
「地図を埋め込む」を選択します
![f:id:uxirisu:20170915044422p:plain f:id:uxirisu:20170915044422p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170915044422.png)
下画像の部分に表示されているコードが今回取得したいコードです
コピーしておきましょう
![f:id:uxirisu:20170915044426p:plain f:id:uxirisu:20170915044426p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170915044426.png)
はてなブログに埋め込む
お次ははてなブログを開きます
グーグルマップを埋め込みたい記事の編集画面を開きましょう
例としてこの記事の編集画面を表示してみます
この記事の最初の部分が表示されていますね
ここから「HTML編集」にしておきましょう
![f:id:uxirisu:20170916195427p:plain f:id:uxirisu:20170916195427p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170916195427.png)
「HTML編集」の状態で
グーグルマップを埋め込みたい場所に
先ほど取得したコードを貼り付けます
![f:id:uxirisu:20170916195432p:plain f:id:uxirisu:20170916195432p:plain](https://uxirisu.tokyo/wp-content/uploads/2019/05/20170916195432.png)
これで完了です!
念のためプレビューなどで確認してみてください
このような感じのGooglemapが表示されているはずです!
スポンサーリンク
スポンサーリンク