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

man

困ってる人

HTMLで地図を貼り付けたい


こんにちは、よろと申します。

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

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

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

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

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

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

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

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

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

「HTMLをコピー」

今回コピーしたタグはこれ ↓

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

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

その場合は、先程コピーした、

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

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

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

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

これで終わり、

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

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

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール