Google Map Angular JS

Question

I have the following code:

<script>
//google maps integration
function initializeMap() {
    var mapCanvas = document.getElementById('map-canvas');
    var mapOptions = {
        center: new google.maps.LatLng(angular.element(document.getElementById('map-canvas')).scope().latitude, angular.element(document.getElementById('map-canvas')).scope().longitude), 
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
}
google.maps.event.addDomListener(window, 'load', initializeMap);

<div id="map-canvas" style="width: 95%; height: 40%; background-color: #CCC; margin-left: auto; margin-right: auto;"></div>

The script for using 'google' is imported (and works, otherwise I would get an error in the console), however I see a gray box every time - even if I change the values in google.maps.LatLng to real numbers instead of the angular values from above. What am I doing wrong? Thanks for any help.

Answer 1

Since i cannot comment on your answer to ask your further clarifications i assume that there is no error but there is complete grey area in your map.

Add this code after your map gets loaded.

google.maps.event.trigger(map, 'resize');