title: Connect search box for map
body: <p>I am trying to create a search box and button for this map,
  can anyone help me how to connect the search box to the map?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;form class="example" action="/" style="margin:auto;max-width:300px"&gt;
      &lt;input type="text" placeholder="Search.." name="search2"&gt;
      &lt;button type="submit"&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;/form&gt;
  
    &lt;div class="mapouter"&gt;
      &lt;div class="gmap_canvas"&gt;
        &lt;iframe
          width="600" height="500" id="gmap_canvas"
          src="https://maps.google.com/maps?q=university%20of%20san%20francisco&amp;t=&amp;z=13&amp;ie=UTF8&amp;iwloc=&amp;output=embed"
          frameborder="0" scrolling="no" marginheight="0" marginwidth="0"&gt;
        &lt;/iframe&gt;
        &lt;a href="https://www.embedgooglemap.net"&gt;embedgooglemap.net&lt;/a&gt;&lt;/div&gt;
      &lt;style&gt;
        .mapouter {
          text-align: right;
          height: 500px;
          width: 600px;
        }
  
        .gmap_canvas {
          overflow: hidden;
          background: none !important;
          height: 500px;
          width: 600px;
        }
      &lt;/style&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>