map size changed to fullscreen

Author: pranay414

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
-    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCIQgYcDxRD6DuhEljaMFRjwgJ73cjJIJk"
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCIQgYcDxRD6DuhEljaMFRjwgJ73cjJIJk"
     type="text/javascript"></script>
     <!--
       manifest.json provides metadata used when your web app is added to the

src/App.js

@@ -1,15 +1,15 @@
-import React, { Component } from 'react';
-import { MapView } from './components/MapView';
+import React, { Component } from "react";
+import { MapView } from "./components/MapView";
 
 class App extends Component {
   render() {
     return (
       <MapView
         isMarkerShown
         googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
-        loadingElement={<div style={{ height: `100%` }} />}
-        containerElement={<div style={{ height: `400px` }} />}
-        mapElement={<div style={{ height: `100%` }} />}
+        loadingElement={<div style={{ height: "100%" }} />}
+        containerElement={<div style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0, justifyContent: "flex-end", alignItems: "center" }} />}
+        mapElement={<div style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0, }} />}
       />
     );
   }

src/components/MapView.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
+import React from "react";
+import { withGoogleMap, GoogleMap, Marker } from "react-google-maps";
 
 export const MapView = withGoogleMap((props) =>
     <GoogleMap defaultZoom={8}