グーグーグルマップを簡単にホームページに埋め込む方法

初めてのHP作成の動画使ってはいけない企業系HP作成ソフト

 

無料ツールソフトの使い方ホームページの作り方Hpで集客する方法グーグルサービス
 
高齢者のホームページの作り方SEO基本編SEO実践編バナー用下地素材よくある質問
 

ホームページにグーグルマップを簡単、綺麗にに表示させる方法1

 

グーグルマップは簡単にホームページに埋め込みできます。

グーグルマップを使ったフォームでの地図作成について。

 

ディズニーランドのマップ表示例

 

1,グーグルマップを開きます。・・・https://maps.google.co.jp/

 

2,千葉県浦安市舞浜1-1・・・住所を下記画像の検索窓に貼り付けます。

 

グーグルマップ

 

 

3,検索ボタンをクリック

 

グーグルマップ

 

 

4,共有をクリック

 

グーグルマップ

 

 

5,地図を埋め込むをクリック

 

グーグルマップ

 

 

6,表示されたフォームタグをコピーして管理画面に貼り付け

 

グーグルマップ

 

 

7,ディズニーランドの地図のフォームタグ

 

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d25942.050537645908!2d139.8666237477316!3d35.6337334633802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60187d1047835c47%3A0x89620b95c4d7f418!2z44CSMjc5LTAwMzEg5Y2D6JGJ55yM5rWm5a6J5biC6Iie5rWc!5e0!3m2!1sja!2sjp!4v1484843927600" width="100%"; height="450" frameborder="0" 
style="border:0" allowfullscreen></iframe>

 

フォームタグで、地図の横幅をwidth="100%"で指定しておくと、スマホの画面の縦、横で見た場合どちらでも綺麗に横幅いっぱいで表示されます。

 

パソコン表示ではメインコンテンツの幅である610px程度で表示される事になります。

 

ホームページにグーグルマップを簡単、綺麗にに表示させる方法2

 

下記でご紹介している方法は、2016年6月グーグルの規定変更で、APIの設定が必要になり、下記コンテンツの方法だけでは表示されなくなりました。APIの設定は現在バグなどもあり、ご紹介できません。また新しい情報が揃いましたら、ご紹介します。

 

2016年6月以前に作成された方は、問題なく利用を継続する事ができます。

 

グーグルマップをカッコよく埋め込む方法。

スクリプトで表示させる方法。

 

こんな感じでホームページで表示させる事ができるサイトを、ご紹介します。

 

このグーグルマップは、仮に作成したものですが、画像リンクや社名から自由に
他のホームページへも飛ばすことができます。
(画像は表示させない事もできます。)

 

 

ご覧通り、ホームページリンクやメールアドレスURL、住所、
電話番号もまとめて綺麗に表示させる事ができるので、
大変便利なダウンロード不要のツールとなっています。

 

慣れれば5分で設定完了!グーグルマップの埋め込み方法!

 

まず、コチラのサイトを開いて下さい。

http://www.egmap.jp/create.htm

 

グーグルマップ埋め込み手順-1

サイドバーのステップ1からです。

 

グーグルマップ上で表示させる位置の
住所を記述します。

 

右に表示される地図で、直接指示
できますので、微調節が必要な方は
こちらの操作で。

 

 

ステップー2

グーグルマップ埋め込み手順-2

 

地図の大きさの設定なのですが、
大体2カラムのホームページで、
400〜500PXくらいだと思います。

 

この設定は、地図をサイトに埋め込んだ
後でも変更できます。

 

「マウスホイールで拡大縮小」の設定が
ありますが、コチラは「設定しない」を選択しておいた方が良いです。

 

閲覧者さんが、サイトをスクロールした場合、地図が拡大されて(スベル)しまいますので、ユーザビリティに欠けるからです。

 

「ふき出しの初期表示」を、「表示する」にチェックを入れます。

 

「地図の場所を示すアイコン」は、お好きな矢印にチェックを入れます。

 

 

ステップ-3

グーグルマップ埋め込み手順-3

会社名から順番に記述します。

 

ここで記述した、会社名画像URLが、記述したサイトURLにリンクします。

 

メールアドレスもリンク表示になり閲覧者様のメールソフトが自動で開きます。

 

画像URLを指示した場合は、地図の吹きだしの横に画像が表示されます。

 

上記の私が作成した地図の例では、画像が右になります。

 

この場合は当然画像をサーバーにアップする必要があります。

 

その際の画像URLの作成方法ですが、あなたの作成したホームページのURLにスラッシュを付けて、その横に画像の名前を記述します。

 

上記の例では、、、、

 

http://softsate.info/img/prof.png
サイトURL/画像フォルダ名/画像名(・・・.jpg)

 

上記はシリウスの場合の例です。シリウスの場合は画像がimgフォルダの中に
入っていますので、img/prof.pngとなります。

 

「最短ホームページテンプレート」をお使いの方で、画像フォルダを使用せず、index.htmlと同じ階層に画像を直接アップロードした場合は、例として、、、

 

http://softsate.info/prof.pngっとなります。

 

画像の大きさですが、上記の例のプロフィール画像の大きさが95×95です。
これは、埋め込み後に大きさを変更できないので、あらかじめ適切な大きさに加工
してから、アップロードします。画像の加工は下記を参考にして下さい。

 

無料画像加工ソフト・・・・・ジェイトリムダウンロード
説明サイト・・・・・・・・・やさしいジェイトリムの使い方
ジェイトリム公式サイト・・・ジェイトリム

 

 

ステップー4

グーグルマップ埋め込み手順-4

 

上記までの設定が完了しましたら、
ホームページ上での表示を確認する事ができます。

 

赤いバナー「地図のタグを生成」
ボタンでソースが下に表示されます。

 

クリックしますと、青反転しますので、そのままコピーして、あなたのホームページに貼り付けます。

 

なお、貼り付け後に、会社名、住所、TELなど設定した項目の変更が可能なので、表示後に間違いがあれば、ソース上で修正して下さいね!

 

グーグルマップの埋め込み方法については以上ですが、次の注意事項をご確認しておいて下さい。

 

・・・・・シリウスの場合は必須です。・・・・・

 

 

注意事項

 

グーグルマップの地図が表示されない場合は、生成したソース
noReturnで囲ってください。下記ご参照!

 

■地図埋め込みスクリプト対応タグ

<noReturn>
先ほど作成したグーグルマップの埋め込みソース
</noReturn>

 

シリウスのタグ生成機能で、このノーリターンを挿入する方法

 

@ グーグルマップのソースは、十数行で生成されると思いますが、
<noReturn>でそのソースを全部囲います。

A マップソースを全選択(青色反転)

B 右クリック

C 「タグ挿入」をクリック(上から3番目)

D 「改行無視エリア」をクリック(下から2番目)

これで<noReturn>タグに自動で囲まれますので、
ホームページをアップロードして確認して下さい。
プレビューでも確認できるはずです。

 

0円のマップ屋さんお世話になりました。ありがとうございます。
以上ホームページグーグルマップを挿入する方法でした。

 

がんばって挑戦してみてくださいね!

 

このページのトップ

 

FAQ一覧にもどる

トップページにもどる

 

 

トップページ ソフトの概要 Hp公開の方法 アクセス解析 特典のご案内 購入者メルマガ お問い合せ