Google Mapのリファレンスサイト

不動産なんかに使うエリア表示と描画

·

ぽち

Google Maps JavaScript API では、地図上に線や図形を自由に描くことができます。ルート表示や範囲指定、マップ上の注記などに役立ちます。

線（Polyline）や円・多角形（Polygon）の基本的な使い方、そして UI を使って描画できる「Drawing Library」の活用方法を紹介します。



線（Polyline）を引く

複数の地点を線で結ぶには google.maps.Polyline を使います。

const routePath = new google.maps.Polyline({
  path: [
    { lat: 35.681236, lng: 139.767125 }, // 東京駅
    { lat: 35.689487, lng: 139.691706 }, // 新宿駅
  ],
  geodesic: true,
  strokeColor: "#FF0000",
  strokeOpacity: 1.0,
  strokeWeight: 4,
});
routePath.setMap(map);



円・多角形（Polygon）の描画

特定の範囲を示すために、円やポリゴン（多角形）も描けます。

円を描く

const circle = new google.maps.Circle({
  strokeColor: "#00BFFF",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#00BFFF",
  fillOpacity: 0.35,
  map,
  center: { lat: 35.681236, lng: 139.767125 },
  radius: 1000, // メートル
});



多角形（Polygon）を描く

const polygon = new google.maps.Polygon({
  paths: [
    { lat: 35.69, lng: 139.69 },
    { lat: 35.69, lng: 139.71 },
    { lat: 35.68, lng: 139.71 },
    { lat: 35.68, lng: 139.69 },
  ],
  strokeColor: "#FF6347",
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: "#FF6347",
  fillOpacity: 0.35,
});
polygon.setMap(map);

地域の範囲選択やゾーン表示、サービス対象エリアの可視化に便利です。



rawing Library の活用（UI付き描画）

ユーザーが自由に図形を描ける UI を提供するのが Drawing Library です。ボタンや選択ツールで直感的な操作が可能になります。

ライブラリの読み込み（libraries=drawingをお忘れなく）

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing&callback=initMap">
</script>

初期化処理に DrawingManager を追加

const drawingManager = new google.maps.drawing.DrawingManager({
  drawingMode: null,
  drawingControl: true,
  drawingControlOptions: {
    position: google.maps.ControlPosition.TOP_CENTER,
    drawingModes: ['marker', 'circle', 'polygon', 'polyline', 'rectangle'],
  },
  circleOptions: {
    fillColor: '#ffff00',
    fillOpacity: 0.3,
    strokeWeight: 2,
    clickable: false,
    editable: true,
    zIndex: 1,
  },
});
drawingManager.setMap(map);



管理者や訪問者に図形を描かせたいときに活用できます。

機能用途
Polyline路線や経路を表示する
Circle / Polygon特定範囲の可視化、選択エリア表示
Drawing Libraryユーザーが地図上で図形を描ける UI