GoogleMapでドロネー図（牧のうどん編）

GoogleMapで牧のうどん※の座標を取得して、ドロネー図を作成したいと思います。

※牧のうどん：福岡を代表するうどん屋。刷り込みもあり自分は最も美味しいうどんだと思います。
量は多い。麺は柔い。

こんな感じです。
<img width="791" alt="スクリーンショット 2016-08-11 22.44.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/51404/f21efc94-e57b-a2a3-306c-1071355b7177.png">


#ドロネー図とは？
各三角形の外接円が他の点を内部に含まない三角形分割であり、平面で最小角最大、一般次元でも最大最小包含円最小など最適化基準を満たす。らしいです。

詳しくは[ウィキペディア](https://ja.wikipedia.org/wiki/%E3%83%89%E3%83%AD%E3%83%8D%E3%83%BC%E5%9B%B3)でご確認ください。


#方針
１．検索ワード（”牧のうどん”）の座標を取得する。
２．座標からドロネー図を作成する。
３．ドロネー図を描画する。

#ソースコード
```js:makinoDelaunay.js

var map;
function initMap() {
  map = new google.maps.Map(
    document.getElementById('map'),
    {center: {lat: 33.576653, lng: 130.412336}, //福岡らへん
    zoom: 12}
  );

  //牧のうどんの座標を取得
  getLatLng("牧のうどん");
}


//座標を取得し描画　参考：http://www.nanchatte.com/map/getLatLngByAddress.html
function getLatLng(place) {
  var pt = [];
  var vertex = []
  var geocoder = new google.maps.Geocoder();

  geocoder.geocode({
    address: place,
    region: 'jp'
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var bounds = new google.maps.LatLngBounds();
      for (var r in results) {
        if (results[r].geometry) {
          var latlng = results[r].geometry.location;
          bounds.extend(latlng);

          //マーカーを描画
          new google.maps.Marker({
            position: latlng,
            map: map
          });

          pt.push(latlng);
          vertex.push([results[r].geometry.location.lat(), results[r].geometry.location.lng()]);
        }
      }

      //ドロネー図を作成　参考：https://github.com/ironwallaby/delaunay
      var triangles = Delaunay.triangulate(vertex);
      
      //ドロネー図の描画
      var delaunayPath;
      for (var t in triangles){
        t =  parseInt(t);
        var pathArray = [];
        if(t%3==0 && t < triangles.length-2){
          pathArray.push(pt[triangles[t+2]]);
          pathArray.push(pt[triangles[t+1]]);
          pathArray.push(pt[triangles[t]]);
          pathArray.push(pt[triangles[t+2]]);

          delaunayPath = new google.maps.Polyline({
            path: pathArray,  //ポリラインの配列
            strokeColor: '#FF0000',       //色（#RRGGBB形式）
            strokeOpacity: 1.0,           //透明度 0.0～1.0（デフォルト）
            strokeWeight: 1                //太さ（単位ピクセル）
          });

          delaunayPath.setMap(map);
        }
      }
    }
  });
}

```

###1.座標の取得

```js
geocoder.geocode
```

でresultに検索結果を格納します。
resultについては[ここ](https://developers.google.com/maps/documentation/geocoding/intro?hl=ja)に詳細があります。

[ウィキペディア](https://ja.wikipedia.org/wiki/%E7%89%A7%E3%81%AE%E3%81%86%E3%81%A9%E3%82%93)と店舗数が合わないですね。


###２.ドロネー図の作成
```js
var triangles = Delaunay.triangulate(vertex);
```
ドロネー図作成のソースは[ここ](https://github.com/ironwallaby/delaunay)からお借りしています。座標の配列を入力したら、パスを返すブラックボックスです。


###3.ドロネー図の描画

```js
    var delaunayPath;
      for (var t in triangles){
        t =  parseInt(t);
        var pathArray = [];
        if(t%3==0 && t < triangles.length-2){
          pathArray.push(pt[triangles[t+2]]);
          pathArray.push(pt[triangles[t+1]]);
          pathArray.push(pt[triangles[t]]);
          pathArray.push(pt[triangles[t+2]]);

          delaunayPath = new google.maps.Polyline({
            path: pathArray,  //ポリラインの配列
            strokeColor: '#FF0000',       //色（#RRGGBB形式）
            strokeOpacity: 1.0,           //透明度 0.0～1.0（デフォルト）
            strokeWeight: 1                //太さ（単位ピクセル）
          });

          delaunayPath.setMap(map);
        }
      }
```

trianglesから三点ずつ取り出して、三角形を描画します。

#おまけ
資さんうどんも作ってみました。
店舗が多いほうが見た目が面白くて良いですね。
うどんは牧ののほうが美味いと思いますが。

<img width="774" alt="スクリーンショット 2016-08-11 22.59.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/51404/e8ddaaa9-5a3d-7307-4291-aef68aa1cd23.png">

<img width="764" alt="スクリーンショット 2016-08-11 22.59.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/51404/98f72bf5-e432-9601-3745-3b1720c3aa36.png">




# 参考
以下を参考にしました。

- http://www.nanchatte.com/map/getLatLngByAddress.html
- https://github.com/ironwallaby/delaunay
- http://www.google-mapi.com/googlemaps/polyline-display.html