初めてのホームページ作成で見る動画

 

便利な無料ソフトと便利サイト一覧サイト作成ソフトシリウス、最短HPテンプレートの使い方解説お店、企業用ホームページの作り方ホームページで集客し、売り上げを延ばす方法グーグルの無料サービス一覧
HP作成 超初心者、高齢者講座サイト作成のFAQ記事一覧SEO対策実践編SEO対策基本編トップバナー用無料下地画像素材集

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

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

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

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

 

グーグルマップを開きます

グーグルマップ

https://maps.google.co.jp/

 

千葉県浦安市舞浜1-1

住所を下記画像の検索窓に貼り付けます。

 

グーグルマップ

 

検索ボタンをクリック
 

グーグルマップ

 

共有をクリック
 

グーグルマップ

 

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

グーグルマップ

 

フォームタグをコピーして管理画面に貼り付け
 

グーグルマップ

 

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

<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程度で表示される事になります。

 

グーグルマップ最適表示

シリウスでは右画像のように、マップのタグを青色反転させてから、管理画面で右クリック「パーツの挿入」を選択

 

「Googleマップのタグ」をクリックで携帯端末でマップが最適表示されます。

 

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

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

 

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

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

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

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

 

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

 

 

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

 

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

ステップ-1

0円のマップ屋さん

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>

 

シリウスは2018年4月のバージョンアップで、地図が最適表示されるタグを管理画面上の右クリックの操作で簡単に出来るようになりました。

  1. 管理画面上で右クリック
  2. パーツの挿入
  3. Googlemapのタグ

で完了します。

 

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

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

 

  1. マップソースを全選択(青色反転)
  2. 右クリック
  3. 「タグ挿入」をクリック(上から3番目)
  4. 「改行無視エリア」をクリック(下から2番目)

 

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

 

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

 

 

 
カテゴリートップ

 

TOPへ