angularjs ng-map will auto focus on my location for seemingly no reason

Question

I am using angular ng-map in my web app. I built a function that will take the selected user's address, put a marker there, then zoom into it. However, if I do not use a setTimeout to focus on my marker, the map will automatically snap to my geolocation, despite the fact that i dont use geolocate anywhere in my app. Does anyone know how/why this happens?

Controller:

NgMap.getMap({id:'map'}).then(function(map) {
          console.log('map', map);
          vm.map = map;
          //GEOCODER
          var patientLat;
          var patientLon;
          var geocoder = new google.maps.Geocoder();
          geocoder.geocode( { "address": vm.myData.addressHome + ' ' + vm.myData.addressCity + ' ' + vm.myData.state + ' ' + 'USA'}, function(results, status) {
              if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
                  var location = results[0].geometry.location;
                    patientLat      = location.lat();
                    patientLon      = location.lng();
                console.log("the patient is located at " + patientLat + " " + patientLon);
                vm.patientLocation = [
                  {
                    "patientLat" : patientLat
                    , "patientLon" : patientLon
                  }
                ]
                setTimeout(function(){
                  patientPos(patientLat, patientLon);
                }, 2000) <---------- here is the timeout i need

              }
          });
        });

        function patientPos(patientLat, patientLon) {
          console.log(patientLat);
          console.log(patientLon);
          var bounds2 = new google.maps.LatLngBounds();
          var latLng2 = new google.maps.LatLng(patientLat, patientLon);
          bounds2.extend(latLng2);
          vm.map.fitBounds(bounds2);
          vm.map.setZoom(10);
        }

HTML

 <ng-map
      id="map"
      scrollwheel="false"
      >

      <marker
         ng-repeat="q in vm.patientLocation"
         position="{{q.patientLat}}, {{q.patientLon}}"
         icon="{
           url:'app/assets/img/patienticon.png',
           scaledSize:[30,30]
         }"
         id="lkj98"
        ></marker>

      <marker
        ng-repeat="p in locatorGridData track by $index"
        position="{{p.Location.Lat}}, {{p.Location.Long}}"
        icon="{
          url:'app/assets/img/placeholder.png',
          scaledSize:[30,30]
        }"
        id="{{p.id}}"
        on-click="vm.showDetail(p)"
        class="markers"
       ></marker>
      <shape id="circle" name="circle" centered="true"
        stroke-color='#bc1212' stroke-opacity="0.8"stroke-weight="2"
        center="current-position" radius={{vm.selectedRadius}} editable="false" ></shape>
      <info-window id="infoWindow" visible-on-marker="lkj98yuih">
        <div ng-non-bindable="">
          <div class="practice-name">{{vm.p.Location.OrgName}}</div>
          <div class="name-specialty">{{vm.p.Provider.firstName}} {{vm.p.Provider.lastName}}, {{vm.p.Provider.speciality}}</div>
          <div class="other-text-for-info-window">
            {{vm.p.Location.Address1}}<br>
            {{vm.p.Location.City}}, {{vm.p.Location.State}}<br>
            {{vm.p.Location.Zip}}
          </div>
        </div>
      </info-window>
    </ng-map>

score 1 · Answer 1 · answered Feb 22 '17 at 20:18

You are trying to set a position before the controller has finished so the values haven't updated in the $digest cycle of angular. Basically you are setting those values too soon. To render it immediately after you can take advantage of the $scope.$$postdigest method.

Instead of the timeout you can do:

$scope.$$postDigest(function(){
 patientPos(patientLat, patientLon);
})

or with the $timeout method:

$timeout(function(){
   patientPos(patientLat, patientLon);
},0,false);
//Run immediately after digest (0 ms after) and do not trigger another digest cycle

Assuming you have gotten the $scope or $timeout in your controller already included.

score 0 · Answer 2 · answered Feb 22 '17 at 20:20

Turns out I had a shape that had a current position in it

  <shape id="circle" name="circle" centered="true"
    stroke-color='#bc1212' stroke-opacity="0.8"stroke-weight="2"
    center="current-position" radius={{vm.selectedRadius}} editable="false" ></shape>

when I removed it, all was solved

angularjs ng-map will auto focus on my location for seemingly no reason

2 Answers2