I have a map.jsx file in my React application that contains the code below:
import React from 'react';
import GoogleMapReact from 'google-map-react';
import './map.css';
const Map = ({ location, zoomLevel }) => (
<div className='map'>
<div className='google-map'>
<GoogleMapReact
bootstrapURLKeys={{ key: 'keyID' }}
defaultCenter={location}
defaultZoom={zoomLevel}></GoogleMapReact>
</div>
</div>
);
export default Map;
This component is then called from my main page file 'chatApp.jsx' to display the map on screen:
import React, { useEffect, useRef, useState } from 'react';
import { useParams } from 'react-router-dom';
import MapSection from '../components/map/Map';
const location = {
address: 'House',
lat: 53.123,
lng: -2.123,
};
export const ChatPage = () => {
return (
<main className='chat-wrapper'>
<MapSection location={location} zoomLevel={18} /> {/* include it here */}
</main>
);
};
My question pertains to how I can prevent the map from being dragged or scrolled, and keep it fixed in one position while displaying an image over it. Is there a way to implement bounds within this code?