Isolating google-map-react Component to Prevent Global Font Style Overrides in React App

Question

I'm using google-map-react version 2.2.0 in my React application. I've encountered an issue where this component injects a tag into the head of my page, specifically:

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Google+Sans:400,500,700|Google+Sans+Text:400&amp;lang=fr">

This action overrides my global font styles, which is not desirable. I'm looking for a way to isolate this component or otherwise prevent it from changing the font styles across my entire application.

Has anyone faced a similar issue or can provide guidance on how to address this? I'm open to any suggestions, including alternate approaches to embedding Google Maps in a React application, if they offer a more seamless integration without affecting global styles.

Here is my code :

import React from "react";
import PropTypes from "prop-types";
import GoogleMapReact from "google-map-react";
import { axiosApiBackend } from "variables/axiosConfigs";
import Typography from "@mui/material/Typography";
import CustomMarker from "views/Maps/CustomMarker";
import Box from "@mui/material/Box";
import styled from "@mui/styles/styled";
import { withUiCustomizationContext } from "context/UiCustomizationContext";

const CaptionBox = styled(Box)(() => ({
  position: "absolute",
  right: "70px",
  bottom: "20px",
  color: "white",
  textShadow:
    "-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000",
  display: "flex",
  alignItems: "center",
}));

class MapGoogle extends React.Component {
  constructor(props) {
    super(props);
    this.BACKEND_URL = "/cl";
    this.TYPE_COLORS = ["LightSalmon", "Khaki", "PaleGreen"];

    this.state = {
      cl: [],
      center: { lat: 43.695547, lng: 7.257504 },
      zoom: 12,
    };
  }

  componentDidMount() {
    this.loadAsyncData();
  }

  loadAsyncData() {
    let params = {
      filters: ["presents"],
    };
    axiosApiBackend.get(this.BACKEND_URL, { params }).then((result) => {
      this.setState({ cl: result.data });
    });
  }

  renderMarkers = () => {
    return this.state.cl
      .filter((cl) => cl.lg)
      .map((cl) => (
        <CustomMarker
          key={cl.id}
          lat={cl.lg.lat}
          lng={cl.lg.lng}
          text={cl.id + ""}
          disablelink={"/cl/detail/" + cl.id}
          color={this.TYPE_COLORS[cl.lg.cp.type]}
        />
      ));
  };

  render() {
    const { center, zoom } = this.state;
    const { uiCustomization } = this.props;

    return (
      <>
        <div style={{ height: "calc(100vh - 70px)", width: "100%" }}>
          <GoogleMapReact
            bootstrapURLKeys={{ key: uiCustomization?.google_maps_key }}
            defaultCenter={center}
            defaultZoom={zoom}
          >
            {this.renderMarkers()}
          </GoogleMapReact>
          <CaptionBox>
            <CustomMarker color={this.TYPE_COLORS[0]} />
            <Typography>&nbsp;Test&nbsp;&nbsp;</Typography>
            <CustomMarker color={this.TYPE_COLORS[1]} />
            <Typography>&nbsp;test&nbsp;&nbsp;</Typography>
            <CustomMarker color={this.TYPE_COLORS[2]} />
            <Typography>&nbsp;test</Typography>
          </CaptionBox>
        </div>
      </>
    );
  }
}

MapGoogle.propTypes = {
  uiCustomization: PropTypes.object,
};

export default withUiCustomizationContext(MapGoogle);

Thank you in advance for your help!

Answer 1

The issue you're facing is due to the Google Map component injecting a stylesheet that overrides your global font styles.

import styled from "@mui/system";


const StyledMapContainer = styled("div")`
  height: calc(100vh - 70px);
  width: 100%;

  /* Override Google Map font styles here */
  /* Example: font-family: 'YourCustomFont', sans-serif; */
`;

then wrap your map component with:

<StyledMapContainer>
  {/* ... rest of the code ... */}
</StyledMapContainer>

Answer 2

Google maps for react provide full customize feature.

1. Install the google-maps-react library: Install the library to simplify the integration of Google Maps into your React components.

   npm install google-maps-react
   

2. Create a new component for your Google Map:

   // GoogleMap.js
   import React from 'react';
   import { Map, GoogleApiWrapper } from 'google-maps-react';
   
   class GoogleMap extends React.Component {
     render() {
       const mapStyles = {
         width: '100%',
         height: '400px',
       };
   
       const customStyle = [
         {
           elementType: 'labels',
           stylers: [{ visibility: 'off' }], // Hide labels
         },
         {
           featureType: 'water',
           stylers: [{ color: '#3498db' }], // Set water color
         },
         // Add more styles as needed
       ];
   
       return (
         <Map
           google={this.props.google}
           zoom={8}
           style={mapStyles}
           initialCenter={{ lat: -34.397, lng: 150.644 }}
           styles={customStyle}
         />
       );
     }
   }
   
   export default GoogleApiWrapper({
     apiKey: 'YOUR_GOOGLE_MAPS_API_KEY',
   })(GoogleMap);
   

   Replace 'YOUR_GOOGLE_MAPS_API_KEY' with your actual Google Maps API key.

3. Use the GoogleMap component in your application:

   // App.js
   import React from 'react';
   import GoogleMap from './GoogleMap';
   
   function App() {
     return (
       <div>
         {/* Your other components */}
         <GoogleMap />
       </div>
     );
   }
   
   export default App;
   

   This example uses the google-maps-react library to create a Map component and applies custom styling to hide labels and set the water color. Adjust the customStyle array to meet your specific design requirements.

Note: Make sure to manage your Google Maps API key securely and consider using environment variables or other methods to keep it safe.

This example assumes you are using the google-maps-react library. If you're using a different library or directly interacting with the Google Maps JavaScript API, the code structure might vary. Adjust the example to fit your specific implementation details.