Container filled with AGM Maps

Currently, I am working with angular2 and the Google Maps component from . The issue I am trying to address is the need for the map to fill my container div. For example:

<div id="container" style="height:100%; width: 100%">
<agm-map></agm-map>
<div>

(I'm using CSS for styling as opposed to inline styles in this example)

I am looking to have the agm-map always fill the container div regardless of its height or width. It seems challenging when the agm map only wants the height in pixels (px) or viewport height (vh).

In addition, having resizing and responsiveness would be great.

htmlcssangulargoogle-mapstypescript

Answer №1

I'm unable to provide too many specifics, but the html structure used by my company is as follows:

<div fxFlex="100" class="map-full-card-content">
  <agm-map [fitBounds]="latlngBounds"></agm-map>
</div>

Accompanied by a corresponding .scss file:

.map-full-card-content {
  height: 100% !important;
  width: 100%;
  margin: 0;

  agm-map {
    height: calc(100% - 12px) !important;
    width: 100%;
  }
}

This setup appears to effectively fill and resize the container as intended.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue regarding the functionality of CSS styling when applied to a button

Trying to Style a Button with CSS div.myButton input a { display:block; height: 24px; width: 43px; padding:10px 10px 10px 7px; font: bold 13px sans-serif;; color:#333; background: url("hover.png") 0 0 no-repeat; text-decoration: none; } myButton a:hover { ...

htmlcss

Unable to send message using window.parent.postMessage when src is set to "data:text/html;charset=utf-8" within an iframe

I'm currently working on a project to develop a compact editor that allows users to edit HTML using an iframe. I'm passing an HTML string into the src attribute as data:text/html, but I'm encountering challenges with communication in the par ...

javascripthtmlangularjs

Limiting the closure of Angular Material dialogs

Can the closing of an Angular Material Dialog be restricted on any body click? I'm currently working on a project using Angular Material with Angular 4 and I'm looking for a way to achieve this. ...

angularangular-material

Position child divs at the center of the parent div

I am struggling to center 3 child divs inside a parent div that must remain at a width of 100%. Can someone help me figure out how to achieve this? .parent { width: 100%; border: 1px solid blue; } .child { float: left; borde ...

htmlcss

Tips on preventing the entire HTML structure from being displayed on my <div> element after an Ajax success(response) call

I have successfully implemented a user logon system on my website with flawless code execution. Check out the reset password Ajax request below. html <div id="forgotPass"></div> <script type="text/javascript"> ...

phphtmljquery

Delete the stationary header and footer

How can I eliminate the fixed masthead and footer in the Cover bootstrap template? I've tried making edits to the files but haven't noticed any significant changes. http://getbootstrap.com/examples/cover/ ...

htmlcsstwitter-bootstraptemplatescover

Switching the ASP.NET XHTML Display Mode

I have been given HTML code from a designer to create a master page. The doctype in the HTML is set to HTML 4.0 Strict. The meta tags in the HTML do not contain closing end tags (they end with > instead of />) and the HTML is compliant when checked ...

asp.nethtml

Choosing an SVG Circle Using TypeScript

I am facing an issue with selecting a simple SVG <circle> element in my DOM using TypeScript: <svg viewBox="0 0 200 200"> <circle cx="50" cy="50" r="45" id="myCircle"/> </svg> In ...

typescriptdomsvg

Angular: Is it possible to gather data from multiple observables and store it in a regular array?

I am facing a challenge where I need to retrieve data from the backend and pass it on to a child component. Here is what I have so far: ... @Component({ selector: 'my-component', template: `<my-child-component [data]="data">& ...

angularrxjsngrx

I'm having trouble getting my Retina image code to work perfectly. The high resolution image isn't loading at its full

After learning how to display my Retina optimized logo from this tutorial (link), I encountered an issue when testing on my iPad and Samsung Galaxy Note II (using Safari, Firefox, Dolphin apps). The Retina image is showing up at its full size of 1200px x 5 ...

androidcssipadretina-display

How can I run a Redis Server on a port other than the default 6379 port using ioredis?

I recently came across this query regarding starting redis-server on a different port than the default 6379 in Ubuntu. I am currently trying to achieve the same using ioredis in my NestJS project, but unfortunately, it refuses to connect to any other port ...

typescriptredisnestjsioredis

Tips on extracting the value from an HTML input control

Looking for some assistance with a table generated by a 3rd party control. The table consists of only one row and one column containing HTML text like this: <p> this is a test</p> <p> <input name="amount" type="text" value="th ...

c#.netasp.nethtml

The interaction between a parent element and an iframe, combining mouseover/out events with clicking actions

I am brand new to programming and seeking some guidance. I came across a post about mouseover/out combined with click behavior that I found intriguing. However, I am struggling to implement it successfully in my code. Here is the code snippet: Child.htm ...

javascriptjqueryhtmlcss

Widget for navigating through Youtube videos

I am currently working on creating a widget that allows users to navigate a YouTube video using buttons. For instance, if the video is of a car race, there would be buttons labeled Lap 1, Lap 2, and so forth. My idea involves adding an extension to the vi ...

javascripthtmliframehyperlinkyoutube

Is there a way to use CSS to swap out the content of one HTML element with another HTML element's content?

Having an issue with editing or locating a plugin's HTML template on WordPress. Wondering if it is possible to replace the content of one HTML element with another using just CSS? Appreciate any help! ...

htmlcsswordpress

The width of the HTML page seems to adjust or shift when I click on

I'm encountering an issue with my navbar. Whenever I open the dropdown menu, the width of my page changes but returns to normal when it is closed. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="styl ...

htmlcsstwitter-bootstrapbootstrap-4

Fairly intricate React function component declaration with TypeScript

const withAuth = () => <OriginalProps extends {}>( Component: React.ComponentType<OriginalProps & IAuthContextInterface> ) => { } (withAuth()(PrivateRoute)) // this is how the HOC called Could someone simplify what this function d ...

reactjstypescript

Challenge with CSS3 Selectors

I'm struggling to understand why this code works: input[ type = "text" ]:last-of-type:focus{ border:1px solid red; } but this code doesn't work: input[ type = "checkbox" ]:last-of-type:checked{ border:1px solid red; } The example given with t ...

csscheckboxcss-selectorspseudo-class

What are some recommended strategies for incorporating nested routes with separate pages in a React application?

In my React (TypeScript) project, I have a basic routing setup. There's a constant display of a Header and a Footer, a home component for the frontpage, and a Projects section for showcasing past projects worked on. However, I'm facing an issue w ...

reactjstypescriptreact-routerreact-router-dom

Guide to Triggering a Page View Event in Google Tag Manager with Angular

Previously, I manually fired the Page View Event using JavaScript from app.component.ts while directly accessing Google Analytics: declare var gtag: Function; ... constructor(private router: Router) { const navEndEvents = this.router.events.pipe( fil ...

javascriptangulartypescriptgoogle-analyticsgoogle-tag-manager