ブログ記事にGoogleMapを埋め込む方法と縮尺サイズ変更方法

GoogleMapをブログ記事に埋め込む方法。忘れないよう備忘録メモ。

いちいち調べてもいいんだけど、割りと自分が欲しい情報がまるっとまとまったページが見つからなかったので。

自分の指したい場所にピンを立てた地図を埋め込みたい時など。

地図（マイマップ）を作成

①GoogleMapを開く

②ログインする

③左上の三みたいなマークをクリックしてメニューを開く

④『マイマップ』をクリック

⑤下に出てくる『地図を作成』をクリック

これで、無題の地図　という自分用の地図が作成される。

地図（マイマップ）にポイント（マーカー）とルートを追加

ポイント（マーカー）を追加

・ツールバーの『マーカーを追加』を地図にドラッグ

・検索して出てくる緑のピンをクリック→地図に追加

ルートを追加

①ツールバーの『ルートを追加』を押す

②左側メニューに出発地と目的地を入力orで自動的にルートが追加

道路上に任意ラインを引く

①ツールバーの『ラインを描画』を押す

②出発地をクリック

③目的地をクリックで自動的にルートが追加

ただし、途中道路をクリックすることで任意に道順を選択できる。

これを使えば、最短以外のルートや自分が実際に通ったルートなどを表示できる。

地図（マイマップ）に距離・面積を追加

①ツールバーの『距離やエリアを測定』を押す

②出発地をクリック→各場所をクリック→最終地点でダブルクリックで距離が表示

最後を出発地にする場合、１回のクリックで面積と距離が表示

埋め込みコードの取得

①灰色の部分の右をクリックしてメニューを開く

②自分のサイトに埋め込むをクリック

『この地図は公開されていません〜』と出た場合は、共有ボタンをクリックして公開範囲を全体に公開に変更

③表示されたコードをhtml編集画面にペースト

縮尺サイズ等の変更

貼った地図を任意にズームさせたかったり、貼り付ける地図自体の大きさを変えたい時用のメモ。

以前私が作成したマイマップの埋め込み用コードがこちら。

このコードをいじることで縮尺とサイズを変更可能。

縮尺変更

iframe src="https://www.google.com/xxxxxxxxxxxxx"　の『xxx』のケツに『&z=数字』を追加することで、縮尺を指定可能。

例

数字は0〜20を入力可能で、大きいほどズーム、小さいほど引き。

縮尺は&z=5だとかなり遠い。&z=10わりといい感じ。&z=15だとかなりでかい。

数値は10付近で調整するのが良さそう。

&z=5

&z=10

&z=15

地図サイズ変更

width="640" height="480"

の数字の部分を変えることで埋め込む地図自体のサイズを変更可能。

widthが横幅、heightが縦幅。

これは絶対値なので、自分のサイトデザインと相談して決定。

怠いので一切スクショ等を用いなかったため相当見応えのないものになってしまった。

おわり

マナラモイストウォッシュゲル

ゆとりニートの日記

理系院卒⇛就職⇛１年で退社。ノースキルでノージョブなゆとり世代ニートの日記。