Ошибка SelectPicker Bootstrap с Google Map

Question

Я хочу установить выбранный вариант в Select Picker, у меня есть следующий код, который работает правильно.

HTML:

<select class="form-control input-sm selectpicker" id="area_location_id"> 
    <option value="" selected="">Select</option> 
    <option value="17">Al Barsha</option> 
    <option value="82">Al Furjan</option> 
    <option value="4924">Al Garhoud</option> 
    <option value="5787">Al Jadaf</option> 
    <option value="5684">Al Mamzar</option> 
    <option value="123">Dubai Marina</option> 
</select> 
<div id="map-canvas"></div> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"> </script> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<script src="js/bootstrap-select.js"></script> 
<script src="js/bootstrap-datepicker.js"></script> 
<script src="js/dropzone.js"></script> 
<script src="plugin/sumernote/summernote.min.js"></script> 

JQuery:

var userToSearchFor = " Marina"; 

$("#area_location_id").find("option:contains('" + userToSearchFor + "')").each(function() { 
    $(this).attr("selected", "selected"); 
}); 

$('#area_location_id').selectpicker('val', userToSearchFor); 
$('#area_location_id').selectpicker('refresh'); 

Приведенный выше код работает и 'Dubai Marina' выбран. FIDDLE

Что я хочу:

Теперь я хочу использовать этот код в код Google Maps, когда пользователь выбирает любое место, он должен выбрать.

Вот мой код, который не работает

google.maps.event.addListener(map, "click", function (event) { 

    var userToSearchFor = " Marina"; 
    $("#area_location_id").find("option:contains('" + userToSearchFor + "')").each(function() { 
     $(this).attr("selected", "selected"); 
    }); 
    $('#area_location_id').selectpicker('val', userToSearchFor); 
    $('#area_location_id').selectpicker('refresh'); 
}); 

Теперь тот же код не работает here.Although контроль приходит сюда.

ОБНОВЛЕНО: Когда я включить этот файл, то только мой код не работает

bootstrap-select.js 

помощь?

Answer 1

Нет причин, по которым это не сработает.

function initialize() { 

    var myLatlng = new google.maps.LatLng(46.2, 6.17); 
    var mapOptions = { 
     zoom: 4, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 

    google.maps.event.addListener(map, "click", function (event) { 

     var userToSearchFor = " Marina"; 
     $("#area_location_id").find("option:contains('" + userToSearchFor + "')").each(function() { 
      $(this).attr("selected", "selected"); 
     }); 
     $('#area_location_id').selectpicker('val', userToSearchFor); 
     $('#area_location_id').selectpicker('refresh'); 
    }); 
} 

initialize(); 

JSFiddle demo