CODEWITHSUNDEEP
javascriptjsongoogle-mapsreactjs
appthat
appthat

Reputation: 826

react google maps node module map style loads empty object, not json

I am trying to get the react-google-maps node module to load a map style json file. Console log reveals it is finding the json file and loading it, but the value I get from the require() is an empty object with just getter and setter functions loaded.

like so:

    var mapStyle = require('./darkMapStyle.json');
    // compiles down using webpack
    var mapStyle = __webpack_require__(428);

    mapStyle = {
    __defineGetter__: __defineGetter__()
    __defineSetter__: __defineSetter__()
    __lookupGetter__: __lookupGetter__()
    __lookupSetter__: __lookupSetter__()
    constructor: Object()
    hasOwnProperty: hasOwnProperty()
    isPrototypeOf: isPrototypeOf()
    propertyIsEnumerable: propertyIsEnumerable()
    toLocaleString: toLocaleString()
    toString: toString()
    valueOf: valueOf()
    get __proto__: get __proto__()
    set __proto__: set __proto__()
    }

    // load my google map in the render()
    <GoogleMapLoader    
        loadingElement={<div>loading</div>}
        containerElement={
            <div {...this.props} style={{height: "100%",}}/>
        }
        googleMapElement={
           <GoogleMap
               defaultZoom={results.mapZoom}
               defaultCenter={{lat: 37.400343, lng: -122.110043}}
               defaultOptions={{styles: mapStyle}}
               onClick={this.handleMapClick}>         
           </GoogleMap>
         }
     />

All my other modules that I import using require are functioning as expected but mapStyle is not providing the json data I have in my json file.

I followed this example to do this: http://tomchentw.github.io/react-google-maps/#/basics/styled-map?_k=nd5q0e

Appreciate any help

Upvotes: 0

Views: 159

Answers (1)

appthat
appthat

Reputation: 826

I have discovered a working solution to this problem if anybody runs into this similar situation.

I created a function in a separate file that holds the json which it simply returns as an object (not json string).

I assgin this returned json to a variable in my render()

var mapStyle = getData.getDarkMapStyle();

I then assign this variable to my googlemap tag like so:

<GoogleMap
     defaultOptions={{styles: mapStyle}}>
</GoogleMap>

simply not retrieving the json object through require() but a function call fixed this issue.

Upvotes: 1

Related Questions