부트 스트랩의 SelectPicker Google지도 관련 문제

Question

Select Picker에서 selected Option을 설정하고 싶습니다. 제대로 작동하는 다음 코드가 있습니다.

는

는 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'); 

와 '두바이 마리나'가 선택되어 있습니다. FIDDLE

내가 원하는 무엇 :

가 지금은 사용자가 어떤 위치를 선택하면, 그것은 선택해야합니다, Google지도 코드에서이 코드를 사용하고 싶습니다.

여기에 이제 동일한 코드가 here.Although 컨트롤을 작동하지

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'); 
}); 

작동하지 않습니다 내 코드 여기에 온다.

업데이트 : 난 다음이 파일을 포함하는 경우에만 내 코드

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