ホームページに地図を貼る方法と作り方-Googleマップ

ホームページに地図を簡単に貼る方法(Googleマップ)




LINEで送る
Share on LinkedIn
Pocket

会社のホームページや自分で運営しているウェブサイトのアクセスページなどに地図(今回はGoogleマップ)を貼る方法とマップの作り方についてご紹介します。

 

 

こんな感じの地図を作ります。

ホームページに地図を簡単に貼る方法(Googleマップ)

↑こんな感じの地図を作ります。(地図をクリックすると、ページに貼り付けた地図の感じがわかります。)

 

 

作成の手順

 

ここから無料地図作成のページをひらきます。

すると、左側にこんな感じのがありますので、ここに必要事項を入力して地図を作っていきます。

 

②必要事項の入力

ホームページに地図を簡単に貼る方法とマップの作り方

地図を表示させたい住所を入力するか、施設名で検索、地図上の目的地をクリックして、地図を表示させる場所を指定します。

 

ホームページに地図を簡単に貼る方法とマップの作り方

地図の横幅と高さ

地図の横幅と高さは、筆者の場合、スマホでもパソコンでも画面内に問題なく表示されるのが300pxだったので、300px,300pxの正方形に設定した。これ以上大きくすると画面からはみ出てしまうかもしれない。

 

マウスホイールで拡大縮小

「拡大縮小する」にチェックしておくと、地図が動かせる。「拡大縮小しない」にチェックすると、地図が固定される。

 

ふき出し

筆者は「表示する」にしている。

 

位置表示アイコン

ここですよーという、位置を表示するアイコン。

筆者は指定していないが変えたい場合はここの中で選ぶか、好きな画像が置いてある場所のURLを記述する。

 

ホームページに地図を簡単に貼る方法とマップの作り方

ふき出しに表示される部分です。希望する会社名や住所などを入力します。

※ここは入力しなくても地図はできます。

※「画像URL」を入力すると、ふき出し部分の上部に画像が表示されます。筆者が未入力で作成している。

 

ここまで出来たら

地図の表示を確認」をクリックしてどんな感じで地図ができてるかチェックします。これでOKだったら「地図のタグを作成」をクリックします。

 

 

ホームページに地図を簡単に貼る方法とマップの作り方

「地図のタグを作成」をクリックすると、このようにソースコードが出てきます。このソースをコピーします。

 

 

③作った地図をホームページに貼る

このソースをコピーして、地図を貼りたい編集ページに移動します。

 

HTMLを記述できるページにペーストします。

 

 

ワードプレスでの貼り付け方

ワードプレスの場合「ビジュアルエディタ」と「テキストエディタ」がありますが、テキストエディタで記述できるモードにしてから、希望の場所に先ほどコピーしたソースを貼り付けます。貼り付けたら、「プレビュー」をクリックして地図が貼られているかチェックしてみてください。

 

※ワードプレスで地図を貼り付けて記事のレイアウトが崩れてしまう方は「WordPress記事のレイアウト崩れを回避解決する方法」をご確認ください。

 

LINEで送る
Share on LinkedIn
Pocket

よく読まれている記事




ホームページに地図を簡単に貼る方法(Googleマップ)

コメントを残す

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

ABOUTこの記事をかいた人

嶋耕作

ライター、自主制作アニメも作ったりしている。自身が主催してきたイベント企画で培った集客運営等のノウハウを使ってサイトやYouTubeなどメディア運営のサポートを行っている。