谷歌地图搜索框外部地图没有功能
问题描述:
我一直在寻找如何使字段搜索框,如谷歌字段搜索地图。我找到了正确的答案here,由@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>
我下面的代码,但仍然没有工作。我在某处失踪了吗?
答
您需要在之后调用initialize
DOM已被渲染。目前,您在<input>
元素存在之前将其称为文档头部。
在文档或onload事件中定义了html元素<input>
之后调用它(您引用的小提琴在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>
它的作品!我真的很新使用这个谷歌地图API。谢谢 ! –
完成接受.. –