見出し画像

【学び】noteにGoogleマップを埋め込む方法

やり方の前に少し余談的な話をしているので、手順だけ見たい方は目次から”埋め込みのやり方”へ飛んでください。


はじめに

noteを初めて2年弱が経ちこれまでの記事は70本ちょい(たぶんまだまだ初心者)、ある程度noteを使いこなせてるのでは?なんて思っていましたが、まだまだ知らないことがありました。

いままで埋め込み機能というと、下のように過去記事を持ってきて紹介するのに使うぐらい。

あまり埋め込みの機能を活用することができていませんでした。そんなとき、note公式の埋め込みに関する記事に出会いました。この記事は、新たに埋め込みできるようになったサービスの紹介なのですが、本文中にあった埋め込めるサービス一覧のページへのリンク先でGoogleマップを見つけました。埋め込るサービス一覧のページはこちら

埋め込みのやり方

Googleマップを開く

記事に埋め込みたい場所を検索する
(経路の場合はルートを押して出発地・目的地を入力)

ブラウザの上側にあるアドレスバーからURLをコピー

noteの記事本文にペースト

改行

改行をするとこのようになります。もしかすると改行する前にペーストした時点で自動的に改行される場合もあるかもしれません。
選択した場所とその周辺を持ってくることができ、地図自体も触ることができるため、記事の中で周辺を見てもらうことも可能です。

少し試してみると、経路も埋め込めることがわかりました。
しかしなんだか拡大され過ぎ…?

その後何度か試していると原因が分かりました。地図が拡大されている状態でURLのコピーを行うと、拡大されていたものがそのまま表示されるみたいです。
表示する範囲を調整することで経路全体を表示させることができました。プレビュー機能で実際の埋め込み表示を確認しながら調整するとスムーズでした。

Googleマップの埋め込みが便利だったので、試しにグルメ記事に追記してみました。お店の紹介や観光など、何か特定の場所を示す場面や目的地までの経路を示すのに使えますね。
普段、旅行の記事を書くことが多いのでこれから活用してみようと思います!
みなさんもぜひお試しください!

もし説明がわからなかった!という方は、下の動画も参考にしてみてください。note公式の記事作成に関する動画内で、URLの埋め込みに関しての説明がありました。また、コメントでも可能な範囲で回答しようと思いますのでわからなかった方はぜひ。

#最近の学び #初心者

この記事が参加している募集

#noteの書き方

29,148件

#最近の学び

181,465件

この記事が気に入ったらサポートをしてみませんか?