title: Resize google map frame in react js
body: <p>Currently using google-maps-react component in a contact form for a sales page.  This code has successfully imported the map and it is viewable in the dimensions 450x350.  My issue is, is that despite the image being 450x350 the frame or i guess div that the map api sits in still thinks the map is still default size so it pushes my entire site out with white space that is removed when i remove the Map API. No amount of adding styles as dimensions to anything around the map has fixed this. </p>
  
  <p>What do i pass into the map in order to effect the size of the frame and not just the image itself?</p>
  
  <pre><code>import React, { Fragment } from "react";
  import ContactForm from "../contactus/ContactForm";
  import { Map, Marker, GoogleApiWrapper } from "google-maps-react";
  const ContactUs = props =&gt; {
   const style = {
    maxWidth: "450px",
    height: "350px",
    overflowX: "hidden",
    overflowY: "hidden"
   };
   return (
    &lt;Fragment&gt;
     &lt;h2 className='lead text-primary text-center'&gt;Get in touch&lt;/h2&gt;
  
     &lt;div className='grid-2'&gt;
      &lt;div&gt;
       &lt;h4&gt;Priority Consulting&lt;/h4&gt;
       &lt;ul&gt;
        &lt;li&gt;
         1234 Sherman Way &lt;br /&gt;
         Sherman Oaks, CA 90210
        &lt;/li&gt;
        &lt;li&gt;info@priorityconsulting.com&lt;/li&gt;
        &lt;li&gt;1-800-324-3423&lt;/li&gt;
       &lt;/ul&gt;
       &lt;Map google={props.google} style={style} /&gt;
      &lt;/div&gt;
  
      &lt;div&gt;
       {" "}
       &lt;ContactForm /&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/Fragment&gt;
   );
  };
  
  export default GoogleApiWrapper({
   apiKey: "MYKEY"
  })(ContactUs);
  </code></pre>