Free Google Maps in React
Tags: react, typescript, javascript, nextjs
Published: 2023-01-20 13:32:03

## - We'll Talk About:

1. What is react-leaflet ?
2. Why react-leaflet ?
3. How to add google maps tile ?
4. How to add multiple map tiles ?
5. Demo Link is in the end 

## 1. What is react-leaflet ?
Leaflet is open-source JavaScript library for mobile-friendly interactive maps, lets you do whatever you want like adding markers, popups, shapes, etc.

## 2. Why react-leaflet ?
Easy to use, popular, free and it will save you a lot of time and effort 

#HOW?
In the application that I’m working on, I use Baidu for China, OSM for Syria, Google for other countries, because Google maps is blocked in China and Syria etc... 
So the solution was is to use react-leaflet and change the map tile when ever I want to change the map provider.

## 3. How to add google maps tile  ?

1-create new react app
2- Install the required dependencies
```
npm i leaflet @types/leaflet react-leaflet
```
or
```
yarn add leaflet @types/leaflet react-leaflet
```
3- open your app in vscode or whatever is convenient and run the project 
4- in App.tsx import leaflet css file (IMPORTATNT)

```typescript 
import "leaflet/dist/leaflet.css";
```

5- import MapContainer etc... from react-leaflet.
Your App.tsx should be like this.

```typescript
import {
  MapContainer,
  TileLayer,
} from "react-leaflet";

// 🎀🎀🎀 don't forget those they are so important 🎀🎀🎀
import "leaflet/dist/leaflet.css";

function App() {
  return (
    <div style={{ display: "flex" }}>
      <MapContainer
        style={{
          height: "100vh",
          width: "100%",
        }}
        center={[31.432026740690574, 120.8439179532812]}
        zoom={8}
      >
        {/* add google map tile url  */}
        <TileLayer
          attribution="Google Maps"
          url="https://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
        />
      </MapContainer>
    </div>
  );
}

export default App;
```
6-And now congratulations, 🥳🥳 that's it.

I recommend that you check react-leaflet documentation, you'll find anything you want.

## 3. How to add multiple map tiles
All what you have to do is to import LayerGroup and LayersControl from 'react-leaflet' and use them 

```typescript
import {
  LayerGroup,
  LayersControl,
  MapContainer,
  TileLayer,
} from "react-leaflet";

// 🎀🎀🎀 don't forget those they are so important 🎀🎀🎀
import "leaflet/dist/leaflet.css";

function App() {
  return (
    <div style={{ display: "flex" }}>   
      <MapContainer
        style={{
          height: "100vh",
          width: "100%",
        }}
        center={[33.52355922735366, 36.317284883627735]}
        zoom={14}
      >
        <LayersControl>
          <LayersControl.BaseLayer name="Open Street Map">
            <TileLayer
              attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
              url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
          </LayersControl.BaseLayer>

          <LayersControl.BaseLayer name="Mapbox Map">
            <TileLayer
              attribution='&copy; <a href="https://www.mapbox.com">Mapbox</a> '
              url="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token={accessToken}"
              accessToken={"your token here"}
            />
          </LayersControl.BaseLayer>

          <LayersControl.BaseLayer name="Mapbox Map Satellite">
            <TileLayer
              attribution='&copy; <a href="https://www.mapbox.com">Mapbox</a> '
              url="https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v11/tiles/{z}/{x}/{y}?access_token={accessToken}"
              accessToken={"your token here"}
            />
          </LayersControl.BaseLayer>

          <LayersControl.BaseLayer checked name="Google Map">
            <TileLayer
              attribution="Google Maps"
              url="https://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}"
            />
          </LayersControl.BaseLayer>

          <LayersControl.BaseLayer name="Google Map Satellite">
            <LayerGroup>
              <TileLayer
                attribution="Google Maps Satellite"
                url="https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"
              />
              <TileLayer url="https://www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}" />
            </LayerGroup>
          </LayersControl.BaseLayer>
        </LayersControl>
      </MapContainer>
    </div>
  );
}

export default App;

```

## useful links 🔗 

* Demo Link
###https://codesandbox.io/s/react-leaflet-google-maps-free-rwzstu?file=/src/App.tsx


* Libraries that we used
###https://leafletjs.com/
###https://react-leaflet.js.org/


* If you want to use Mapbox you'll need to get token from 
###https://www.mapbox.com/


***Note***: I'll write an article about maps that you can use in china, so if you are interested check my profile or DM me.