Googleマップ吹き出しでのスタイル

地図上のアイコンをクリックした時、説明文や画像がでますが、１行毎に改行を入れないで作成すると枠幅が最大で500pixになります。これをもっと小さな幅にしたい時はスタイルで幅を指定してやります。
（例） 画像のサイズが横200pixなので文字幅も200pixにしたい
<div style="width: 200px; padding-right: 10px;">ここに文書を入れる</div>
padding-right 文字と枠の右側余白
padding-left 文字と枠の左側余白
padding-top 文字と枠の上側余白
padding-bottom 文字と枠の下側余白

Googleマップ 目印・直線の色や線幅の変更

Googleマップで目印や直線などの色や線幅を変更するには
（１）「マイマップ／自分で作った地図」で編集したいタイトルにチェックを入れて「編集」をクリック

（２）線上でクリック

（３）■の所をクリック

（４）変更したい色を選択
 
ここで線幅や線の透明度も変更できます。

なお目印の場合は色のほか形状も変更できます。

Googleマップで距離を測る

Googleマップで距離を測るにはGoogleマップ画面で「人気の地図／距離測定ツール」を利用します。

もし、「人気の地図」内になかったら「その他の地図」を選択し「距離測定ツール」をGoogleマップに追加します。

作成は簡単、地図の上をクリックするだけ。もし間違ったら「最後の点を削除します。」をクリックし、直して行きます。
例えば札幌駅北口から百合が原公園までの距離を測定して見ると8,735mと出ました。

もしタクシーで行くとするといくらかかるでしょうか。
札幌市のタクシー料金は初乗り1600mまでが650円、309m毎に80円が加算されます。
次のウェブスプレッドシートに計算式を作っておきましたので興味はある方は試して見ると良いでしょう。
※Googleドキュメントのスプレシッドシートへ

Googleマップの直線を編集するには

（１）頂点の移動
描いた曲線を修正したい時はポイントを移動してやると大抵直ります。

ポイントのドラッグで実線から点線に変わります。丁度良い位置に来たらドラッグを止めます。
 

（２）ポイントの追加
既存のポイント移動で直らない時はポイントを追加してから移動します。

「ポイントを追加」をクリック
 
ポイントが追加になったら移動して直します。

（３）ポイントの削除
下図の様な場合はポイントの移動でも直す事が出来ますが、ポイントを削除して直して見ます。

「このポイントを削除」をクリック


このようにポイントの移動、追加、削除で修正して行きますが、ポイントによっては削除出来ないときが出ます。
その見分け方は
ポイントにマウスを当てた時、四角全体の色が濃い時は削除できる。
 
ポイントにマウスを当てた時、四角全体の色が半透明となって下の線が透けて見えるときは削除できず、右クリックすると「ポイントの追加」が出ます。このような時は結果がどうでるか何度かやってみると、最適な方法を選択できるようになります。

Googleマップで案内図を作る

Googleマップの直線を使って案内図を作成する方法です。
ここでは札幌駅北口から百合が原公園を経由してさとらんどに行くドライブマップを作成して見ます。
（１）Googleマップロゴ下の「マイマップ」をクリック
（２）「新しい地図を作成」

（３）Googleアカウントとパスワードを入力し「ログイン」をクリック

（４）「新しい地図を作成」をクリック
（５）タイトルを入れる

（６）出発点を適当な大きさに表示させたら「直線を引く」をクリック

（７）地点をクリックして描く

（６）地図の端に来たら右クリックメニューで「ここを地図の中心」をクリック

（７）描きやすいように「ズームアウトして広域を表示」をクリック

（８）曲がる地点に来たら「ズームインして詳細を表示」をクリック

（９）終点に来たらダブルクリック

（１０）目印を入れるには「目印を追加」をクリック

目印地点をクリックし「タイトル」と「説明」を入れる

（１１）Bloggerに入れるには「リンク」をクリックした後、「埋め込み地図のカスタマナイズとプレビュー」をクリック

（１２）地図のサイズと縮尺を決める

（１３）ドラッグかトリプルクリックでHTMLタグを選択したらコピー


（１４）BloggerのHTMLの編集で貼り付け

（１５）貼り付けた地図


大きな地図で見る

Googleマップの埋め込み

野球のオリンピックアジア予選が行われた台湾の台中洲際棒球場
英語名はTaichung Intercontinental Baseball Stadium
ドラッグで地点の移動、ダブルクリックで地点の移動と拡大、アイコンのクリックでコメントの表示


拡大地図を表示

Googleマップの「このページのリンク」より埋め込みのタグを取得します。
あとはコピペするだけ。


関連ページ
●Googleマップの応用であるAPIを使用した例「札幌の公園」

Googleマップでのスタイル

地図上のアイコンをクリックした時、説明文や画像がでますが、文の長さによっては枠幅が広くなりすぎたりします。これを避けるにはスタイルで幅を指定すると一定の幅になります。
（例）
＜div style="width: 200px; padding-right: 10px;"＞ここに文書を入れる＜/div＞
padding-right 右のスペース
もし必要ならば
padding-left 左のスペース
padding-top 上のスペース
padding-bottom 下のスペース
注
●ここでは＜＞に全角を使っていますが、実際は半角を使用します。