Hello! There is such a controller, it adds markers to Google map

angular.module('frontApp') .controller('GoogleMapController', function ($scope) { $scope.cities = []; var mapOptions = { zoom: 6, center: new google.maps.LatLng(48.379433, 31.16558) }; $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions); $scope.markers = []; var infoWindow = new google.maps.InfoWindow(); var createMarker = function (info) { $scope.marker = new google.maps.Marker({ map: $scope.map, position: new google.maps.LatLng(info.lat, info.long), title: info.place }); $scope.marker.content = '<div class="info-window">' + info.desc + '<br/>' + info.lat + 'E,' + info.long + ' N, </div>'; google.maps.event.addListener($scope.marker, 'click', function () { infoWindow.setContent('<h2>' + $scope.marker.title + '</h2>' + marker.content); infoWindow.open($scope.map, $scope.marker); }); $scope.markers.push($scope.marker); }; $scope.openInfoWindow = function (e, seletedMarker) { e.preventDefault(); google.maps.event.trigger(seletedMarker, 'click'); }; $scope.autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocompete')); $scope.autocomplete.bindTo('bounds', $scope.map); google.maps.event.addListener($scope.autocomplete, 'place_changed', function () { var place = $scope.autocomplete.getPlace().address_components[0].long_name; var desc = $scope.autocomplete.getPlace().formatted_address; var lat = $scope.autocomplete.getPlace().geometry.location.lat(); var long = $scope.autocomplete.getPlace().geometry.location.lng(); var newCity = { place: place, desc: desc, lat: lat, long: long }; $scope.cities.push(newCity); for (var i = 0; i < $scope.cities.length; i++) { createMarker($scope.cities[i]); } });

});

In my code, the $scope.cities updated only inside the google.maps.event.addListener($scope.autocomplete, 'place_changed'... function google.maps.event.addListener($scope.autocomplete, 'place_changed'... And outside it is empty.

Hence the question: "How to add cities entered via autocompet into the cities array?"

  • one
    the angular does not know that the event occurred at the map and therefore does not update the view, for specifying you need to use $scope.$apply or $timeout service - Grundy
  • @Grundy. Thank you very much!!!!! You helped me a lot. Now it works :) - Julia Petrishina
  • If you have solved the problem yourself, you can add your solution as an answer - Grundy

0