Google mapをHP上に埋め込んでいるサイトはよく見かけますよね。
クリックするとGoogle mapに飛べるし、便利！
実はそれほど難しくないwww
クリック！！
前回までの記事
【制作過程公開】クリニック向けホームページデモサイト！！プラグイン・テーマについて
【クリニックホームページ作成】top画面の表示と「お知らせ」の設置
【クリニックホームページ作成】お問い合わせ＋reCAPTCHAの設定
【クリニックホームページ作成】予約画面作成
【制作過程公開】クリニック向けホームページデモサイト！！プラグイン・テーマについて
【クリニックホームページ作成】top画面の表示と「お知らせ」の設置
【クリニックホームページ作成】お問い合わせ＋reCAPTCHAの設定
【クリニックホームページ作成】予約画面作成
mapを埋め込む方法
まずは、Google mapのサイトにアクセスして、自分のクリニックの住所を検索します。
住所検索のみでは、クリニックの表示ではなく近隣の建物を表示してしまう時があるので、すでにクリニックがGoogleに認識されている場合には、Map上でクリニックを探してください。
その状態で、mapの共有ボタンをクリックします。
「地図を埋め込む」を選択して、HTMLをコピーを選んでください。
これを、wordpressのブロックエディタで「コードを埋め込む」に入れてやると、自動で反映されます。
よくあるデザインとしては、郵便番号や住所と２列にして配置し、スマホなどの場合には縦に配置されるというパターンです。
デモ画面も、同様に作成しています。
サイズ変更
コピーしたHTMLを見るとサイズが記載されていることがわかります。
「width=”600″ height=”450″ 」という部分です。
ここを変更することで、地図のサイズを変えることができます。
また、例えば、レスポンシブデザインにおいて（PCデスクトップやスマホなどに対応したデザイン）横サイズを常に100%にした場合には、「width=”600″ height=”100%” 」という表記に変更します。
わかりにくいところは、何なりと聞いてください。
わからないこと、質問などあれば下記のコメントフォームからお願いします
そもそも、「作って欲しい！！」と言う方は、こちらからご連絡ください！現在、モニター募集しています！！！
コメント・質問はこちらから
こちらも読んでみて
新着記事
【ポータブル電源】家族持ちなら即購入？ただし購入体験は最悪。
【買い！】echo show15の半年使用後レビュー
【保存版】顎骨壊死を懸念してビスホスホネート製剤の予防的休薬は不要！？
