angularjs - Angular google map searchbox inside angular bootstrap modal -

im using these 2 cool angular modules, angular google map , angular ui bootstrap.

what want achieve put google map search box inside modal, map alone works fine when add search box there conflicts.

here have far.

<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> 

and on map controller :

here's code search box $scope.searchbox = { template:'<input type="text" placeholder="search box">', events:events};

the map works fine except search box not showing.

better late never, think search box template string should path , not html. tried same defining html in template string, not seem work.

if check browser console when use html instead of path string you'l see there "404 not found" template.

---

in project use following setup:

my html map , 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> 

and following code searchbox in controller:

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

the options used google maps hints when typing in search box

in searchtemplate.html have following html code:

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

the {{'findlocation' | translate}} used pascalprecht translate.

hope helps.