Google Maps API・マイマップの使い方・活用法をご紹介しています。

ライン(線)を引いて表示する(RGB色指定)|Google Maps API v3

Google Maps API(v3) を利用して地図上に道筋などを表示する際に
利用することができるのがライン(線)です。
ここでは単純に2座標を指定して線を描画ていますが、
ポリライン色に指定できるCSS3Colorを、rgb指定によって描画しています。

 

地図の表示

指定したGPS座標を中心に情報ウィンドウを表示します。

 

サンプルコード

HTML

HTMLではGoogle Mapを表示するエリア(<div id=”gmap_canvas”></div>)を配置しています。
エリアを囲んでいる「<div class=”aspect”></div>」部分は、
ページ表示用の高さ制御用のタグです。

 

CSS

CSSではclass=”aspect”に対して、 幅100%を指定し、 高さをビューポートの50%としています。 GoogleMapを表示するエリア(id=”gmap_canvas”)のサイズを、 class=”aspect”に対しての幅・高さを100%として指定しています。

JavaScript

Polylineインスタンスを生成時に、
対象のmapインスタンスをパラメータで渡します。
同時にラインを描画する座標を指定し、表示の色・透明度・重なり順を指定しています。

別途、GoogleMapsAPIのライブラリを読み込む記述が必要です。 ご自分が取得されたAPIキーを以下のコードの(YourAPIkey)部分に置き換えて設定してください。

 

参考

ポリラインの生成に関してのリファレンスは以下で確認できます。

図形  |  Google Maps JavaScript API  |  Google Developers

Simple Polylines  |  Google Maps JavaScript API  |  Google Developers

公開日:
最終更新日:2017/01/26

コンテンツ
すべて展開 | すべて省略