Next - Moscow Document

Maps

Data-map Offical link Preview link

npm i @react-google-maps/api

import { GoogleMap, useJsApiLoader } from "@react-google-maps/api";

const BasicMap = () => {
const BasicContainerStyle = {
height: "500px",
};

const BasicCenter = {
lat: -3.745,
lng: -38.523,
};

const { isLoaded } = useJsApiLoader({
id: "google-map-script",
googleMapsApiKey: "https://maps.googleapis.com/maps/api/js?key=AIzaSyBkNaAGLEVq0YLQMi-PYEMabFeREadYe1Q&v=3.exp&libraries=geometry,drawing,places",
});

return (
<Card>
  <CardBody>
    <div className="map-js-height">
      <div id="gmap-simple" className="map-block">
        {isLoaded ? <GoogleMap mapContainerStyle={BasicContainerStyle} center={BasicCenter} zoom={10} /> : "Loading"}
      </div>
    </div>
  </CardBody>
</Card>
);
};

Remove package from project

npm uninstall @react-google-maps/api

Leaflet map Offical link Preview link

npm i react-leaflet

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

const WorldMap = () => {
const USA_POSITION = { lat: 50, lng: 10 };

return (
  <Card>
    <CardBody>
      <MapContainer style={{ height: 389 }} easeLinearity={0.35} attributionControl={true} center={USA_POSITION} zoom={13} scrollWheelZoom={true} className="z-0 jvector-map-height">
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      </MapContainer>
    </CardBody>
  </Card>
);
};

Remove package from project

npm uninstall react-leaflet