CODEWITHSUNDEEP
angularjsgoogle-maps
KVISH
KVISH

Reputation: 13178

Google Map not loading completely after inital call

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?

Upvotes: 2

Views: 974

Answers (2)

Bakly
Bakly

Reputation: 650

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();

}]);

Upvotes: 2

KVISH
KVISH

Reputation: 13178

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.

Upvotes: 0

Related Questions