2016年1月19日火曜日

ホームページにGooble mapの地図を埋め込む

Googleマップを使用して、
地図データをホームページに挿入する方法について、説明いたします。

(1) グーグルマップを開く
https://www.google.co.jp/maps/@35.4006885,139.375825,10z?hl=ja
※@の[35.6447272,139.9059724,13z]が緯度経度になります。

(2) 検索欄に、住所を入力して、検索ボタン(虫眼鏡)をクリックします。



(3) 地図のデータを取得(地図の共有または埋め込む)
 検索部分の左側に、三本線(メニュー)が表示されています。

 メニューを開いて、「地図の共有または埋め込む」を選択する
 ダイアログを開いたら、「地図を埋め込む」を選択すると、下図のようなダイアログに変化します。


赤枠の地図を埋め込むを選択すると、埋め込み用のタグが出てきます。 
ダイアログ内の埋め込み用のタグ「http~のデータ」をコピーする。

このタブをホームページに埋め込むと表示できます。

※コピーしたiframeタブをそのままホームページに追加すると、

「このコンテンツはフレーム内で表示できません」

が表示される場合があります。
その時は、 frame要素のsrc属性の最後に、「&iwloc=B」を追記します。
(バルーンが表示されて表示できなくなっているようです)




【参考URL】
https://support.google.com/maps/answer/3544418?hl=ja
https://www.healing-solutions.jp/blog/archives/1955/
https://inthecom.net/718

http://www.flapism.jp/other/131/

0 件のコメント:

コメントを投稿