Offline map in google-map-react

Question

I use google-map-react and I want to load images from localhost and I have some problems. This is my code:

         <GoogleMapReact
            onGoogleApiLoaded={({map, maps}) =>
                map.mapTypes.set("roadmap", new maps.ImageMapType({
                    getTileUrl: function (coord, zoom) {
                        return "http://192.168.1.103/google/" + zoom + "/" +  coord.x + "/" + coord.y + ".png"
                    },
                    tileSize:new maps.Size(256,256),
                    name:"GoogleRoadMaps",
                    maxZoom:18
                }))
            }
            yesIWantToUseGoogleMapApiInternals
            defaultCenter={this.props.center}
            defaultZoom={this.props.zoom}>
            {
                this.state.childrenm
            }
        </GoogleMapReact>

But it doesn't work. What's the problem?

score 1 · Accepted Answer · answered Jul 30 '17 at 10:19

There are a few possible causes:

192.168.1.103 is your local area networt (LAN) IP address, which means it will only work if the WIFI of the client is connected to the same WIFI as the server and the machine is configured to allow connections on port 80.
Content Security Policy(CSP) will need to be setup to upgrade the http connection to https if the site is secure
If a hardcoded URL does not work, then the zoom may be configured incorrectly

it was Content Security Policy Problem ... Thanks! – Siyanew Jul 30 '17 at 10:49 — Siyanew, Jul 30 '17 at 10:49

Offline map in google-map-react

1 Answers1