2

My web app made on react has been working wonders on the PC, but I recently noticed that when I open the same app from the localhost:3000 on my phone it doesn't open. As I mentioned it is a react app, so some of it's components load for instance in the given picture you can see that my navbar, sidebar, and footer opens just the way they're supposed to open, but in the middle is where google map is supposed to be, it is where it is supposed to be on the PC but on mobile it just isn't there, any help from people would be helpful since we're just so clueless about this thing.

We have tried nothing, since we just don't know where this problem has originated from.

import React,{Component} from 'react';
import { GoogleMap,Marker,InfoWindow } from '@react-google-maps/api';
import {connect} from 'react-redux';
import {mapTypeChangeSync} from '../actions/map';
import donut from "./icons/donut.png";


class GoogleMapWrapper extends Component{


    handleType = () => this.props.mapTypeChangeSync(this.map.getMapTypeId());
    /*
    onLoad = (map) => {
        const elt = document.createElement('p');
        elt.innerHTML = 'maps loadedddd...';
        document.body.appendChild(elt);
        this.map = map;
    }
    */

    render(){
        const {currentLocation,mappedMarkers,onClick,map} = this.props;
        //console.log(donut);
        //console.log('ff',new google.maps.LatLng(24.919988335566842,67.1343894711640));
        if (currentLocation.lat && currentLocation.lng)
            return (
                <GoogleMap mapContainerStyle= {{height: "100vh",
                 width: "100vw" }} center = {currentLocation} zoom = {20}
                 onClick = {onClick? (e) => onClick(e):undefined} 
                 mapTypeId = {map} onMapTypeIdChanged = {this.handleType}
                 onLoad = {map => this.map = map}>

                    <Marker position = {currentLocation} 
                     icon = {{url:donut}} />

                    <InfoWindow position = {currentLocation}>
                        <p>Location Found</p>
                    </InfoWindow>

                    {mappedMarkers.map((marker,i) => (
                        <Marker key = {marker.id?marker.id:i}
                         position = {marker.location}
                         label = {marker.id?marker.id:undefined} />
                    ))}

                </GoogleMap>
                );

        else
            return null;

    }
}

const mapStateToProps = ({currentLocation,objects,map},{cachedMarker}) => {

    const mappedMarkers = objects.map(obj =>({
        id:obj.id,
        location:obj.location
    }));

    console.log('cached Marker:',cachedMarker)

    if (cachedMarker)
        mappedMarkers.push(cachedMarker);

    return {currentLocation,mappedMarkers,map};
}



export default connect(mapStateToProps,
            {mapTypeChangeSync})(GoogleMapWrapper);

this is our normal output app screen this is what we get when we open it on our mobile

Kazim Raza
  • 145
  • 12
  • Do you get any errors? Have you allowed access to your location on your device? Is this happening on both Android and IOS and on multiple browsers? – evan Jul 17 '19 at 11:23
  • Evan, yes the location access is allowed to the devices, and yes this is happening for both Android and IOS and no their are no errors, but we have quite a few warnings none of them are about this particular matter @evan – Kazim Raza Jul 17 '19 at 21:17
  • Thanks, I see. This may be a height problem then. Can you try changing your map's height to some fixed value in px, e.g. "500px" instead of "100vh"? – evan Jul 17 '19 at 21:26
  • Any update on this please? – evan Jul 23 '19 at 17:17
  • I am so sorry @evan for being so late with the reply, this was my semester project and right after the submission my finals have started, I have not been able to edit our code at all at any given instance, but I am sure I will once the finals pass by...thanks for all the help here, I will comment again with updates soon. – Kazim Raza Jul 24 '19 at 11:13
  • No worries @kazim-raza I'll look forward to your update whenever you can start working on this again. Good luck with your finals! :) – evan Jul 24 '19 at 12:13

1 Answers1

3

According to this github issue, setting the version to 3.30 solves the problem like so :

<GoogleMapReact
  bootstrapURLKeys={{
    key: process.env.REACT_APP_MAP_KEY,
    v: '3.30',
  }}
/>

Personally this did not work for me, but maybe it will for you.

Embedded_Mugs
  • 2,132
  • 3
  • 21
  • 33