今回はホームページにGoogleMapを埋め込む方法です。
店舗や事務所がある方は必須ですね^^
目次
ホームページにGoogleマップを埋め込む方法
ホームページにGoogleマップを埋め込む方法
まず埋め込みたいマップをGoogleMapで検索します。
通常の検索でもOKです。
今回はコワーキングスペースSHARESのマップを埋め込みますね。
まず
GoogleMapを開きます。以下のリンクをクリックしてください。
https://www.google.co.jp/maps/?hl=ja
左上の検索窓から「コワーキングスペースシェアーズ」と検索します。
シェアーズが検索できたら左の丸で囲んでいる「共有」をクリックしましょう。
※右側にはシェアーズがマップで表示されています。
「共有」をクリックすると新たなウィンドウが立ち上がってくるので、「地図を埋め込む」をクリック。
その後、「HTMLをコピー」をクリックしてください。
HTMLがコピーできたらGoogleMapを貼り付けるページにいきましょう。
例えばアクセスページを作成するなら新規固定ページ「アクセス」を作成しましょう。
貼り付けるページに移動ができたら、「+」のボタンをクリックしましょう。
「すべて表示」をクリック。
※カスタムHTMLをクリックするので、すでに一覧に表示されてあればクリックしてください。
「すべて表示」をクリックすると、左にメニューが出現するので、「カスタムHTML」を探してクリックしましょう。
「HTMLを入力」と表示されている枠の中に先程コピーしたHTMLを貼り付けましょう。
貼り付けるとこんな感じになります。何が書かれているかは気にしなくて大丈夫です。
無事表示されましたね。
Googleマップをレスポンシブに対応させる方法
一旦表示されましたが、ホームページのサイト幅いっぱいまで表示される用に調整してみましょう。
まず先程「カスタムHTML」に貼り付けたHTMLの部分を以下の用に修正します。
※貼り付け終わっても見た目は変わりません。
今度はCSSを貼り付けます。
※CSSは見た目を変える役割を持つコード。呪文みたいなものです^^
左のメニューから「外観」→「カスタマイズ」をクリック。
一番下の「追加CSS」をクリックします。
ここの真っ白の所に以下のコードをコピーして貼り付けます。
このコードをコピー&ペーストしてください。
うまく貼り付けられたら完成です!幅いっぱいに表示されました。
どうですか?うまく行きましたか?
自社サイトはマップはほぼ必須なので、こちらを参考に埋め込んでみましょう。