Google Maps搜索框外部地图不运行

我一直在寻找如何像Google Field搜索地图这样的字段搜索框。我在这里找到了正确的答案，@mrupsidown回答。这是@mrupsidown JSfiddle的JSFIDDLE答案，它可以很好地工作。然后，我尝试将其实施到我的项目中，但行不通。

在这里我的代码：

<!DOCTYPE html>
<html>
<head>
 <title>
   Search Box Map
 </title>
 <style>
   #autocomplete {
     width:300px;
   }
 </style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyB1Z4LA0_Q-qH3Sfq-vIr3lShYnIwS1KUw&libraries=places" ></script>
 <script>
  function initialize() {
   new google.maps.places.Autocomplete(
   (document.getElementById('autocomplete')), {
      types: ['geocode']
   });
  }
  initialize();
 </script>
</head>
<body>
<input id="autocomplete" placeholder="Enter your address" type="text"></input>

</body>
</html>

我正在遵循这些代码，但仍无法正常工作。我在某个地方缺少吗？

您需要在渲染DOM之后调用initialize 。当前，您在<input>元素存在之前在文档的头部调用它。

在文档或Onload事件中定义了<input> HTML元素之后（您引用的小提琴在Onload函数中运行JavaScript）。

）。

<style>
  #autocomplete {
    width: 300px;
  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyB1Z4LA0_Q-qH3Sfq-vIr3lShYnIwS1KUw&libraries=places"></script>
<script>
  function initialize() {
    new google.maps.places.Autocomplete(
      (document.getElementById('autocomplete')), {
        types: ['geocode']
      });
  }
</script>
<input id="autocomplete" placeholder="Enter your address" type="text"></input>
<script>
  initialize();
</script>

相关内容

最新更新

热门标签：