I'm currently trying to implement the beta version of Local Context Map from Google in my React JS app. It was working then but at some point, it just didn't. I'm not sure if it's because of the new Chrome update, since I've never checked it with other browsers before. Now, it's not displaying the map. I think it's got something to do with the lifecycle of calling the script and rendering the view. I'm really clueless now I don't know where to look anymore.
The error I'm getting is LocalContextMapView is not defined
This is the link for the documentation here
This is how I implemented it
import PropTypes from 'prop-types' import { defaultCenter, places, mapStyles } from '@utils/config' import { GOOGLE_MAPS_API_KEY } from '@helpers/config' const LocalContext = ({ label, location }) => { let map const onScriptload = () => { let s = document.createElement('script') s.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=localContext&v=beta` document.body.appendChild(s) s.addEventListener('load', function () { initMap() }) } function initMap() { const localContextMapView = new google.maps.localContext.LocalContextMapView({ element: document.getElementById('map'), placeTypePreferences: places, maxPlaceCount: 24, }) map = localContextMapView.map new google.maps.Marker({ position: location, map: map }) map.setOptions({ center: location, zoom: 15, clickableIcons: true, styles: mapStyles, }) window.map = map } useEffect(() => { onScriptload() }, []) return ( <div className="overflow-hidden"> {label && <p className="py-5 text-3xl font-bold">{label}</p>} <div id="map" className="relative w-full px-10 md:px-0 h-50vh" style= /> </div> ) } LocalContext.defaultProps = { className: 'h-80', } LocalContext.propTypes = { label: PropTypes.string, location: PropTypes.object, } export default LocalContext
https://stackoverflow.com/questions/66990178/local-context-map-google-react-js April 08, 2021 at 12:25AM
没有评论:
发表评论