HTMLとCSSで地図の埋め込みや貼り付け作成する方法｜グーグルマップ

困ってる人

HTMLで地図を貼り付けたい

こんにちは、ヨロと申します。

という事で今回は「グーグルマップ」を自分のサイトにHTMLで貼り付ける方法。

今回貼り付ける地図はこんな感じで、サイズは適当。

やる事自体はとても簡単なので、今回は軽く説明。

という事で、まずは「グーグルマップ」を開く

↓

次に、地図に載せたい場所を選択、

そうすると、地図上に赤いピンが立つ。

(今回は試しに、台湾のあるカフェを適当に選んでみました)

そうすると左側にその場所の詳細が表示されるので「Share」をクリック。

↓

そうしたら次に「Embed a map」をクリック

↓

「HTMLをコピー」

今回コピーした地図のHTMLタグはこれ（台湾にあるカフェ）

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3615.054996062686!2d121.50576728359157!3d25.032207624819936!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442a9a45dc3f973%3A0x8803d1052faa1b27!2sNameless+Coffee+%26+Roaster!5e0!3m2!1sen!2sjp!4v1558071657944!5m2!1sen!2sjp" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

これを、HTMLファイルに貼り付けて終わり。

ただ、地図を画面一杯に広げたい場合や、枠から地図がはみ出してしまう場合は、HTMLとCSSの編集が必要になる。

その場合は、先程コピーした地図のHTMLタグ

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3615.054996062686!2d121.50576728359157!3d25.032207624819936!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442a9a45dc3f973%3A0x8803d1052faa1b27!2sNameless+Coffee+%26+Roaster!5e0!3m2!1sen!2sjp!4v1558071657944!5m2!1sen!2sjp" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

ここの「width」と「height」部分を消し、frameborder=”0″ だけを残せばOK。

必要なければ、frameborder=”0″も消してOK。

その結果、HTML部分はこうなる。

<div class="map">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3615.054996062686!2d121.50576728359157!3d25.032207624819936!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442a9a45dc3f973%3A0x8803d1052faa1b27!2sNameless+Coffee+%26+Roaster!5e0!3m2!1sen!2sjp!4v1558071657944!5m2!1sen!2sjp" frameborder="0"></iframe>
</div>

そして、次にCSS部分はこれでOK

.map { /* ここの名前も適当につける(今回は.mapにしてみました) */
	width: 80%; /* サイズはここで適当に */
	height: 400px; /* サイズはここで適当に */
	margin: 0 auto; /* 要素を左右中央に */
}

/* ここで.mapの枠いっぱいに地図を広げる */
iframe {
	width: 100%;
	height: 100%;
}

これで終わり、

この時点でもし表示がおかしかったりする場合には、再度CSS部分を確認、

他のCSSの設定に邪魔されていないかなどを確認してみるといいかも。