import { GoogleMap, useLoadScript } from '@react-google-maps/api';
import { IGoogleCredentials } from '../../context';
import { googleMapsContainer } from './droppoint-map.css';

export interface IDroppointMapProps {
    googleCredentials: IGoogleCredentials;
}

export function DroppointMap({ googleCredentials }: IDroppointMapProps) {
    const { isLoaded, loadError } = useLoadScript({
        googleMapsApiKey: googleCredentials.googleMapsApiKey
    });

    if (loadError) return <p>{`Error loading google maps: ${loadError.message}`}</p>;
    if (!isLoaded) return <p>Loading maps ...</p>;
    return (
        <div>
            <GoogleMap
                mapContainerClassName={googleMapsContainer}
                zoom={8}
                center={{ lat: 56.154839, lng: 10.19038 }}
            />
        </div>
    );
}

map result screendump

I really want to be able to change the size of the zoom controls and the "Map" and "Satellite" buttons in the top left corner. I have no idea on how to go about that. The map style prop could perhaps help me out but I can't seem to find any documentation on how to do this. the @react-google-maps/api package doesn't seem to allow to even disable the ui controls.

CodePudding user response：

You can add e.g. options={{ controlSize: 10 }} to set the controls to size 10.

<GoogleMap options={{ controlSize: 99 }}
           mapContainerClassName={googleMapsContainer}
           zoom={8}
           center={{ lat: 56.154839, lng: 10.19038 }} 
/>

You can see it in a code sanbox here

The @react-google-maps/api github page shows that it supports a props object that is the type of - options?: google.maps.MapOptions | undefined. Looking at the google maps api description of that, it has a controlSize attribute that can be set, that will change the size of the controls.

You can also disable the interface in the options by setting disableDefaultUI: true in the options object.