1

My ionic app gets some places from the database and generates a map from this data.

$scope.$on('$ionicView.beforeEnter', function(){

    // get event data
    Events.getEvent($stateParams.eventId).then(function(data){
      $scope.eventInfo = data[0];
      $ionicLoading.hide();
      // get location data
      if(data[0].location){
        Locations.getLocation(data[0].location).then(function(data){
          $scope.location = data[0];
          // call the map
          $scope.initialize($scope.location.locstreet, $scope.location.zip, $scope.location.ort);
        });
      }
});

After retrieving the data, the script calls the initialize function:

function initialize(strasse, plz, ort) {

    var map = new google.maps.Map(document.getElementById('map'),{
      zoom: 14
    });

    img =  new google.maps.MarkerImage("img/icon.png", null, null, null, new google.maps.Size(30,30));
    var geocoder = new google.maps.Geocoder();
    var address = strasse + ", " + plz + " " + ort;

    geocoder.geocode({'address': address}, function(results, status) {
      if (status === google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location,
          icon: img
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });

  }

This works great the first time I´m navigating to this view. If I leave the view and come back to the same view with other data, the map just shows grey with the google logo right bottom.

I think that this could happen because of the multiple intializing var map. But if I declare var map outside of the funktion it doesn´t work either.

m1crdy
  • 1,371
  • 2
  • 25
  • 58
  • Ye, thats happens me and make me mad. The problem its ever 4 google map not render dinamically, so if ur map its hide usually will not render. If u can put some jsfiddle or plunkr with this problem i can try solve u – Javierif Dec 14 '15 at 11:06
  • Probably the best approach is to use a directive for Google Maps as in this post http://stackoverflow.com/questions/34254687/google-maps-with-angular – beaver Dec 15 '15 at 07:44
  • @Javierif can you post your solution?.. I have the same issue. – Sergio A. Sep 21 '16 at 18:45

1 Answers1

1

Add this : cache: false to your state provider (when you defined your map). This worked for me.

Rajaoui32
  • 11
  • 2