2021年4月11日星期日

Local Context Map Google React JS

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

没有评论:

发表评论