文字を重ねる
<p style="position: relative;"> <img src="haneda.jpg" width="320" height="200" alt="羽田上空写真" /> <span style="position: absolute; top: 183px; left: 80px; border: 1px solid blue; padding: 3px; background-color: #ffffcc; font-family: sans-serif; font-weight: bold;"> 羽田上空 HANEDA </span> </p>
ここで地図を載せておきます。右下の+ーで拡大縮小ができます。アイコンをクリックして下さい。
GoogleMap のブログへの埋め込み
1.アカウント取得後のGoogleホームページトップ画面
ログインすると、Google関係のページでは右上にログインしている表示がでる。
右上の3×3の四角いアイコンは「Googleアプリ」で、ここをクリックするとマップやニュースほかが表示される。
[マップ]をクリック。
2.左上の[マイマップ]をクリック。
[マイマップ]が表示されない場合は、表示する地図を移動したり、拡大・縮小してみる。
3.左上の[作成]をクリック。
4.[マイマップ作成]画面に入る。
すでに[無題のレイヤ]が作成されている。[無題のレイヤ]の名称変更などの細かな作業はあとからできる。
5.地図に印を付けたい場所に移動・拡大・縮小する。
水滴の絵を逆さまにしたようなアイコンは[マーカー]のアイコン。
[マーカーアイコン]をクリックし、それから地図上をクリックする。
6.ポイントの名前と、下の欄には備考が書ける。
ネット上で表示した場合、このマークをクリックすると名前と備考が表示される。
あとから編集できる。
7.必要なだけマーカー作成をクリック、地図上に配置を繰り返す。
ログインしてマイマップを開けば、あとから何度でも、追加・削除・編集ができる。
下の画像は、地図上に配置したマーカーをクリックして出てくる表示。名前・備考の編集、このマーカーの削除ができる。
8.地図上のマーカーアイコンを変更する。
左上の作成したマーカー一覧にマウスを合わせると、画像のように[色を垂らす]アイコンが表示される。
それをクリック。
9.それぞれのマーカーの、色・形、あるいは他のアイコンに変更できる。
ここでは[他のアイコン]に変更してみる。
10.アイコンを選択。
ネット上にアップしているアイコンの画像を使うこともできる。ここでは省略。
11.本丸を赤ドクロに変更。
12.他のマーカーのアイコンを変更するときには、すでに使っているアイコンが表示されるので、それをクリックすると同じアイコンに簡単に変更できる。
13.いろいろ配置してみた。
14.[共有設定]
共有設定をする。ネット上で誰にでも見られるように共有する、などの設定。
これを先にして[公開]にしておかないと、ブログに埋め込むURLが取得できない。
15.[無題のレイア]の名前、備考を記入する画面が出てくる。
新しいレイアの設定時にのみ、表示される。
16.[共有設定]の画面。
中段右の[変更]をクリックして、[ウェブ上で一般公開]に設定。必要なら別の設定に。
17.設定確認の画像? 画面を取得してなかったので、ここでは省略。
新しいレイアの設定時にのみ、表示される。
18.[共有設定]が終わったら、画面左上の、赤丸のところ、点が3つ縦に並んだアイコンをクリックすると、プルダウン・メニューが表示される。
上から4番目、[自分のサイトに埋め込む]をクリック。
18.[自分のサイトに埋め込む]をクリックすると、このような画面になる。
しかし、「共有されていない云々」の表示が出て、この画面に入れないことが多い。
共有設定を[ウェブ・・]から別の設定にしてOKし、また[ウェブ]の設定、をしてみる。
<iframe src="https://www.google.com/maps/d/embed?mid=zhKIzvKzwQbM.kN8pn2gGEAWQ" width="640" height="480"></iframe>
取得したURLをブログに貼り付ける。
19.縮尺の指定。下の画像の説明を参照。
<iframe src="https://www.google.com/maps/d/embed?mid=zhKIzvKzwQbM.k8AfOuRBq5cQ" width="640" height="480"></iframe>
の場合、
<iframe src="https://www.google.com/maps/d/embed?mid=zhKIzvKzwQbM.k8AfOuRBq5cQ&z=10" width="640" height="480"></iframe>
のように「&z=10」を追加する。
0~20の範囲で指定できるようであるが、それぞれが幾つの縮尺なのかは調べていないので分からない。
20.あとは取得したURLを、ブログであれば本文記入のところに、コピー・貼り付けすればよい。
21.マイマップとレイヤの関係が分かりにくいかと思うので、ちょっと書いておきます。
1)初めてマイマップ作成に入ったとき、無題のレイアがすでに作られており、そこにマーカー作成で地図にマーカーを配置していきます。この時、すでにひとつの「マイマップ」のキャンバスが作成されています。それを仮に「無題のマイマップ」とします。これらは親子関係と考えてもいいです。
「無題のマイマップ」――「無題のレイア」
――「新しいレイア」
――「新しいレイア」
ひとつのマイマップには、幾つもレイアを配置することができます。
例えば、その1つをマーカー用、次のをライン記入用、次のを長さ測定用などと、使い分けることもできます。
共有設定は、「無題のマイマップ」に対して行います。そのマイマップでの初めての共有設定時に、そのマイマップのタイトルと備考の入力をします。
マイマップのタイトルおよび備考は、マイマップ作成画面の左上に常に表示されており、そのあたりをクリックすることで、いつでも編集できたかと思います。
2)マイマップ作成に入るときには、ログイン状態で通常のGoogleMapの画面を表示し、その画面左上の[マイマップ]をクリックしていましたが、すでに作成されたマイマップは、そこで表示されます。
すでに作ったマイマップの指定、新しく別のマイマップを作成するも、そこで行います。
いんのしまみち