地図をつかい場所を示すには，Googe マップが便利です．ここでは，Blogger に Google マップを Blogger に掲載する方法を示します．
そのまま Blogger に載せる (未加工)
素の Google マップを Blogger に掲載する方法を示します．順序は HTML のソースを作成し，それを Blogger に挿入です．
HTML のソースコードの作成
google マップで表示されている地図を，そのまま掲載するのは簡単です．表示のための HTML のソースコードの作成手順は，以下の通りです．
- Google マップを開きます．
- Blogger に掲載したい場所を表示させます．
- 左上のメニューをクリックし，「地図を共有または埋め込む」を選択します．
- 共有のダイアログが表示されますので，[地図を埋め込む] のタブをクリックします．
- HTML ソースが表示されます．
- ソースは「<iframe src="https://www.google.com/maps/ ......」となっています．インラインフレームを使っていることがわかります．
- 地図のサイズを (小, 中, 大, カスタムサイズ) から選択します．
- 「HTMLをコピー」をクリックします．
以上で，Google マップの HTML のソースコードの作成が完了しました．そのソースコードはクリップボードに保管されています．次節の操作で，このソースコードを Blogger に挿入します．
Blogger に挿入
- 表示させる Blogger を開きます．
- 左上の鉛筆マークをクリックし， HTML ビューにします．
- 地図を表示したい場所に，先ほどコピーした HTML を貼り付け (ペースト, ctrl +v) します．
- 左上の鉛筆マークを作成 ビューにします．
以上で完了です．以下のような Google マップが，Blogger のページに表示されるはずです．
編集した地図を Blogger に載せる
Google マップの地図に編集 (マーカー，ライン，ルート) を加えて Blogger に掲載する方法を示します．順序は HTML のソースを作成し，それを Blogger に挿入です．私の別の WEB サイト「領域指定/ルート指定地図をWEBサイト/ブログに掲載」にに記載があります．
HTML のソースコードの作成
先の例とは異なり，地図を編集します．編集とはいえ，できることは限られています．ポリゴンとラインの作成などです．編集を加えた Google マップの HTML のソースコードの作成手順は，以下のとおりです．
- Google にログインします．通常は Google のサイトを開けば，ログインできているはずです．
- 右上のメインメニューをクリックし，マイプレイスをクリックします．
- マイマップを選択し，下の方にある「地図を作成」をクリックします．
- [+新しい地図を作成] をクリックします．理由は不明ですが，[+新しい地図を作成] が表示されないで，次の画面になることがあります．
- 「無題の地図」をクリックし，地図に名前を付けます．そして「無題のレイヤ」もクリックして，レイヤに名前を付けます．
- 編集する地図を表示させます．そして，マーカーとライン，ルートを使い地図を編集します．
- 「共有」をクリックすると，「地図の共有」が現れます．適当な項目を ON にします．設定が終われば，閉じる をクリックします．
- 地図の名前の横の三点メニューをクリックし，「自分のサイトに埋め込む」を選択します．
- すると，HTML のソースコードが表示されます．このコードが選択されていますので，[OK] をクリックします．
以上で，Google マップの HTML のソースコードの作成が完了しました．そのソースコードはクリップボードに保管されています．次節の操作で，このソースコードを Blogger に挿入します．
Blogger に挿入
- 表示させる Blogger を開きます．
- 左上の鉛筆マークをクリックし， HTML ビューにします．
- 地図を表示したい場所に，先ほどコピーした HTML を貼り付け (ペースト, ctrl +v) します．HTML の width と height を変更すると，表示サイズを変えることができます．
- 左上の鉛筆マークを作成 ビューにします．
以上で完了です．以下のような Google マップが，Blogger のページに表示されるはずです
0 件のコメント:
コメントを投稿