谷歌地图内的引导模式不起作用 [英] Bootstrap modal inside google map is not working

问题描述

我试图在bootstrap模式中添加Google地图，但它不适合我。当我点击链接时，它会打开模式窗口，但地图无法正常显示，它没有模态地正常工作，但我不知道，现在发生了什么。
$ b

 < script type =text / javascript> $（document）.on（click，.open-AddBookDialog，function（）{var myBookId = $（this）.data（'id'）; $（。modal-body #bookId）.val （myBookId）;}）; < /脚本> <！ -  MAP  - > < script type =text / javascript> $（function（）{var lat = 13.034118，lng = 77.5679959; latlng = new google.maps.LatLng（lat，lng），image ='http://www.google.com/intl/zh-CN/mapfiles/ms/ micons / blue-dot.png'; // zoomControl：true，// zoomControlOptions：google.maps.ZoomControlStyle.LARGE，var mapOptions = {center：new google.maps.LatLng（lat，lng），zoom：13，mapTypeId ：google.maps.MapTypeId.ROADMAP，panControl：真，PanControlOptions，以：{位置：google.maps.ControlPosition.TOP_RIGHT}，zoomControl可：真，ZoomControlOptions来：{风格：google.maps.ZoomControlStyle.LARGE，位置：google.maps。 ControlPosition.TOP_left}}，map = new google.maps.Map（document.getElementById（'map_canvas'），mapOptions），marker = new google.maps.M arker（{position：latlng，map：map，icon：image}）; var input = document.getElementById（'searchTextField'）; var autocomplete = new google.maps.places.Autocomplete（input，{types：[geocode]}）; autocomplete.bindTo（'bounds'，map）; var infowindow = new google.maps.InfoWindow（）; google.maps.event.addListener（autocomplete，'place_changed'，function（event）{infowindow.close（）; var place = autocomplete.getPlace（）; if（place.geometry.viewport）{map.fitBounds（place.geometry ）;其他{map.setCenter（place.geometry.location）; map.setZoom（17）;} moveMarker（place.name，place.geometry.location）; $（'。MapLat'）。val（place .geometry.location.lat（））; $（'。MapLon'）.val（place.geometry.location.lng（））;}）; google.maps.event.addListener（map，'click'，function（event）{$（'。MapLat'）。val（event.latLng.lat（））; $（'。MapLon'）。val（event。 latLng.lng（））; infowindow.close（）; var geocoder = new google.maps.Geocoder（）; geocoder.geocode（{latLng：event.latLng}，function（results，status）{console.log结果，状态）; if（status == google.maps.GeocoderStatus.OK）{console.log（results）; var lat = results [0] .geometry.location.lat（），lng = results [0] .geometry .location.lng（），placeName = results [0] .address_components [0] .long_name，latlng = new google.maps.LatLng（lat，lng）; moveMarker（placeName，latlng）; $（ ＃searchTextField）VAL（结果[0] .formatted_address）; }}）; }）;函数moveMarker（placeName，latlng）{marker.setIcon（image）; marker.setPosition（经纬度）; infowindow.setContent（地名）; //infowindow.open(map，marker）; }}）;< / script>  

< style类型= 文本/ CSS > @import url（'http://getbootstrap.com/dist/css/bootstrap.css'）;< / style>

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js> < / script>< link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css><！ -  jQuery library  -  - >< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js>< / script><！ - 最新编译的JavaScript - >< script src =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js>< / script>< script src =http：/ /maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true\"></script><a数据肘节= 模态 数据-ID = ISBN564541 标题= 添加此产品的 类= 开addBookDialog BTN BTN-初级的 href = ＃addBookDialog 数据肘节= 模态 数据对象= ＃myModal >点击< / A>< ; br>地址：< input id = searchTextFieldtype =textsize =50style =>< br> < div class =modal fadeid =myModaltabindex = -  1role =dialogaria-labelledby =myModalLabelaria-hidden =true> < div class =modal-dialog> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modalaria-hidden =true>& times;< / button> < h4 class =modal-titleid =myModalLabel>模式标题< / h4> < / DIV> < div class =modal-body> <！ - < img width =241height =72style =top：0px; width：241px; height：72px; src =img / logos / logo.pngdata-sticky-top =41data-sticky-height =36data-sticky-width =135alt =srisankaramatrimony-franchisee> - > < div id =map_canvasstyle =height：300px; width：100％; margin：0.6em;>< / div> < / DIV> < div class =modal-footer> < button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< /按钮> < button type =buttonclass =btn btn-primary>保存更改< /按钮> < / DIV> < / div><！ -  /.modal-content  - > < / div><！ -  /.modal-dialog  - >< / div><！ -  /.modal  - >