0
GoogleプレースAPIのオートコンプリート機能をテキストフィールドに実装しようとしています。ここに私のコードです：GoogleはAPIが動作しないようにします
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
$(document).ready(function() { initialize(){
var input = document.getElementById('location_input');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
alert(place.geometry.location.lat());
alert(place.geometry.location.lng());
});
}
});
</script>
<form role="search" method="get" action="http://elearningwp.thimpress.com/">
<span class="location_placeholder ml5">
<i class="location arrow icon tiny pr2"></i>
<input id="location_input" role="combobox" aria-labelledby="label_search_location"
aria-expanded="true" aria-autocomplete="list" aria-owns="explore-location-suggest"
placeholder="Please type a location..." class="dark" style="width:280px;">
</span>
<input type="text" value="" name="s" id="s" placeholder="What do you want to learn today?" class="form-control courses-search-input" autocomplete="off">
<input type="hidden" value="course" name="ref">
<button type="submit" style="width:150px;margin-right: -90px; float: right;"><i class="fa fa-search">Search</i></button>
<span class="widget-search-close"></span>
</form>
しかし、コードは動作していないようです。私は別のファイルでコードを試しても、美しく動作します。ここではそのコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script>
function initialize() {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
alert(place.geometry.location.lat());
alert(place.geometry.location.lng());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<input id="searchTextField" type="text" size="50">
<button id="btn" type="button">Submit</button>
</body>
</html>
あなたがここに$(document).ready(function() { initialize(){を使用しての代わりに気づくことができたよう私はgoogle.maps.event.addDomListener(window, 'load', initialize);
を使用しています。ここ結果のスナップショットです：
任意のアイデア？
@deceze任意のアイデア？ – utkarsh2k2