I'm currently working on integrating the Google Maps API into an Angular website, but I'm encountering initialization issues.
Within my HTML page, I'm utilizing bootstrap nav nav-tabs and switching between tabs using an Angular controller.
<ul class="nav navbar-nav">
<li ng-class="{ active:myCtrl.isSet('map') }">
<a href ng-click="myCtrl.setTab('map')">Show Map</a>
</li>
</ul>
One of the tabs includes only the Google map canvas element, implemented through an Angular directive:
Module.directive('mapPage', function() {
return {
restrict: 'E',
template: '<div id="map-canvas"></div>'
};
});
In my Angular controller, I've set up a listener for the window 'load' event to initialize the map:
google.maps.event.addDomListener(window, 'load', myCtrl.initMap);
myCtrl.initMap = function() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(55.937879, -3.241619),
};
myCtrl.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(55.937879, -3.241619),
map: myCtrl.map
});
myCtrl.map.setCenter(new google.maps.LatLng(55.937879, -3.241619));
}
Upon viewing the screen, the map element displays a grey area with the location marker not correctly centered (slightly off-screen).
Moving the map-canvas div to the main section of the index.html page results in correct loading, indicating that my Google API JavaScript code and HTML are accurate. The map also displays when resizing the page.
However, the issue arises when using it on a non-immediate rendering page. Despite searching for similar questions/answers, this particular problem remains unresolved.
I've created a simple fiddle showcasing the issue.
http://jsfiddle.net/johntough/nc0u7h2c/5/
Any assistance would be highly appreciated!