5.Google Map 埋め込み 編

ジョギングコース3種 ルート表示Map

埋め込み google map の切り替え?
自サイトに google map を埋め込むのはよく見かけます。
多くの場合は所在地のマーカーを表示したものですが、ここではルートを表示したものを3種類切り替え表示しています。
使用するのは「マイマップ」で作成したレイヤーをファイルとしてダウンロードし、自サイトに配置すると言う手法です。
※ google map の埋め込みについては、Google Developers の Google Maps Platform をご参照ください。
アドレスは https://developers.google.com/maps/documentation?hl=ja   

尚、google より 専用の「APIキー」を取得する必要が有りますのでご注意ください。

Navi Open
Close Navi
ads by google
デモと概要
この例では、Google Map のマイマップ機能によって作成したレイヤーの切り替えを行っています。
使用するのは[.kml]又は[.kmz]のファイルですが、正しく表示されるかどうかを両種類のファイルでテストする事をお勧めします。
又、同ファイルの格納先参照アドレスですが、相対指定( ../map/xxx.kml 等)では表示されません。
サーバーにアップロード後に絶対指定( http://xxx.com/map/xxx.kml 等 ) でしなければなりませんのでご注意ください。

本例では、切り替えボタンの[background-color:]を判別材料として使用していますので、RGB から hex に変換する式を組み込んでいます。
これについては本章では解説を省きます。

同様に、PC と Mobile に対応するための、[Click]と[touch]に対応する部分の解説も省きます。

時間が有れば、新たな章で細かい部分のノートを作りたいと思います。
補足説明は省略させていただきます。

HTML
ご覧の環境では、object要素がサポートされていないようです。外部文書を別ウィンドウで開いてください
CSS
ご覧の環境では、object要素がサポートされていないようです。外部文書を別ウィンドウで開いてください
JS
ご覧の環境では、object要素がサポートされていないようです。外部文書を別ウィンドウで開いてください