Map not showing up

[MichaelLiss]

Hi,

I am trying to get the react-google-map to show up in my project. I am using the "basic map" example for the map.

I am using the latest version of Chrome. Latest version of VS Code and running on a Mac Book with the latest OS.

when I git clone the examples and run the "basic example" from the example directory I see this:

However when I copy the code from the "basic map" example and run it in my app map does not show up

import React from 'react';
import { createRoot } from 'react-dom/client';

import { APIProvider, Map } from '@vis.gl/react-google-maps';


const API_KEY = process.env.REACT_APP_GOOGLE_MAP_API_KEY;
if (!API_KEY) {
  throw new Error(
    'Google Maps API key is not defined in environment variables.'
  );
}

const App = () => (
  <APIProvider apiKey={API_KEY}>
    <Map
      defaultZoom={3}
      defaultCenter={{ lat: 22.54992, lng: 0 }}
      gestureHandling={'greedy'}
      disableDefaultUI={true}
    />

  </APIProvider>
);
export default App;

export function renderToDom(container: HTMLElement) {
  const root = createRoot(container);

  root.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}

Super basic setup

tried using HeatMap in index.tsx:

import ReactDOM from 'react-dom/client';
import HeatMap from './components/common/InternalGoogleHeatMap';

const rootElement = document.getElementById('root');
if (rootElement) {
  const root = ReactDOM.createRoot(rootElement);
  root.render(<HeatMap />);
} else {
  console.error('Root element not found');
}

This is what I see:

NOTE: This is what I see when I inspect elements

More Complex code around map... but map is basic
Here is how it currently looks when the map is integrated into my app and runs:

NOTE: I believe my API is good ... because when I comment out the API key value I get this:

Here is the code for the map

import { APIProvider, Map } from '@vis.gl/react-google-maps';
const API_KEY: string | undefined = process.env.REACT_APP_GOOGLE_MAP_API_KEY;

function InternalGoogleMap(): JSX.Element {
  if (!API_KEY) {
    throw new Error('REACT_APP_GOOGLE_MAP_API_KEY is not defined');
  }
  return (
    <APIProvider apiKey={API_KEY}>
      <Map
        defaultZoom={5}
        defaultCenter={{ lat: 22.54992, lng: 0 }}
        gestureHandling={'greedy'}
        disableDefaultUI={true}
      ></Map>
    </APIProvider>
  );
}

export default InternalGoogleMap;

here is my package.json

{
  "name": "clara-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@vis.gl/react-google-maps": "latest",
    "axios": "^1.7.8",
    "bootstrap": "^5.3.3",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.4.0",
    "react-router-dom": "^6.28.0",
    "react-scripts": "5.0.1",
    "sass": "^1.81.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "typescript": "^4.9.5"
  }
}

I use the map in this component

import './Map.css';

import InternalGoogleMap from '../common/internalGoogleMap1';

interface MapProps {
  isSmall: boolean; // toggle between the two class names
}

const Map = ({ isSmall }: MapProps) => {

  // Use conditional logic to determine the class name
  // NOTE: isSmall is False in this case
  const containerClass = isSmall ? 'map-container-small' : 'map-container';

  return (
    <div className={containerClass}>
      <div className="map-content">
        <InternalGoogleMap />
      </div>
    </div>
  );
};

export default Map;

CSS stuff

.container-cols {
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
  height: 100%;
  width: 100%;
}

.map-container,
.map-container-small {
  position: relative;
  width: 100%;
  height: auto;
  background-color: var(--background-color);
  border: 1px solid var(--background-color-active);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.map-content {
  display: flex;
  flex-direction: column;
}

CSS changes based on media breakpoints:

  .container-cols .map-container {
    height: 300px;
  }
  .container-cols .map-container-small {
    height: 140px;
    width: 140px;
  }

[mrMetalWood]

Hi @MichaelLiss
The map code looks fine to me. I suspect something with the CSS and container div width or height.

Can you try to add inline styles to the map like this:

<APIProvider apiKey={API_KEY}>
      <Map
        style={{height: '300px', width: '300px'}}
        defaultZoom={5}
        defaultCenter={{ lat: 22.54992, lng: 0 }}
        gestureHandling={'greedy'}
        disableDefaultUI={true}
      ></Map>
    </APIProvider>

and remove the overflow: hidden from the map-container. Just to make sure it is not a problem with the actual map.

[MichaelLiss]

@mrMetalWood - thanks that and a lot of googling helped me narrow down what was going on...

this was the issue:

.map-content {
  display: flex;
  flex-direction: column;
}

this is the answer:

.map-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

thank you