【クリニックホームページ作成】Googleマップの埋め込み

Google mapをHP上に埋め込んでいるサイトはよく見かけますよね。

クリックするとGoogle mapに飛べるし、便利!
実はそれほど難しくないwww



クリック!!

クリニックのデモHP画面はこちら



mapを埋め込む方法

まずは、Google mapのサイトにアクセスして、自分のクリニックの住所を検索します。

住所検索のみでは、クリニックの表示ではなく近隣の建物を表示してしまう時があるので、すでにクリニックがGoogleに認識されている場合には、Map上でクリニックを探してください。

その状態で、mapの共有ボタンをクリックします。

「地図を埋め込む」を選択して、HTMLをコピーを選んでください。

これを、wordpressのブロックエディタで「コードを埋め込む」に入れてやると、自動で反映されます。

よくあるデザインとしては、郵便番号や住所と2列にして配置し、スマホなどの場合には縦に配置されるというパターンです。

デモ画面も、同様に作成しています。

サイズ変更

コピーしたHTMLを見るとサイズが記載されていることがわかります。

「width=”600″ height=”450″ 」という部分です。

ここを変更することで、地図のサイズを変えることができます。

また、例えば、レスポンシブデザインにおいて(PCデスクトップやスマホなどに対応したデザイン)横サイズを常に100%にした場合には、「width=”600″ height=”100%” 」という表記に変更します。



わかりにくいところは、何なりと聞いてください。


クリニックのデモHP画面はこちら


わからないこと、質問などあれば下記のコメントフォームからお願いします

そもそも、「作って欲しい!!」と言う方は、こちらからご連絡ください!現在、モニター募集しています!!!

コメント・質問はこちらから

    メールアドレスが公開されることはありません。*印が付いているものは必須です。


    新着記事

    【読書】1%の努力 【読書】人は聞き方が9割 【アプリ化】SRS質問票とGoogle スプレッドシートを紐付けして自動集計