CODEWITHSUNDEEP
javascripthtmlcssangularjsgoogle-maps
AirUp
AirUp

Reputation: 446

Google maps full height style angularjs

I am struggling to get a full-height Google map displayed on my site.

<section data-ng-controller="LocationsController" data-ng-init="find()">
<map center="41.454161, 13.18461" zoom="6">
    <span data-ng-repeat="location in locations">
        <marker position="{{location.latitude}},{{location.longitude}}"
         title="{{location.name}}"></marker>
    </span>
</map>
</section>

I am forced now to pass a style-attribute for height on the element, otherwise the framework ngMaps will output a default height of 300px to the element as an inline style.

Things I already tried were to overwrite style-attribute with jQuery .css() as well as defining the outer divs to 100% in width and height, but neither worked or the style set by ngMaps was not overwritten or the map disappeared completely.

If I want to achieve to display the map on 100% height, what else can I do that will make it work?

Upvotes: 1

Views: 3415

Answers (2)

r0m4n
r0m4n

Reputation: 3512

Pass default-style="false" into your map directive like this to remove the 300px inline style:

<map center="41.454161, 13.18461" zoom="6" default-style="false">

Then in your CSS, define the desired size like the answer above but specifying the correct selector:

map {
  position:absolute;
  width: 100%;
  height: 100%;
}

Upvotes: 1

stevecox
stevecox

Reputation: 1

See if adding "position:absolute" to the CSS helps - 

.map  {
  position:absolute;
  width: 100%;
  height: 100%;
}

Upvotes: 0

Related Questions