Google Map full width not working

ionic-v1
1

Hi, why is Google Map full width not working? I already added width:100% in the css but still its not working.

html

<div id="map" data-tap-disabled="true"></div>

css

.scroll {
height: 100%;
}

#map {
width: 100%;
height: 100%;
}

js

$scope.initialise = function(){

var myLatlng = new google.maps.LatLng(37.3000, -120.4833);
var mapOptions = {
    center: myLatlng,
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};


console.log(mapOptions);
var map = new google.maps.Map(document.getElementById("map"), mapOptions);


};
google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise());
2 
#map {
  display: block;
  width: 100%;
  height: 100%;
}

.scroll {
  height: 100%;
}

Needless to say you should check your console and inspector to see what’s what.

Also, check this repo. It’s a better implementation of Google Maps.