Well I have no credit card so I use 'MapBox' . For those all who don't want to use google map i have some suggestions as a help.
So Now we can use MapBox instead of using google map Usage:
1- Install MapBox
npm i mapbox-gl
2-Create an account on Mapbox( SignUp)
3-Create a token
Ex: " pk.eyJ1Ijoib21hcnNvd..."
4-Building Component:
//Map.js
import React, { useRef, useEffect } from "react";
import mapboxgl from "mapbox-gl";
import "./Map.css";
const Map = (props) => {
const { center, zoom } = props;
const mapRef = useRef();
useEffect(() => {
mapboxgl.accessToken = 'pk.eyJ1Ijoib21hcnNvdXMxIiwiYSI6ImNsOTZ6eHFxcjA3YXYzdmw5aW8weTQ1dDcifQ.I3tZK9_R3vocnBekXFIDLrewd';
const map = new mapboxgl.Map({
container: mapRef.current,
style: "mapbox://styles/mapbox/streets-v11",
center: center,
zoom: zoom,
});
// Add navigation control (the +/- zoom buttons)
map.addControl(new mapboxgl.NavigationControl(), 'top-right');
new mapboxgl.Marker({ draggable: true })
.setLngLat(center)
.addTo(map);
}, [center, zoom]);
return (
<div
ref={mapRef}
className={`map ${props.className}`}
style={props.style}
></div>
);
};
export default Map;
// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import 'mapbox-gl/dist/mapbox-gl.css';
import './index.css';
import App from './App';
import { BrowserRouter as Router } from 'react-router-dom';
//starting point in the app
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Router>
<App />
</Router>
);
//UserPlaces.js
import PlaceList from '../components/PlaceList';
const DUMMY_PLACES = [
{
id: 'p1',
title: 'Empire State Building',
description: 'One of the most famous sky scrapers in the world!',
imageUrl: 'https://cdn.britannica.com/73/114973-050-2DC46083/Midtown-Manhattan-Empire-State-Building-New-York.jpg',
address: '20 W 34th St, New York, NY 10001',
location: { lat: 40.748441, lng: -73.985664 },
creator: 'u1'
}
]
const UserPlaces = () => {
return <PlaceList items={DUMMY_PLACES} />;
}
export default UserPlaces;
//PlaceList.js
import React from 'react'
import Card from '../../shared/components/UIElements/Card';
import PlaceItem from './PlaceItem';
import './PlaceList.css'
function PlaceList(props) {
return <ul className='place-list'>
{props.items.map(place =>
<PlaceItem
key={place.id}
id={place.id}
image={place.imageUrl}
title={place.title}
description={place.description}
address={place.address}
creatorId={place.creator}
coordinates={place.location} />)}
</ul>
}
export default PlaceList
For More Info:
https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/