如何从文本框中获取输入并用于在Google地图上搜索位置?

发布时间:2020-07-07 17:57

我正在研究一个项目,目标之一是让用户将位置名称输入文本框,然后按一个按钮在Google地图上搜索位置。

<h2>How to Use</h2>
<p>To use this program, enter a location then click the button to search for it.</p>

<h2>Search Location</h2>
Location: <input type="text" id="myText" value="">
<!-- This creates a textbox --->

<button onclick="searchFunction()">Search</button>
<!-- This creates a button --->

<p id="demo"></p>

<script>
  function searchFunction() {
    var location = document.getElementById("myText").value;
  }
</script>

<style>
  #map {
    height: 400px;
    width: 100%;
  }
</style>
</head>

<body>


  <h1>Google Map</h1>
  <div id="map"></div>
  <script>
    function initMap() {
      var options = {
        zoom: 12,
        center: {
          lat: 39.7684,
          lng: -86.1581
        }

      }
      var map = new google.maps.Map(document.getElementById('map'), options);
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBhrDQVoc_0FJx4Hy4tsFMKtmX78VNTUhw&callback=initMap">
  </script>

  <script>
    if (location == "Children's Museum") {
      function initMap() {
        var options = {
          zoom: 12,
          center: {
            lat: 39.810230,
            lng: -86.158882
          }

        }
        var map = new google.maps.Map(document.getElementById('map'), options);

        var locationTestPosition = {
          lat: 39.810230,
          lng: -86.158882
        };
        var marker = new google.maps.Marker({
          position: locationTestPosition,
          map: map
        });
      }
  </script>
  }

这是我当前拥有的代码。想法是,用户将插入一个地点的名称,然后使用if / else语句,该代码将在地图上的适当坐标处放置一个标记。我似乎无法使它正常工作。我是HTML和JavaScript的新手,所以这对我来说是很多学习的经验。

回答1