Угловая карта поиска google внутри углового бутстрапа modal

Question

Im используя эти два холодных модуля с угловым модулем, Angular Google Map и Angular UI Bootstrap.

То, что я хочу добиться того, чтобы поставить google map с search box внутри этого modal, карта в одиночку работает нормально, но когда я добавляю search box есть конфликты.

Вот что у меня есть.

<script type="text/ng-template" id="modalTemplate.html"> 
<div class="modal-header"> 
    <h3 class="modal-title">Title</h3> 
</div> 
<div class="modal-body"> 

    <div class="row"> 
     <div class="col-xs-12"> 

      <div style="width:100%;"> 
       <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options"> 
        <ui-gmap-search-box template="searchbox.template" events="searchbox.events"></ui-gmap-search-box> 
       </ui-gmap-google-map> 
      </div> 

     </div> 
    </div> 

</div> 
<div class="modal-footer"> 
    <button class="btn btn-default" ng-click="close()">Close</button> 
</div> 

А на карте controller:

Вот код search box$scope.searchbox = { template:'<input type="text" placeholder="Search Box">', events:events};

карта прекрасно работает в поле поиска ее не показывает, кроме.

Answer 1

Включили ли вы библиотеки мест, когда вы включили карты google? Если нет, это может быть причиной. Также проверьте, инициализированы ли события var.

Как так:

https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false 

var events = { 
     places_changed: function (searchBox) { 
      //do something 
     } 
} 

Answer 2

.pac-container { 
    z-index: 1051; 
} 

Answer 3

Лучше поздно, чем никогда, но я не думаю, что шаблон строка окна поиска должна быть путь, а не HTML. Я пробовал то же самое с определением html в строке шаблона, но это, похоже, не работает.

Если вы проверили консоль браузера, когда используете html вместо строки пути, вы увидите, что для шаблона имеется «404 не найден».

---

В моем проекте я использую следующие настройки:

Мой HTML для отображения и SearchBox:

<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options" control="map.control"> 
     <ui-gmap-search-box template="searchBox.template" events="searchBox.events" options="searchBox.options"></ui-gmap-search-box> 
</ui-gmap-google-map> 

и следующий код для SearchBox в моем контроллере:

$scope.searchBox = { 
    template: 'app/components/setting/area/newarea/searchTemplate.html', 
    options: { 
     autocomplete: true, 
     types: ['address'], 
     componentRestrictions: { country: bounderies } 
    }, 
    events: { 
     place_changed: function (searchBox) { } 
    } 
} 

Параметры используются для Google отображает подсказки при вводе текста в поле поиска

В searchTemplate.html У меня есть следующий HTML-код:

<input type="text" placeholder="{{'FINDLOCATION' | translate}}"> 

на {{ 'FINDLOCATION' | translate}} используется для преобразования pascalprecht.

Надеюсь, это поможет.