Javascript 连接地图的搜索框_Javascript_Jquery_Html

Javascript 连接地图的搜索框

javascript jquery html

Javascript 连接地图的搜索框,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试为此地图创建搜索框和按钮，有人能帮我把搜索框和地图连接起来吗 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <form class="example" action="/" style="margin:auto;max-width:300px"> <input type="text" pl

我正在尝试为此地图创建搜索框和按钮，有人能帮我把搜索框和地图连接起来吗

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <form class="example" action="/" style="margin:auto;max-width:300px">
    <input type="text" placeholder="Search.." name="search2">
    <button type="submit"><i class="fa fa-search"></i></button>
  </form>

  <div class="mapouter">
    <div class="gmap_canvas">
      <iframe
        width="600" height="500" id="gmap_canvas"
        src="https://maps.google.com/maps?q=university%20of%20san%20francisco&t=&z=13&ie=UTF8&iwloc=&output=embed"
        frameborder="0" scrolling="no" marginheight="0" marginwidth="0">
      </iframe>
      <a href="https://www.embedgooglemap.net">embedgooglemap.net</a></div>
    <style>
      .mapouter {
        text-align: right;
        height: 500px;
        width: 600px;
      }

      .gmap_canvas {
        overflow: hidden;
        background: none !important;
        height: 500px;
        width: 600px;
      }
    </style>
  </div>
</body>

</html>


mapouter先生{
文本对齐：右对齐；
高度：500px；
宽度：600px；
}
.gmap_画布{
溢出：隐藏；
背景：无！重要；
高度：500px；
宽度：600px；
}

这可以通过香草JavaScript轻松完成

在html上，绑定事件

  <input type="text" onkeyup="search()" id="search-input" placeholder="Search.." name="search2">

function search() { 
  const input = document.getElementById('search-input');
  console.log(input)
}