React Leaflet Google Map Partial and Incomplete [duplicate]

Question

I'm trying to learn something and develop a google map project with react-leaflet using JavaScript. I've made a simple React app and implemented the simple google map layer. Maps however are only drawn partially.

There are no errors neither in the vs code or the console.

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

const center = [41.015137, 28.97953]; // Set your initial map center coordinates

function App() {
  return (
    <MapContainer
      center={center}
      zoom={13}
      style={{ height: "500px", width: "100%" }}
    >
      <TileLayer
        url={`https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}&hl=en&gl=US&${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}`}
        subdomains={["mt0", "mt1", "mt2", "mt3"]}
      />
      <Marker position={center}>
        <Popup>A sample marker on the map.</Popup>
      </Marker>
    </MapContainer>
  );
}

export default App;

I also believe that the problem is not related to the API key since it worked well with @react-google-maps/api.

Answer 1

Google Maps may not provide map tiles in the same way as some other map providers, so using the same URL template might not work. Instead, you can use a different map provider or service that is compatible with React-Leaflet. See the code above how you can use a Mapbox tile layer:

import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

const center = [41.015137, 28.97953]; // Set center coordinates

function App() {
    return (
        <MapContainer
            center={center}
            zoom={13}
            style={{ height: "500px", width: "100%" }}
        >
            <TileLayer
                url="https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}"
                attribution='&copy; <a href="https://www.mapbox.com/about/maps/">Mapbox</a>'
                id="replace to your-mapbox-style-id"
                accessToken="replace to your-mapbox-access-token"
            />
            <Marker position={center}>
                <Popup>A marker on the map.</Popup>
            </Marker>
        </MapContainer>
    );
}

export default App;

freecodecamp link