Why Use @react-google-maps/api?

Step 1: Install the Required Package

npm install @react-google-maps/api

Step 2: Get Your Google Maps API Key

Step 3: Create the Map Component

// components/MyMap.tsx
import React from 'react';
import { GoogleMap, useLoadScript } from '@react-google-maps/api';

const containerStyle = {
  width: '100%',
  height: '500px',
};

const center = {
  lat: 37.7749, // Example: San Francisco
  lng: -122.4194,
};

const MyMap = () => {
  const { isLoaded } = useLoadScript({
    googleMapsApiKey: 'YOUR_API_KEY', // Replace with your real key
    version: 'weekly',
    libraries: ['marker'], // Needed for new marker features
  });

  if (!isLoaded) return <div>Loading...</div>;

  return (
    <GoogleMap
      mapContainerStyle={containerStyle}
      center={center}
      zoom={12}
      onLoad={(map) => {
        const { AdvancedMarkerElement } = window.google.maps;

        new AdvancedMarkerElement({
          map,
          position: center,
          title: 'You are here!',
        });
      }}
    />
  );
};

export default MyMap;

This code:

Step 4: Use the Map in Your App

Now you can import and use the map component in your main app.

// App.tsx
import React from 'react';
import MyMap from './components/MyMap';

function App() {
  return (
    <div>
      <h2>My React App with Google Maps</h2>
      <MyMap />
    </div>
  );
}

export default App;

This will render the map when your app loads.

Customization Ideas

Pro Tips for Better Security and Performance

Google Maps & React in 2025 – Key Stats

Final Thoughts

Get in touch for a FREE consultation today! Let’s bring your idea to life with maps that work for your users and your business.