CODEWITHSUNDEEP
reactjsgoogle-maps
Mickey Gray
Mickey Gray

Reputation: 460

Resize google map frame in react js

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.

What do i pass into the map in order to effect the size of the frame and not just the image itself?

import React, { Fragment } from "react";
import ContactForm from "../contactus/ContactForm";
import { Map, Marker, GoogleApiWrapper } from "google-maps-react";
const ContactUs = props => {
 const style = {
  maxWidth: "450px",
  height: "350px",
  overflowX: "hidden",
  overflowY: "hidden"
 };
 return (
  <Fragment>
   <h2 className='lead text-primary text-center'>Get in touch</h2>

   <div className='grid-2'>
    <div>
     <h4>Priority Consulting</h4>
     <ul>
      <li>
       1234 Sherman Way <br />
       Sherman Oaks, CA 90210
      </li>
      <li>[email protected]</li>
      <li>1-800-324-3423</li>
     </ul>
     <Map google={props.google} style={style} />
    </div>

    <div>
     {" "}
     <ContactForm />
    </div>
   </div>
  </Fragment>
 );
};

export default GoogleApiWrapper({
 apiKey: "MYKEY"
})(ContactUs);

Upvotes: 3

Views: 2132

Answers (1)

Mickey Gray
Mickey Gray

Reputation: 460

I went back into my code and found an updated version, that made it to a final version of the site. Unfortunately the site is no longer live so cant verify if this is the best answer but, like I said its in my code, so it probably solves.


 const style = {
  maxWidth: "450px",
  height: "350px",
  overflowX: "hidden",
  overflowY: "hidden"
 };
 const containerStyle = {
  maxWidth: "450px",
  height: "350px"
 };


 <Map google={props.google} style={style} containerStyle={containerStyle} />

Upvotes: 2

Related Questions