Googleマップ API•テック

Google Maps（グーグルマップ）上にPolylineを使って線をひく方法

2021年1月31日 by single コメントはまだありません

Google Maps（グーグルマップ）に線をひいてみましょう。

なお、Google Maps関連の記事についてはこちらにまとめてありますので、ご覧ください。

Google Maps（グーグルマップ）上にPolylineを使って線をひく方法

サンプル

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>Sample Map</title>
   <script defer
       src="https://maps.googleapis.com/maps/api/js?key=(APIキー)&callback=initMap" >
   </script>
   <style type="text/css">
      #map_canvas {
         width: 100%;
         height:100%;
      }
      html,
      body {
         height: 100%;
         margin: 0;
         padding: 0;
      }
   </style>
   <script>
      var map;
      function initMap() {
         var myLatlng = new google.maps.LatLng(35.68517826190777,139.7528236934712);
         var mapOptions = {
           zoom: 15,
           center: myLatlng
         }
         map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
         var koukyoCoordinates = [
            { lat: 35.685870, lng: 139.760372 },   /* 大手門 */
            { lat: 35.678508, lng: 139.753638 },   /* 桜田門 */
            { lat: 35.683755, lng: 139.745625 },   /* 半蔵門 */
            { lat: 35.688873, lng: 139.752138 },   /* 乾門 */
         ];
         var koukyoPath = new google.maps.Polyline({
            path: koukyoCoordinates,
            strokeColor: "#3333FF",
            strokeOpacity: 1.0,
            strokeWeight: 3,
            icons: [ 
               {
                  fixedRotation: true ,
                  icon: {
                     fillColor: "#FFFFFF" ,
                     fillOpacity: 1 ,
                     path: google.maps.SymbolPath.CIRCLE,
                     scale: 5 ,
                  } ,
               } ,
             ] ,
         });
         koukyoPath.setMap(map);
         var ootemonMarker =  new google.maps.Marker({
            position: koukyoCoordinates[0],
            map :map,
            title: "大手門",
         });
      }
   </script>
</head>
<body>
   <div id="map_canvas"></div>
</body>
</html>

デモ

google.maps.Polylineクラス

グーグルマップ上に線をひくにはPolylineクラスを使用します。

サンプルでは、皇居の「大手門」～「桜田門」～「半蔵門」～「乾門」で線をひいています。

まず、線をひく、位置の配列を作成します。

         var koukyoCoordinates = [
            { lat: 35.685870, lng: 139.760372 },   /* 大手門 */
            { lat: 35.678508, lng: 139.753638 },   /* 桜田門 */
            { lat: 35.683755, lng: 139.745625 },   /* 半蔵門 */
            { lat: 35.688873, lng: 139.752138 },   /* 乾門 */
         ];

型でいうと「MVCArray<latlng>」という型になります。

これをPolyineクラスのオプションに設定すればいいだけです。

PolylineOptions

         var koukyoPath = new google.maps.Polyline({
            path: koukyoCoordinates,
            strokeColor: "#3333FF",
            strokeOpacity: 1.0,
            strokeWeight: 3,
            icons: [ 
               {
                  fixedRotation: true ,
                  icon: {
                     fillColor: "#FFFFFF" ,
                     fillOpacity: 1 ,
                     path: google.maps.SymbolPath.CIRCLE,
                     scale: 5 ,
                  } ,
               } ,
             ] ,
         });
         koukyoPath.setMap(map);

Polylineクラスの引数に「PolylineOptions」を指定してください。

プロパティ説明
path線をひく、位置情報の配列（サンプルでは、「大手門」「桜田門」「半蔵門」「乾門」の４地点）
strokeColor線の色
strokeOpacity線の透明度（０～１）。０にすると完全に透明になります（なんの意味もないと思いますが）
strokeWeight線の太さ
icons描画する線に紐づけるアイコン
Array<IconSequence> 型
オプション説明

IconSequence

IconSequence型の値を指定します。

プロパティ説明
icon指定したいアイコンプロパティを「Symbol」型で指定する

Symbol

google.maps.Symbolインターフェースで主なプロパティは以下の通りです。

プロパティ説明
fillColor終点位置に設定するアイコンエリアの色
fillOpacity終点位置に設定するアイコンエリアの透明度（０～１）
０が完全に透明
scale終点位置に表示するアイコンのサイズ
path事前に用意されているシンボルアイコンパス（google.maps.SymbolPath）
または、SVG pathでしているカスタムパス

SymbolPath

定数アイコン
BACKWARD_CLOSED_ARROW
BACKWARD_OPEN_ARROW
CIRCLE
FORWARD_CLOSED_ARROW
FORWARD_OPEN_ARROW

サンプルでは「CIRCLE」を指定したので、乾門の辺りに丸いアイコンが表示されていますね。

最後にPolylineのsetMapメソッドを使い、マップと紐づけることで、マップ上に線をひくことができます。

ご参考

関連ページ