Javascript 谷歌地图更改中心基于Rails应用程序上的城市列表-下拉菜单

我为这个新手问题道歉。我还在研究Google Maps API V3以及Rails。每次用户从下拉列表中选择不同的城市时，我都会尝试更改谷歌地图的中心。例如，如果用户选择纽约市，则地图以纽约市为中心，如果用户选择芝加哥，则地图将更改为芝加哥。我可以为星巴克这样的地方做标记，但似乎不能为城市做标记。目前，当我加载页面时，没有地图出现-但是，如果我删除getCityOnSelect:function（）{-那么地图就会出现。我在下面列出了所有相关代码。非常感谢您的帮助

\u form.html.erb

<div class="field">
<%= f.label :city %><br>
<select name="item[city_id]" id="item_city_id">
    <option></option>
    <% City.all.each do |city| %>
        <option value="<%= city.id %>" data-lat1="<%= city.latitude %>" data-lng1="<%= city.longitude %>"><%= city.name %></option>
    <% end %>
</select>
</div>
<div class="field">
<%= f.label :location %><br>
<select name="item[location_id]" id="item_location_id">
    <option></option>
    <% Location.all.each do |location| %>
        <option value="<%= location.id %>" data-lat="<%= location.latitude %>" data-lng="<%= location.longitude %>"><%= location.name %></option>
    <% end %>
</select>

City.destroy_all
nyc = City.create!(name:"New York City", latitude: 40.7128, longitude: -74.0059)
sf = City.create!(name:"San Francisco", latitude: 37.7749, longitude: -122.4194)
austin = City.create!(name:"Austin", latitude: 30.2672, longitude: -97.7431)
la = City.create!(name:"Los Angeles", latitude: 34.0522, longitude: -118.2437)
Location.destroy_all
starbuck = nyc.locations.create!(name: "Starbucks", latitude: 40.7435331, longitude: -73.9182956)
thinkcofee = nyc.locations.create!(name: "Think Coffee", latitude: 40.751, longitude: -73.992)

coffeeController.js

CoffeeController = {

initialize: function() {
this.createMap();
this.getLocationOnSelect();
this.getCityOnSelect(); 
},

markers: [],    
createMap: function(){
    getCityOnSelect: function(){
    $("#item_city_id").change(function(e){
        console.log(e);

    $( "select option:selected" ).each(function() {
    lng = parseFloat($( this ).data('lng1'))
    lat = parseFloat($( this ).data('lat1'))        
    });
    })  
},
map = new google.maps.Map(document.getElementById('map'),{
center: getCityOnSelect,
zoom: 11,
mapTypeControl: false
});
},

getLocationOnSelect: function(){
$("#item_location_id").change(function(e){
console.log(e);

    $( "select option:selected" ).each(function() {
    lng = parseFloat($( this ).data('lng'))
    lat = parseFloat($( this ).data('lat'))
    CoffeeController.createmarker(lat, lng)
});
})
},
destroyMarkers: function(){
    for(var i=0; i< this.markers.length; i++){
        this.markers[i].setMap(null)
    }   
},
createmarker: function(lat, lng){
    this.destroyMarkers();
        var marker = new google.maps.Marker({
      position: { lat: lat, lng: lng},
      map: map

    });
CoffeeController.markers.push(marker)
}
}
function initMap(){
CoffeeController.initialize();
}
$(document).ready(function(){
});

咖啡控制器={
初始化：函数（）{
这个.createMap（）；
这个.getLocationSelection（）；
this.getCityOnSelect（）；
},
标记：[]，
createMap:function（）{
getCityOnSelect:函数（）{
$（“#项目(城市)id”）。更改（功能（e）{
控制台日志（e）；
$（“选择选项：选定”）。每个（函数（）{
lng=parseFloat（$（this）.data（'lng1'））
lat=parseFloat（$（this）.data（'lat1'））
});
})  
},
map=new google.maps.map（document.getElementById（'map'）{
中心：getCityOnSelect，
缩放：11，
mapTypeControl:false
});
},
GetLocationSelect:函数（）{
$（“#项目#位置#id”）。更改（功能（e）{
控制台日志（e）；
$（“选择选项：选定”）。每个（函数（）{
lng=parseFloat（$（this）.data（'lng'））
lat=parseFloat（$（this）.data（'lat'））
咖啡控制器。createmarker（lat，lng）
});
})
},
删除标记：函数（）{
对于（var i=0；i

您正在将地图的中心设置为函数getCityOnSelect，而不是google.maps.LatLng或lat/lng文本对象。我相信您的意思是调用该函数，顺便说一句，该函数似乎没有正确定义，也没有返回任何内容