diff --git a/src/assets/css/map-design.css b/src/assets/css/map-design.css
index 42725c6..041cbb3 100644
--- a/src/assets/css/map-design.css
+++ b/src/assets/css/map-design.css
@@ -1,3 +1,8 @@
+ul {
+  margin: 0;
+  padding: 0;
+}
+
 /* ボタン、メニューなどのデザイン aidmiya */
 /* なお、map.cssにも手を加えることがあります */
 
@@ -23,16 +28,16 @@
 /* .ol-full-screenと.ol-zoomはol.cssのを上書きされている。!importantを使わず、読み込み順で上書きしている */
 .ol-full-screen {
   right: 0.5em;
-  top: calc( 0.5em + 3em);
+  top: calc(0.5em + 3em);
 }
 
 .ol-zoom {
   left: 0.5em;
-  top: calc( 3em + 0.5em);
+  top: calc(3em + 0.5em);
 }
 
 .ol-zoomslider {
-  top: calc( 1.375em + 3em + 0.5em);
+  top: calc(1.375em + 3em + 0.5em);
 }
 
 /* メニューを閉じるボタン */
@@ -52,7 +57,7 @@
   height: 100%;
   top: 0;
   right: 0;
-  background-color: rgba(245, 245, 245, .8);
+  background-color: rgba(245, 245, 245, 0.8);
   /* 100vhを超えればスクロールできるのでそれがわかるようにする */
   overflow: auto;
 }
