Javascript Question posted in
A very good W3school tutorial can be found here.

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

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!

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search