2

I'm using Angular.js on my website and i'm able to load the map with a pin on a particular geocode with data i'm getting from a GET request on my server. However, when the user goes to a new page, the map loads...but only partially. The rest of the map is a gray area. My code is below:

data.map.center = new google.maps.LatLng(parseFloat(response.geocode.latitude), parseFloat(response.geocode.longitude));
data.map.mapEnabled = true;
var map_canvas = document.getElementById('map_canvas');
var map_options = {
    center: data.map.center,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoomControl: false,
    panControl: false,
    scrollwheel: false,
    draggable: false,
    mapTypeControl: false,
    streetViewControl: false
};

data.map.mapObject = new google.maps.Map(map_canvas, map_options);
var marker = new google.maps.Marker({
    map: data.map.mapObject,
    position: data.map.center
});

Is there a reason the map loads partially on the next page? When I do a refresh it then loads it in full, but why is it not working initially?

I read the following on this:

Google Maps API v3: How to remove all markers?

Google Maps API V3 not rendering competely on tabbed page using Twitter's Bootstrap

Google Maps don't fully load

EDIT

It seems part of the reason is that i'm not refreshing the page when the user clicks on the second link. I'm only using hashes and then loading it that way... Not sure if there's something I should be doing differently for this?

Community
  • 1
  • 1
KVISH
  • 12,923
  • 17
  • 86
  • 162

2 Answers2

2

This is how i managed to make it, you define the initialize function in the controller then call it relatively to the scope as $scope.initialize

appControllers.controller('ContactpageController',['$scope',function($scope){


$scope.initialize=function() {
          var myLatlng = new google.maps.LatLng(-37.815207, 144.963937);
          var mapOptions = {
              zoom: 15,
              scrollwheel: false,
              center: myLatlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          }
          var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
          var marker = new google.maps.Marker({
              position: myLatlng,
              map: map,
              title: 'Hello World!'
          });
      }

      $scope.initialize();

}]);
Bakly
  • 640
  • 6
  • 18
0

Found the answer here:

http://www.ultrawebsites.com/2013/05/angularjs-angularui-maps-module-and-page-reload/

My code is here:

setTimeout(function () {
    google.maps.event.trigger(data.map.mapObject, 'resize');
    data.map.mapObject.setCenter(data.map.center);
}, 100);

I put this below the code above.

KVISH
  • 12,923
  • 17
  • 86
  • 162
  • This did not work for me not even after setting the timeout for 1000 but will add the solution that worked for me as an answer – Bakly Dec 11 '14 at 12:34