1

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

Ali Usmaan
  • 51
  • 2
  • 15

2 Answers2

2

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
Vadim Gremyachev
  • 57,952
  • 20
  • 129
  • 193
-1

add a style .pac-container { z-index: 10000 !important; }

ref from there Google Places Autocomplete not showing up

here a plnkr for a your working example http://next.plnkr.co/edit/PrrKFvx3WbDFAXlk4ehH?p=preview

Nikolay Waysman
  • 1
  • 1