当前位置: 动力学知识库 > 问答 > 编程问答 >

angularjs - ng-map and place autocomplete not working in modal

问题描述:

I am using ng-map directive and place autocomplete API in my angularjs application. which are working fine.

but the problem is I need Both in a bootstrap modal and when i am using same code in a bootstrap modal, Nothing is working neither ng-map nor place autocomplete.

Suggest me if I am missing something.

problem occures only when i use angular's ng-map directive. With javascript everything works fine but I don't want to write bulk of code. I wanna use ng-map only.

Here is my markup

<ng-map zoom="8">

<marker visible="true" centered="true" position="current-location" title="You are Here" draggable="true"></marker>

<marker visible="true" centered="true" position="{{vm.place.formatted_address}}" title="You are looking for this" draggable="true"></marker>

<marker ng-repeat="c in vm.cities" position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="vm.showCity(event, c)"></marker>

<directions

draggable="false"

travel-mode="DRIVING"

panel="p3"

origin="jaipur"

destination="Delhi">

</directions>

</ng-map>

see my

plunkr

for whole code

网友答案:

Since the map is displayed in bootstrap modal, the map needs to be explicitly intialized once the modal dialog is opened as demonstrated below:

 $('#myModal').on('show.bs.modal', function(e) {
        $timeout(function() {
            google.maps.event.trigger(vm.dialogMap, 'resize');
            vm.dialogMap.setCenter(vm.mapSettings.center);
            vm.dialogMap.setZoom(vm.mapSettings.zoom);
        });
 }); 

'show.bs.modal' event is triggered once the modal is opened.

From another hand, unfortunately angularjs-google-maps at the moment contains a bug that prevents the route to be printed if multiple map instances are added into a page (in your example there are two map instances)
In the below example is provided a workaround.

Working example

The following forked plunker demonstrates how to:

  • properly display map in modal dialog
  • print routes in multiple map instances
分享给朋友:
您可能感兴趣的文章:
随机阅读: