angularjsgoogle-mapsgoogle-maps-api-3ng-map

NgMap infowindow not aligned with markers


I am using ngMap, but the infowindows are not aligned with the markers. they usually appear to be about 50px up and left of their marker. I should note that it did work originally, then we changed from Mongo to SQL, and for some reason, it never aligned after that....

Screenshot

enter image description here

Template

    <!-- the map -->
    <ng-map
      id="map"
      scrollwheel="false"
      class="row"
      >


      <marker
        id="{{p.scheduleId}}"
        ng-repeat="p in locatorGridData track by p.scheduleId"
        position="{{p.latitude}}, {{p.longitude}}"
        icon="{
          url:'app/assets/img/placeholder.png',
          scaledSize:[30,30]
        }"
        on-click="vm.selectFromMap(p)"
        class="markers"
      ></marker>



      <info-window id="infoWindow" visible-on-marker="vm.p.scheduleId">
        <div ng-non-bindable="" ng-click="vm.selectFromMap({},vm.p)" style="cursor: pointer;">
          <div class="practice-name">{{vm.p.locName}}</div>
          <div class="name-specialty">{{vm.p.firstName}} {{vm.p.lastName}}, {{vm.p.speciality}}</div>
          <div class="other-text-for-info-window">
            {{vm.p.address1}}<br>
            {{vm.p.city}}, {{vm.p.state}}<br>
            {{vm.p.zip}}
          </div>
        </div>
      </info-window>
    </ng-map>

Controller

    NgMap.getMap({id:'map'}).then(function(map) {
      vm.map = map;
      //GEOCODER
      patientPos(vm.patientLat, vm.patientLon);
    });

    function patientPos(patientLat, patientLon) {
      console.log(patientLat,patientLon, 'patient coordinate')
      var bounds2 = new google.maps.LatLngBounds();
      var latLng2 = new google.maps.LatLng($sessionStorage.patient_location.patientLat, $sessionStorage.patient_location.patientLon);
      bounds2.extend(latLng2);
      vm.map.fitBounds(bounds2);
      vm.map.setZoom(12);
    }

    vm.showDetail = showDetail;
    vm.hideDetail = hideDetail;
    vm.selectFromMap = selectFromMap;
    //info window stuff
    function showDetail (e, p) {
      vm.p = p;
      console.log('showdetail', e, p)
      vm.map.showInfoWindow('infoWindow', p.scheduleId);
    };

    function selectFromMap(e,p){
      vm.p = p;
      vm.map.showInfoWindow('infoWindow', p.scheduleId);
      var getAllRows = $scope.grid1Api.core.getVisibleRows($scope.grid1Api.grid);
      // c.log(getAllRows);
      // console.log(schedules);
      console.log(p)
      vm.schedules.forEach(function(schedule,idx){
        if(schedule.scheduleId == p.scheduleId){
          $scope.grid1Api.selection.selectRow(vm.schedules[idx]);

          console.log(schedules[idx]);
          console.log(idx);

          $scope.grid1Api.grid.getColumn('locName').filters[0] = {
            term: vm.schedules[idx].locName
          };
        }
      })

    }

    function hideDetail (e, p) {
      if(vm.map){
        vm.map.hideInfoWindow('infoWindow');
      }
    }

Solution

  • The invalid positioning of info window could be indeed related with input data. For example, for input data:

    vm.locatorGridData = [
          {
            "scheduleId": "Red square,Moscow",
            "latitude": 55.7539303,
            "longitude": 37.618601
          },
          {
            "scheduleId": 123, //Invalid key for marker, should be string
            "latitude": 55.7469862,
            "longitude": 37.5370785
          }
        ];
    

    the info window for the second marker will be incorrectly positioned:

    vm.map.showInfoWindow('infoWindow', p.scheduleId);  
    

    The second parameter (marker id) is expected to be provided as a string to properly determine the marker.

    angular.module('mapApp', ['ngMap'])
      .controller('mapController', function ($scope, NgMap) {
        var vm = this;
    
        vm.locatorGridData = [
          {
            "scheduleId": "Red square,Moscow",
            "latitude": 55.7539303,
            "longitude": 37.618601
          },
          {
            "scheduleId": 123, //"The Moscow city",
            "latitude": 55.7469862,
            "longitude": 37.5370785
          },
          /*{
            "scheduleId": "Invalid POI",
            "latitude": "55.7469862",
            "longitude": -37.5370785
          }*/
        ];
    
        NgMap.getMap({ id: 'map' }).then(function (map) {
          vm.map = map;
        });
    
        vm.selectFromMap = function (e, p) {
          vm.content = p.scheduleId;
          vm.map.showInfoWindow('infoWindow', p.scheduleId.toString());
    
        };
      });
    .row {
        width: 100%;
        height: 240px;
      }
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
    <div ng-app="mapApp" ng-controller="mapController as vm">
    
      <ng-map id="map" scrollwheel="false" class="row" center="[55.7539303,37.618601]" zoom="12">
        
        <marker id="{{p.scheduleId}}" ng-repeat="p in vm.locatorGridData track by p.scheduleId" position="{{p.latitude}}, {{p.longitude}}"
          on-click="vm.selectFromMap(p)" icon='{
              "url":"https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png",
              "scaledSize":[80,80]
            }' class="markers"></marker>
    
        <info-window id="infoWindow">
          <h2>{{vm.content}}</h2>
        </info-window>
      </ng-map>
    </div>