CODEWITHSUNDEEP
angulargoogle-mapsgoogle-maps-api-3
Bruno Amezcua Arévalo
Bruno Amezcua Arévalo

Reputation: 565

Adding custom styles to angular map using @angular/google-maps

I'm using Angular 11 and @angular/google-maps, Im looking to create a map that's the same width as it's parent, but I'm only managing to get a square map (as seen in the image) Actual map display

I'm calling the google-maps api script in my index.html with my API Key

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"
  type="text/javascript"></script>

And generating the map in my overview.component.ts

    <div id='map'>
      <google-map [center]='center'></google-map>
    </div>

Giving it the following styles in overview.component.scss

.main-container {
  width: 100%;
  height: 100%;
}

#map {
  padding: 1% 1% 1% 1%;
  width: 100% !important;
  height: 400px !important;
}

I've also tried giving with to the google-map tag itself without any luck

Upvotes: 2

Views: 2328

Answers (1)

Ashvin Pal
Ashvin Pal

Reputation: 96

You need to set the width in the google-map tag.

<google-map width="100%"></google-map>

You can find more info in the docs here

here is a stackblitz example here

Upvotes: 3

Related Questions