Re-create the map using the angularjs google map directive

Question

I use the angularjs square theme and use my map directive to create such a map:

<map class="ui-map" zoom="7" center="[32.794065, -97.439365]" style="height:250px !important;" >
</map>

This is on the search page and works just as when searching for a user with any location (text address), he automatically generates contacts on the map, respectively.

Now the problem is that it generates contacts, but does not move or scale the map in the place where the contact was created.

Questions:

• Can anyone suggest me how can I do this?
• Do I need to recreate the map every time I search?
• If so, how can I reinitialize the directive from the controller side?
• If not, how to do it?

Answer 1

I implemented a good search, you can see the source code here

http://malix.io/SyrVet/#/

}])

    .directive('map', ['$compile', '$templateCache', '$timeout', 'Geo', 'Drive', function($compile, $templateCache, $timeout, Geo, Drive) {
      return {
        restrict: 'C',
        template: '<div>A</div>',
        replace: true,
        scope: {
          dealers: '=',
          search: '=',
          searching: '='
        },
        link: function(scope, ele, attrs) {

          var body = angular.element(document.querySelector('body'));

          console.log(body);

          var markers = [];
          var center = [-94.2861328, 56.2571657];

          function clearOverlays() {
            for (var i = 0; i < markers.length; i++) {
              markers[i].setMap(null);
            }
            markers.length = 0;
          }

          var latlng = new google.maps.LatLng(56.2571657, -94.2861328);//(45.8, -72);
          var myOptions = {
            zoom: 4,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(ele[0], myOptions);

          var geocoder = new google.maps.Geocoder();

          scope.windowInfo = {
            title: 'window',
            desc: 'desc'
          }
          var infoWindowTemplate = $templateCache.get('infoWindowTemplate').trim();
          var infoWindowElem = $compile(infoWindowTemplate)(scope);
          window.infowindow = new google.maps.InfoWindow({
            content: infoWindowElem[0],
            disableAutoPan: true,
            maxWidth: Math.min(480, window.innerWidth)
          });

          function makeBounds(data) {
            return new google.maps.LatLngBounds(
                new google.maps.LatLng(data.southwest.lat,data.southwest.lng),
                new google.maps.LatLng(data.northeast.lat,data.northeast.lng))
          }
          scope.$watch('search', function(a) {
            clearOverlays();
            var code = ('' + a).replace(/ /g, '').toUpperCase();
            if (a && code !== a) {
              scope.search = code;
            }
            if (a && (a.length === 3 || a.length === 6)) {
              scope.searching = true;
              Drive.geocode(a).then(function(data) {
                scope.searching = false;
                if (!data) {
                  scope.search = '';
                  return;
                }
                center = data;
                var postal_rectangle = new google.maps.Rectangle({
                  strokeColor: '#FF0000',
                  strokeOpacity: 0.5,
                  strokeWeight: 1,
                  fillColor: '#FF0000',
                  fillOpacity: 0.1,
                  map: map,
                  bounds: makeBounds(data[2])});

                markers[markers.length] = postal_rectangle;

                var marker = new google.maps.Marker({
                  map: map,
                  position: new google.maps.LatLng(data[1], data[0]),
                  title: a.toUpperCase(),
                  icon: 'http://labs.google.com/ridefinder/images/mm_20_black.png'//http://labs.google.com/ridefinder/images/mm_20_red.png'//'home.png'//'http://maps.google.com/mapfiles/kml/shapes/arrow.png'
                });
                markers[markers.length] = marker;
                scope.OK = function() {
                  map.setCenter(marker.getPosition());
                  map.setZoom(8);
                  window.infowindow.close();
                }
                scope.dealers.forEach(mapDealer);
                scope.OK();
              });
            }
          });


          var delay = 10;

          function addMarker(dealer, lat, lng) {
            var dist = Geo.distance(center, lat, lng);
            if (dist > 201) return;
            var marker = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(lat, lng),
              title: dealer[0]
              //icon:'http://labs.google.com/ridefinder/images/mm_20_red.png'
            });
            google.maps.event.addListener(
                marker, 'mousedown', function() {
                  body.addClass('wait');
                  window.infowindow.close();
                  $timeout(function() {
                    map.setCenter(marker.getPosition());
                    map.setZoom(11);
                    scope.windowInfo.title = dealer[0];
                    scope.windowInfo.address = dealer[1].replace('', '');
                    scope.windowInfo.telephone = dealer[2];
                    scope.windowInfo.distance = dist.toFixed(0)
                    window.infowindow.setOptions({maxWidth: Math.min(480, window.innerWidth)});
                    window.infowindow.open(marker.get('map'), marker);
                    body.removeClass('wait');
                  }, 100);
                });

            marker.infowindow = infowindow;
            markers[markers.length] = marker;
            marker.orderid = markers.length;
          }

          function mapDealer(dealer, index) {
            var found = !!(dealer, dealer[3] && dealer[3].length && dealer[4] && dealer[4].length && true);
            if (found) {
              delay += 10;
            } else {
              delay += 750;
            }
            setTimeout(function() {
              if (found) {
                addMarker(dealer, parseFloat(dealer[3]), parseFloat(dealer[4]));
              } else {
                var parts = dealer[1].split(/(?:,\s?)/gi);
                var options = {
                  'address': parts[0]
                };
                var code = /([A-Z][0-9][A-Z] [0-9][A-Z][0-9])/gi.exec(dealer[1])[0];
                if (code) {
                  options.componentRestrictions = { postalCode: code,
                    country: 'CA'};
                }
                geocoder.geocode(options, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                    dealer[3] = results[0].geometry.location.lat();
                    dealer[4] = results[0].geometry.location.lng();

                    console.log(dealer);

                    addMarker(dealer, parseFloat(dealer[3]), parseFloat(dealer[4]));

                  } else {
                    console.log(options, arguments);
                  }
                });
              }
            }, delay);
          };

        }
      };
    }])
;