未捕获的TypeError：无法读取undefined的属性'reference' - google places library api

Question

我遇到此错误 - 未捕获的TypeError：无法读取未定义的属性“引用”

我正在使用google places api javascript库。

我正在处理的是一个自动完成搜索栏，当我选择时，我想获取坐标和地名 我之前已经研究过这些东西，并且在另一个页面上使用相同的脚本并且它完美地运行。

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

function initialize() {  
var mapOptions = {
center: new google.maps.LatLng(-33.8688, 151.2195),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);

var input = document.getElementById('bookings_searchbar_place');
var options = {
types: ['(cities)']
};
autocomplete = new google.maps.places.Autocomplete(input, options);

autocomplete.bindTo('bounds', map);

google.maps.event.addListener(autocomplete, 'place_changed', function() {

 var place = autocomplete.getPlace();

alert(place.reference);

});
}
google.maps.event.addDomListener(window, 'load', initialize);

和文件中的其他代码连接到单独的搜索栏，工作正常。

function initialize() {  
var mapOptions = {
center: new google.maps.LatLng(-33.8688, 151.2195),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);

var input = document.getElementById('searcherbar');
var options = {
types: ['(cities)']
};
autocomplete = new google.maps.places.Autocomplete(input, options);

autocomplete.bindTo('bounds', map);

google.maps.event.addListener(autocomplete, 'place_changed', function() {

var place = autocomplete.getPlace();

alert(place.reference);
alert(place.reference);    

var locc = str_replace(' ' , '' , place.geometry.location);
var locc2 = str_replace(',' , '_' , locc);
var locc3 = str_replace('-' , '@' , locc2);
var locc4 = str_replace('(' , '' , locc3);
var locc5 = str_replace(')' , '' , locc4);

var location_lat = str_replace('(' , '' , place.geometry.location);
var location_lat2 = str_replace(')' , '' , location_lat);
var location_lat3 = location_lat2.split(",");

var formatted_address1 = str_replace(',', '@', $('#searcherbar').val());
var formatted_address2 = str_replace(' ', '-', formatted_address1);

//window.location="area.php?id="+formatted_address2+"&loc="+locc5;  


});
}
google.maps.event.addDomListener(window, 'load', initialize);


<input id='bookings_searchbar_place' type='text' placeholder=""/>

<div style='display:none;' id='map-canvas'></div>

<input id='searcherbar' type='text' placeholder=""/>

<div style='display:none;' id='map_canvas'></div>