@@ -78,11 +83,11 @@
 
 .menu li {
   list-style-type: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, .1);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
 }
 
 .menu li:hover {
-  background-color: rgba(0, 0, 0, .1);
+  background-color: rgba(0, 0, 0, 0.1);
 }
 
 .menu .menu-nohover {
@@ -99,12 +104,13 @@
 
 .menu .menu-buildings {
   /* 高さはどう指定? */
-  height: calc( 100vh - 20em);
+  height: calc(100vh - 20em);
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
 
-.menu .menu-content, .menu .menu-content a {
+.menu .menu-content,
+.menu .menu-content a {
   color: #c81e00;
 }
 
@@ -117,7 +123,6 @@
   text-align: right;
 }
 
-
 /* ポップアップの表 */
 .ol-popup table {
   border: 0;
@@ -130,18 +135,14 @@
 }
 
 /* 検索ボックスのフォーム */
-form.search {
-  width: calc( 100vw - 4em);
+.search {
+  width: calc(100vw - 4em);
   max-width: 500px;
-  position: relative;
+  /* [x]のrightの基準 */
+  margin: 0.5em 0.5em 0 0.5em;
+  position: absolute;
   top: 0;
   left: 0;
-}
-
-form .search-box {
-  margin: 0.5em;
-  position: relative;
-  /* [x]のrightの基準 */
   display: flex;
   align-items: center;
   /* [x]を縦で中央に */
@@ -149,27 +150,28 @@ form .search-box {
   /* とりあえず見やすくするために */
   border-bottom: 1px solid rgba(72, 72, 72, 0.7);
   background-color: #fafafa;
-  box-shadow: 0px 0px 4px 1px rgba(184, 184, 184, 0.8);
-  border-radius: 5px;
+  /*box-shadow: 0px 0px 4px 1px rgba(184, 184, 184, 0.8);*/
+  border-radius: 5px 5px 0 0;
 }
 
-form input[type="text"] {
-  width: calc( 100vw - 3em);
+input[type='search'] {
+  width: calc(100vw - 3em);
   border: 0;
   border-radius: 5px;
-  height: calc( 2.5em - 2px - 8px);
+  height: calc(2.5em - 10px);
   background-color: #fafafa;
-  margin: 0 3.5em 0 1em;
+  padding: 0 3.5em 0 1em;
   /*  height: calc( 2.5em - 2px ); Safariで入力欄が縦に長いのでもう少し低くする */
   /*  font-size: 1.5em; Safariで入力欄が縦に長くなるのでfont-sizeは使わない */
 }
 
-input[type="text"]:focus {
+input[type='search']:focus {
   outline: 0;
 }
 
-form input[type="reset"] {
+input[type='reset'] {
   position: absolute;
+  top: 0;
   right: 0;
   width: 2.5em;
   height: 2.5em;
@@ -177,15 +179,47 @@ form input[type="reset"] {
   border-radius: 5px;
   background-color: #eee;
   padding: 0;
+  z-index: 10;
   /* ボタンクリック時に文字が右下へ下がるのを防ぐため */
 }
 
-form input[type="reset"]:hover {
+input[type='reset']:hover {
   background-color: #ccc;
 }
 
 /* 検索ボックス・メニューが開いている時 */
-form.search.menuactive {
+.search.menuactive {
   /*  width: calc( 100% - 270px ); Safariで確認してみると、幅が短かった */
-  width: calc( 100vw - 48% - 1.5em);
+  width: calc(100vw - 48% - 1.5em);
+}
+
+.result {
+  visibility: hidden;
+  margin: 0 0.5em;
+  position: absolute;
+  top: 41px;
+  left: -8px;
+  align-items: center;
+  width: 100%;
+  border-bottom: 1px solid rgba(72, 72, 72, 0.7);
+  background-color: #fafafa;
+  box-shadow: 0px 0px 4px 1px rgba(184, 184, 184, 0.8);
+  border-radius: 0 0 5px 5px;
+}
+
+.result ul {
+  list-style: none;
+  display: block;
+}
+
+.result ul li {
+  padding-left: 1em;
+  display: inline-block;
+  width: calc(100% - 1em);
+  line-height: 1.6em;
+}
+
+.result li:hover,
+.select {
+  background-color: rgba(230, 230, 230, 0.8);
 }
diff --git a/src/assets/css/map.css b/src/assets/css/map.css
index 0c0b45c..eb7cf3b 100644
--- a/src/assets/css/map.css
+++ b/src/assets/css/map.css
@@ -74,4 +74,4 @@ html, body, #map {
 
 .block {
   display: block;
-}
\ No newline at end of file
+}
diff --git a/src/assets/geojson/searchtest.geojson b/src/assets/geojson/searchtest.geojson
index 280cc21..42ec783 100644
--- a/src/assets/geojson/searchtest.geojson
+++ b/src/assets/geojson/searchtest.geojson
@@ -45,4 +45,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/src/assets/layers/overlay.js b/src/assets/layers/overlay.js
index 6a32f3c..a0235dd 100644
--- a/src/assets/layers/overlay.js
+++ b/src/assets/layers/overlay.js
@@ -1,48 +1,50 @@
 // パスの指定
-var path = 'https://kure-kosen.github.io/kure_kosen_map/';
+// var path = 'https://kure-kosen.github.io/kure_kosen_map/';
 // var path = 'C:/Users/kazu/Documents/GitHub/kure_kosen_map/';
+var path = '/Users/kazu/workspace/kure_kosen_map/src/';
 
 // 現在地の円
 var geocycle = new ol.layer.Vector({
-                source: new ol.source.Vector({
-                  features: [accuracyFeature, positionFeature]
-                })
-              });
+  source: new ol.source.Vector({
+    features: [accuracyFeature, positionFeature]
+  })
+});
 
 //呉市オープンデータのaed
 //作成日:20171218
 var aed = new ol.layer.Vector({
-            title: 'AED',
-            source: new ol.source.Vector({
-              format: new ol.format.GeoJSON(),
-              url: path + 'assets/geojson/20171224.geojson',
-              crossOrigin: 'anonymous'
-            }),
-            style: new ol.style.Style({
-              image: new ol.style.Icon({
-                src:path + 'assets/icon/aed.png', scale: 0.2
-              })
-            })
-          });
+  title: 'AED',
+  source: new ol.source.Vector({
+    format: new ol.format.GeoJSON(),
+    url: path + 'assets/geojson/20171224.geojson',
+    crossOrigin: 'anonymous'
+  }),
+  style: new ol.style.Style({
+    image: new ol.style.Icon({
+      src: path + 'assets/icon/aed.png',
+      scale: 0.2
+    })
+  })
+});
 
 //kmlのサンプル
 var kml = new ol.layer.Vector({
-            title: 'kml',
-            source: new ol.source.Vector({
-              format: new ol.format.KML(),
-              url: path + 'assets/kml/kokudo.kml',
-              crossOrigin: 'anonymous'
-            })
-          });
+  title: 'kml',
+  source: new ol.source.Vector({
+    format: new ol.format.KML(),
+    url: path + 'assets/kml/kokudo.kml',
+    crossOrigin: 'anonymous'
+  })
+});
 
 //xyzタイルのサンプル
 var tile = new ol.layer.Tile({
-            title: 'tile',
-            source: new ol.source.XYZ({
-              url: path + 'assets/tiles2/{z}/{x}/{y}.png',
-              crossOrigin: 'anonymous'
-            })
-          });
+  title: 'tile',
+  source: new ol.source.XYZ({
+    url: path + 'assets/tiles2/{z}/{x}/{y}.png',
+    crossOrigin: 'anonymous'
+  })
+});
 
 // var vectorSource = new ol.layer.Vector({
 //             title: 'test1',
@@ -53,8 +55,8 @@ var tile = new ol.layer.Tile({
 //             })
 //           });
 
-  var vectorSource = new ol.source.Vector(
-  { url: path + 'assets/geojson/searchtest.geojson',
-    projection: 'EPSG:3857',
-    format: new ol.format.GeoJSON()
-  });
\ No newline at end of file
+var vectorSource = new ol.source.Vector({
+  url: 'assets/geojson/searchtest.geojson',
+  projection: 'EPSG:3857',
+  format: new ol.format.GeoJSON()
+});
diff --git a/src/assets/libs/ol3-search/searchcontrol.css b/src/assets/libs/ol3-search/searchcontrol.css
index 282d473..d3c43ab 100644
--- a/src/assets/libs/ol3-search/searchcontrol.css
+++ b/src/assets/libs/ol3-search/searchcontrol.css
@@ -1,4 +1,4 @@
-.ol-search {
+.ol-search {
   top: 0.5em;
   left: 3em;
 }
@@ -17,7 +17,7 @@
   float: left;
 }
 
-.ol-search input {
+/* .ol-search input {
   display: inline-block;
   border: 0;
   margin: 1px 1px 1px 2px;
@@ -26,13 +26,15 @@
   height: 1.375em;
   box-sizing: border-box;
   transition: all 0.1s;
-}
+} */
 
-.ol-touch .ol-search input, .ol-touch .ol-search ul {
+.ol-touch .ol-search input,
+.ol-touch .ol-search ul {
   font-size: 1.5em;
 }
 
-.ol-control.ol-search.ol-collapsed ul, .ol-control.ol-search.ol-collapsed input {
+.ol-control.ol-search.ol-collapsed ul,
+.ol-control.ol-search.ol-collapsed input {
   display: none;
 }
 
@@ -47,14 +49,11 @@
   overflow-x: hidden;
 }
 
-
-/*
-.ol-control.ol-search ul
-{	position: absolute;
-	background: #fff;
-	box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
-}
-*/
+/* .ol-control.ol-search ul {
+  position: absolute;
+  background: #fff;
+  box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
+} */
 
 .ol-control.ol-search ul li {
   padding: 0.1em 0.5em;
@@ -66,7 +65,8 @@
   text-overflow: ellipsis;
 }
 
-.ol-search ul li.select, .ol-search ul li:hover {
-  background-color: rgba(0, 60, 136, .5);
+.ol-search ul li.select,
+.ol-search ul li:hover {
+  background-color: rgba(0, 60, 136, 0.5);
   color: #fff;
-}
\ No newline at end of file
+}
diff --git a/src/assets/libs/ol3-search/searchcontrol.js b/src/assets/libs/ol3-search/searchcontrol.js
index d72f1b1..c9026b4 100644
--- a/src/assets/libs/ol3-search/searchcontrol.js
+++ b/src/assets/libs/ol3-search/searchcontrol.js
@@ -1,162 +1,202 @@
-/*	Copyright (c) 2017 Jean-Marc VIGLINO,
-	released under the CeCILL-B license (French BSD license)
-	(http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt).
-*/
-/**
- * Search Control. This is the base class for search controls. You can use it for simple custom search or as base to new class
- *
- * @constructor
- * @extends {ol.control.Control}
- * @fires select, change:input
- * @param {Object=} Control options.
- *	@param {string} options.className control class name
- *	@param {Element | string | undefined} options.target Specify a target if you want the control to be rendered outside of the map's viewport.
- *	@param {string | undefined} options.placeholder placeholder, default "Search..."
- *	@param {number | undefined} options.typing a delay on each typing to start searching (ms) use -1 to prevent autocompletion, default 300.
- *	@param {integer | undefined} options.minLength minimum length to start searching, default 1
- *	@param {integer | undefined} options.maxItems maximum number of items to display in the autocomplete list, default 10
- *	@param {function} options.getTitle a function that takes a feature and return the name to display in the index.
- *	@param {function} options.autocomplete a function that take a search string and callback function to send an array
- */
-ol.control.Search = function (options) {
+// Copyright (c) 2017 Jean-Marc VIGLINO,
+// released under the CeCILL-B license (French BSD license)
+// (http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt).
+
+// Search Control. This is the base class for search controls. You can use it for simple custom search or as base to new class
+// @constructor
+// @extends {ol.control.Control}
+// @fires select, change:input
+// @param {Object=} Control options.
+// @param {string} options.className control class name
+// @param {Element | string | undefined} options.target Specify a target if you want the control to be rendered outside of the map's viewport.
+// @param {string | undefined} options.placeholder placeholder, default "Search..."
+// @param {number | undefined} options.typing a delay on each typing to start searching (ms) use -1 to prevent autocompletion, default 300.
+// @param {integer | undefined} options.minLength minimum length to start searching, default 1
+// @param {integer | undefined} options.maxItems maximum number of items to display in the autocomplete list, default 10
+// @param {function} options.getTitle a function that takes a feature and return the name to display in the index.
+// @param {function} options.autocomplete a function that take a search string and callback function to send an array
+
+ol.control.Search = function(options) {
   var self = this;
   if (!options) options = {};
   if (options.typing == undefined) options.typing = 300;
   var element;
-  if (options.target) {
-    element = $("<div>").addClass((options.className || "") + " ol-search");
-  } else {
-    element = $("<div>").addClass((options.className || "") + ' ol-search ol-unselectable ol-control ol-collapsed');
-    this.button = $("<button>").attr('type', 'button').click(function () {
-      element.toggleClass("ol-collapsed");
-      if (!element.hasClass("ol-collapsed")) {
-        $("input.search", element).focus();
-        $('li', element).removeClass('select');
-      }
-    }).appendTo(element);
-  }
+  element = $('<div>').addClass('search');
+  $(element).on('click', '#reset', function() {
+    _resets();
+  });
+
   // Search input
-  var tout, cur = "";
-  $("<input>").attr('type', 'search').addClass("search").attr('placeholder', options.placeholder || "Search...").on('change', function (e) {
-    self.dispatchEvent({
-      type: "change:input",
-      input: e,
-      value: $(this).val()
-    });
-  }).on('keyup search cut paste input', function (e) {
-  	// console.log(e.type+" "+e.key)
-    var li = $("ul.autocomplete li.select", element);
-    var val = $(this).val();
-    // move up/down
-    if (e.key == 'ArrowDown' || e.key == 'ArrowUp' || e.key == 'Down' || e.key == 'Up') {
-      li.removeClass('select');
-      li = (/Down/.test(e.key)) ? li.next() : li.prev();
-      if (li.length) li.addClass('select');
-      else $("ul.autocomplete li", element).first().addClass('select');
-    }
-    // Clear input
-    else if (e.type == 'input' && !val) {
-      self.drawList_();
-    }
-    // Select in the list
-    else if (li.length && (e.type == "search" || e.key == 'Enter')) {
-      if (element.hasClass("ol-control")) $(this).blur();
-      li.removeClass('select');
-      cur = val;
-      self.select(li.data('search'));
-    }
-    // Search / autocomplete
-    else if ((e.type == "search" || e.key == 'Enter') || (cur != val && options.typing >= 0)) { // current search
-      cur = val;
-      if (cur) { // prevent searching on each typing
-        if (tout) clearTimeout(tout);
-        tout = setTimeout(function () {
-          if (cur.length >= self.get("minLength")) {
-            var s = self.autocomplete(cur, function (auto) {
-              self.drawList_(auto);
-            });
-            if (s) self.drawList_(s);
-          } else self.drawList_();
-        }, options.typing);
-      } else self.drawList_();
-    }
-    // Clear list selection
-    else {
-      $("ul.autocomplete li", element).removeClass('select');
-    }
-  }).blur(function () {
-    setTimeout(function () {
-      element.addClass('ol-collapsed')
-    }, 200);
-  }).focus(function () {
-    element.removeClass('ol-collapsed')
-  }).appendTo(element);
+  var tout,
+    cur = '';
+  $('<input>')
+    .attr('type', 'search')
+    .attr('onfocus', '_resets()')
+    .attr('id', 'search')
+    .addClass()
+    .attr('placeholder', options.placeholder || 'Search...')
+    .on('change', function(e) {
+      self.dispatchEvent({
+        type: 'change:input',
+        input: e,
+        value: $(this).val()
+      });
+    })
+    .on('keyup search cut paste input', function(e) {
+      var li = $('ul li', element);
+      var val = $(this).val();
+
+      // move up/down
+      if (
+        e.key == 'ArrowDown' ||
+        e.key == 'ArrowUp' ||
+        e.key == 'Down' ||
+        e.key == 'Up'
+      ) {
+        li.removeClass('select');
+        li = /Down/.test(e.key) ? li.next() : li.prev();
+        if (li.length) li.addClass('select');
+        else
+          $('ul li', element)
+            .first()
+            .addClass('select');
+      }
+
+      // Clear input
+      else if (e.type == 'input' && !val) {
+        _resets();
+        self.drawList_();
+      }
+
+      // Select in the list
+      else if (li.length && (e.type == 'search' || e.key == 'Enter')) {
+        if (element.hasClass('ol-control')) $(this).blur();
+        li.removeClass('select');
+        cur = val;
+        self.select(li.data('search'));
+      }
+
+      // Search / autocomplete
+      else if (
+        e.type == 'search' ||
+        e.key == 'Enter' ||
+        (cur != val && options.typing >= 0)
+      ) {
+        // current search
+        cur = val;
+        if (cur) {
+          // prevent searching on each typing
+          if (tout) clearTimeout(tout);
+          tout = setTimeout(function() {
+            if (cur.length >= self.get('minLength')) {
+              var s = self.autocomplete(cur, function(auto) {
+                self.drawList_(auto);
+              });
+              if (s) self.drawList_(s);
+            } else self.drawList_();
+          }, options.typing);
+        } else self.drawList_();
+      }
+      // Clear list selection
+    })
+    .appendTo(element);
+
+  // Delete input
+  $('<input>')
+    .attr({ type: 'reset', id: 'reset' })
+    .val('×')
+    .appendTo(element);
+
+  // Result
+  var _result = $('<div>')
+    .attr('id', '_result')
+    .addClass('result')
+    .appendTo(element);
+
   // Autocomplete list
-  $("<ul>").addClass('autocomplete').appendTo(element);
+  $('<ul>').appendTo(_result);
   ol.control.Control.call(this, {
     element: element.get(0),
     target: options.target
   });
-  if (typeof (options.getTitle) == 'function') this.getTitle = options.getTitle;
-  if (typeof (options.autocomplete) == 'function') this.autocomplete = options.autocomplete;
+
+  if (typeof options.getTitle == 'function') this.getTitle = options.getTitle;
+  if (typeof options.autocomplete == 'function')
+    this.autocomplete = options.autocomplete;
+
   // Options
   this.set('minLength', options.minLength || 1);
   this.set('maxItems', options.maxItems || 10);
 };
+
 ol.inherits(ol.control.Search, ol.control.Control);
-/** Returns the text to be displayed in the menu
- *	@param {any} f feature to be displayed
- *	@return {string} the text to be displayed in the index, default f.name
- *	@api
- */
-ol.control.Search.prototype.getTitle = function (f) {
-  return f.name || "No title";
+
+// Returns the text to be displayed in the menu
+// @param {any} f feature to be displayed
+// @return {string} the text to be displayed in the index, default f.name
+// @api
+ol.control.Search.prototype.getTitle = function(f) {
+  return f.name || 'No title';
 };
-/** Force search to refresh
- */
-ol.control.Search.prototype.search = function () {
-  $("input.search", this.element).trigger('search');
+
+// Force search to refresh
+ol.control.Search.prototype.search = function() {
+  $('input.search', this.element).trigger('search');
 };
-/** Set the input value in the form (for initialisation purpose)
- *	@param {string} value
- *	@param {boolean} search to start a search
- *	@api
- */
-ol.control.Search.prototype.setInput = function (value, search) {
-  $("input.search", this.element).val(value);
-  if (search) $("input.search", this.element).trigger("keyup");
+
+// Set the input value in the form (for initialisation purpose)
+// @param {string} value
+// @param {boolean} search to start a search
+// @api
+ol.control.Search.prototype.setInput = function(value, search) {
+  $('input.search', this.element).val(value);
+  if (search) $('input.search', this.element).trigger('keyup');
 };
-/** A ligne has been clicked in the menu > dispatch event
- *	@param {any} f the feature, as passed in the autocomplete
- *	@api
- */
-ol.control.Search.prototype.select = function (f) {
+
+// A ligne has been clicked in the menu > dispatch event
+// @param {any} f the feature, as passed in the autocomplete
+// @api
+//
+ol.control.Search.prototype.select = function(f) {
   this.dispatchEvent({
-    type: "select",
+    type: 'select',
     search: f
   });
 };
-/** Autocomplete function
- * @param {string} s search string
- * @param {function} cback a callback function that takes an array to display in the autocomplete field (for asynchronous search)
- * @return {Array|false} an array of search solutions or false if the array is send with the cback argument
- * @api
- */
-ol.control.Search.prototype.autocomplete = function (s, cback) {
+
+// Autocomplete function
+// @param {string} s search string
+// @param {function} cback a callback function that takes an array to display in the autocomplete field (for asynchronous search)
+// @return {Array | false} an array of search solutions or false if the array is send with the cback argument
+// @api
+ol.control.Search.prototype.autocomplete = function(s, cback) {
   cback([]);
   return false;
 };
-/** Draw the list
- * @param {Array} auto an array of search result
- */
-ol.control.Search.prototype.drawList_ = function (auto) {
-  var ul = $("ul.autocomplete", this.element).html("");
+
+// Draw the list
+// @param {Array} auto an array of search result
+ol.control.Search.prototype.drawList_ = function(auto) {
+  var ul = $('ul', this.element).html('');
   if (!auto) return;
   var self = this;
-  var max = Math.min(self.get("maxItems"), auto.length);
+  var max = Math.min(self.get('maxItems'), auto.length);
   for (var i = 0; i < max; i++) {
-    $("<li>").html(self.getTitle(auto[i])).data('search', auto[i]).click(function (e) {
-      self.select($(this).data('search'));
-    }).appendTo(ul);
+    _resultVisible();
+    $('<li>')
+      .html(self.getTitle(auto[i]))
+      .data('search', auto[i])
+      .click(function(e) {
+        self.select($(this).data('search'));
+      })
+      .appendTo(ul);
   }
-};
\ No newline at end of file
+};
+
+const _resultVisible = () => $('#_result').css('visibility', 'visible');
+const _resultHidden = () => $('#_result').css('visibility', 'hidden');
+const _resets = () => {
+  $('#search').val('');
+  $('li', '#_result').remove();
+  _resultHidden();
+};
diff --git a/src/assets/libs/ol3-search/searchfeaturecontrol.js b/src/assets/libs/ol3-search/searchfeaturecontrol.js
index 5c01668..6c61c34 100644
--- a/src/assets/libs/ol3-search/searchfeaturecontrol.js
+++ b/src/assets/libs/ol3-search/searchfeaturecontrol.js
@@ -1,73 +1,71 @@
-/*	Copyright (c) 2017 Jean-Marc VIGLINO,
-	released under the CeCILL-B license (French BSD license)
-	(http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt).
-*/
-/**
- * Search features.
- *
- * @constructor
- * @extends {ol.control.Search}
- * @fires select
- * @param {Object=} Control options.
- * @param {string} options.className control class name
- * @param {Element | string | undefined} options.target Specify a target if you want the control to be rendered outside of the map's viewport.
- * @param {string | undefined} options.placeholder placeholder, default "Search..."
- * @param {number | undefined} options.typing a delay on each typing to start searching (ms), default 300.
- * @param {integer | undefined} options.minLength minimum length to start searching, default 1
- * @param {integer | undefined} options.maxItems maximum number of items to display in the autocomplete list, default 10
- *
- * @param {string | undefined} options.property a property to display in the index, default 'name'.
- * @param {function} options.getTitle a function that takes a feature and return the name to display in the index, default return the property
- * @param {function | undefined} options.getSearchString a function that take a feature and return a text to be used as search string, default geTitle() is used as search string
- */
-ol.control.SearchFeature = function (options) {
+// Copyright (c) 2017 Jean-Marc VIGLINO,
+// released under the CeCILL-B license (French BSD license)
+// (http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt).
+//   Search features.
+//
+// @constructor
+// @extends {ol.control.Search}
+// @fires select
+// @param {Object=} Control options.
+// @param {string} options.className control class name
+// @param {Element | string | undefined} options.target Specify a target if you want the control to be rendered outside of the map's viewport.
+// @param {string | undefined} options.placeholder placeholder, default "Search..."
+// @param {number | undefined} options.typing a delay on each typing to start searching (ms), default 300.
+// @param {integer | undefined} options.minLength minimum length to start searching, default 1
+// @param {integer | undefined} options.maxItems maximum number of items to display in the autocomplete list, default 10
+//
+// @param {string | undefined} options.property a property to display in the index, default 'name'.
+// @param {function} options.getTitle a function that takes a feature and return the name to display in the index, default return the property
+// @param {function | undefined} options.getSearchString a function that take a feature and return a text to be used as search string, default geTitle() is used as search string
+
+ol.control.SearchFeature = function(options) {
   if (!options) options = {};
   ol.control.Search.call(this, options);
-  if (typeof (options.getSearchString) == "function") this.getSearchString = options.getSearchString;
-  this.set('property', options.property || 'name');
+  if (typeof options.getSearchString == 'function')
+    this.getSearchString = options.getSearchString;
+  this.set('property', 'name'); //ここで指定
   this.source_ = options.source;
 };
+
 ol.inherits(ol.control.SearchFeature, ol.control.Search);
-/** Returns the text to be displayed in the menu
- *	@param {ol.Feature} f the feature
- *	@return {string} the text to be displayed in the index
- *	@api
- */
-ol.control.SearchFeature.prototype.getTitle = function (f) {
+
+// ---------------------------------------------------
+// Returns the text to be displayed in the menu
+// @param {ol.Feature} f the feature
+// @return {string} the text to be displayed in the index
+// @api
+ol.control.SearchFeature.prototype.getTitle = function(f) {
   return f.get(this.get('property') || 'name');
 };
-/** Return the string to search in
- *	@param {ol.Feature} f the feature
- *	@return {string} the text to be used as search string
- *	@api
- */
-ol.control.SearchFeature.prototype.getSearchString = function (f) {
+
+// ---------------------------------------------------
+// Return the string to search in
+// @param {ol.Feature} f the feature
+// @return {string} the text to be used as search string
+// @api
+ol.control.SearchFeature.prototype.getSearchString = function(f) {
   return this.getTitle(f);
-}
-/** Autocomplete function
- * @param {string} s search string
- * @param {int} max max
- * @param {function} cback a callback function that takes an array of {name, feature} to display in the autocomplete fielad
- * @api
- */
-ol.control.SearchFeature.prototype.autocomplete = function (s, cback) {
+};
+
+// ---------------------------------------------------
+// Autocomplete function
+// @param {string} s search string
+// @param {int} max max
+// @param {function} cback a callback function that takes an array of {name, feature} to display in the autocomplete fielad
+// @api
+ol.control.SearchFeature.prototype.autocomplete = function(s, cback) {
   var result = [];
   // regexp
   s = s.replace(/^\*/, '');
   var rex = new RegExp(s, 'i');
   // The source
   var features = this.source_.getFeatures();
-  var max = this.get('maxItems')
-  for (var i = 0, f; f = features[i]; i++) {
+  var max = this.get('maxItems');
+  for (var i = 0, f; (f = features[i]); i++) {
     if (rex.test(this.getSearchString(f))) {
       result.push(f);
-      if ((--max) <= 0) break;
+      if (--max <= 0) break;
     }
   }
   return result;
 };
-
-function hoge() {
-  search.set('property', 'name' || 'address' || 'tel');// ||同時選択はむり
-  search.search();
-}
\ No newline at end of file
diff --git a/src/map.html b/src/map.html
index 6a4417f..85650f4 100644
--- a/src/map.html
+++ b/src/map.html
@@ -7,7 +7,6 @@
   <link rel="stylesheet" type="text/css" href="assets/css/map.css">
   <script type="text/javascript" src="assets/libs/ol/ol.js"></script>
   <link rel="stylesheet" type="text/css" href="assets/libs/ol/ol.css">
-  <link rel="stylesheet" type="text/css" href="assets/css/map-design.css">
   <link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">
   <title>呉高専マップ</title>
 </head>
@@ -15,14 +14,6 @@
   <div id="fullscreen" class="fullscreen">
     <div id="map" class="map"></div>
     <div class="fullscreenlayer">
-      <div class="block">
-        <form action="#" method="post" class="search" id="search">
-          <div class="search-box">
-            <input type="text" name="q">
-            <input type="reset" value="&#61453;" class="fa">
-          </div>
-        </form>
-      </div>
 
       <!-- 開くボタン -->
       <div class="wrap-menubtn wrap-openmenu ol-unselectable ol-control" id="wrap-openmenu">
@@ -124,14 +115,15 @@
     <h2>Options:</h2>
     <ul>
       <li>
-        maxInputs: <input type="number" onchange="search.set('maxItems', Number(this.value));" style="width:3em;" value="10" />
+        maxInputs: <input type="number" onchange="search.set('maxItems', Number(this.value));" style="width:3em;" value="10"
+        />
       </li>
       <li>
         search property:
         <select onchange="search.set('property',this.value); search.search(); console.log(this.value);">
-            <option value="commune">commune</option>
-            <option value="region">region</option>
-            <option value="text">text</option>
+            <!-- <option value="commune">commune</option>
+            <option value="region">region</option> -->
+            <!-- <option value="text">text</option> -->
             <option value="name">name</option>
             <option value="address">address</option>
             <option value="tel">tel</option>
@@ -141,7 +133,8 @@ <h2>Options:</h2>
     </ul>
   </div>
 
-  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+    crossorigin="anonymous"></script>
 
   <script type="text/javascript" src="assets/js/gps.js"></script>
 
@@ -161,11 +154,11 @@ <h2>Options:</h2>
 
   <script type="text/javascript" src="assets/libs/ol3-search/searchcontrol.js"></script>
   <script type="text/javascript" src="assets/libs/ol3-search/searchfeaturecontrol.js"></script>
-  <link rel="stylesheet" type="text/css" href="assets/libs/ol3-search/searchcontrol.css">
 
   <script type="text/javascript" src="assets/libs/ol-hash.js"></script>
 
   <script type="text/javascript" src="assets/js/main.js"></script>
   <script type="text/javascript" src="assets/js/map-design.js"></script>
+  <link rel="stylesheet" href="assets/css/map-design.css">
 </body>
 </html>