StandaloneSearchBox rendering problems

[daniel17903]

I am unable to get google maps rendering correctly when using the StandaloneSearchBox example code.

My code looks like this:

import React from 'react';
import { GoogleMap, LoadScript, StandaloneSearchBox } from "@react-google-maps/api";

class LocationSearchInput extends React.Component {
        
    render() {
        return (
            <LoadScript
            id="script-loader"
            googleMapsApiKey={"Api-Key"}
            language={"de"}
            region={"DE"}
            version={"weekly"}
            libraries={["places"]}
            onLoad={() => console.log("script loaded")}
            loadingElement={<div>Loading...</div>}
            >
                <GoogleMap
                    id="rectangle-example"
                    mapContainerStyle={{
                        height: "400px",
                        width: "800px"
                      }}
                      zoom={8}
                      center={{
                        lat: -34.397,
                        lng: 150.644
                      }}
                >
                    <StandaloneSearchBox>
                    <input
                        type="text"
                        placeholder="Customized your placeholder"
                        style={{
                        boxSizing: `border-box`,
                        border: `1px solid transparent`,
                        width: `240px`,
                        height: `32px`,
                        padding: `0 12px`,
                        borderRadius: `3px`,
                        boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                        fontSize: `14px`,
                        outline: `none`,
                        textOverflow: `ellipses`,
                        position: "absolute"
                        }}
                    />
                    </StandaloneSearchBox>
                </GoogleMap>
            </LoadScript>
        );
    }
}

export default LocationSearchInput;

And the map is rendering like this:

How can i get rid of these grey areas?

Environment

os: windows
node --version: v8.12.0
react version: 16.8.4
webpack version: 4.28.3
@react-google-maps/api: 1.1.0

[uriklar]

Are these grey areas constantly there? It looks a bit like tiles not loading due to connection problems

[daniel17903]

Yes, they are there constantly. I can move the map around, zoom in or out but there are always grey areas. When looking in the chrome devtools I can not see any failed or pending network requests. There are no errors shown in the console.

Also the parts of the map that are rendered look blurred and distorted.

I tested the app in the chrome and firefox browser. The behaviour does not change.

[uriklar]

Hi @daniel17903,
I've tried putting your example in codesandbox and I don't get these grey bars.
Can you try editing this example: https://codesandbox.io/s/lxkw25j65q (or creating your own) that manages to re-create the issue?
Maybe you have some additional elements, css not included in your example code?

[daniel17903]

While trying to re-create the issue I found the problem. I had some css included by another component that destroyed google maps:

img {
    display: block;
    max-width: 90px;
    max-height: 90px;
    width: auto;
    height: auto;
    margin: 2px;
}

Thanks for your help