0

I'm trying to render google map on my react-redux app. Everything was was working fine. Until when I decided to add some custom markers to the rendered google map. Now the page is blank because of this error I see in my browser console

lat_lng.js:21 Uncaught Error: Invalid LatLng object: (37.42216, undefined)
    at new e (lat_lng.js:21:1)
    at O.convert (lat_lng.js:5:1)
    at t.fromLatLngToCenterPixel (index.js:43:1)

I quickly reverted back to the working codes....but it still displays the same error.

These are the relevant codes:

locationPin.js

import { Icon } from '@iconify/react'
import locationIcon from '@iconify/icons-mdi/map-marker'

const LocationPin = ({ text }) => (
    <div className="pin">
      <Icon icon={locationIcon} className="pin-icon" />
      <p className="pin-text">{text}</p>
    </div>
  )

export default LocationPin;

Map.js

import GoogleMapReact from 'google-map-react'
import LocationPin from './LocationPin';
import { MapContainer } from './style';

  const Map = ({ location, zoomLevel }) => {
    console.log('location', location);
    console.log('zoomLevel', zoomLevel);
  
     return ( 
     <MapContainer>
        <GoogleMapReact
          bootstrapURLKeys= {{ key: process.env.REACT_APP_API_KEY }}
          defaultCenter={location}
          defaultZoom={zoomLevel}
        >
          <LocationPin
            lat={location.lat}
            long={location.long}
            text={location.address}
          />
        </GoogleMapReact>
      </MapContainer>
     )
  }

  export default Map;

ReservationsDetails.js

import Map from "../../components/map/Map";
import ParkingGridVertical from "../../components/ParkingGridVertical";
import { ParkingGridVerticalWrapper, ReservationsAsideWrapper,
         ReservationsDetailsContainer,
         ReservationsMainWrapper,
         ReservationTypeWrapper,
         SearchReservationsWrapper,
         SearchResultWrapper,
       } from "./style";

const ReservationsDetails = () => {
    const reserveParking = [
        'https://user-images.githubusercontent.com/51296741/169976664-533d9594-fb24-4e81-b097-ee16fbfe9189.png',
        'https://user-images.githubusercontent.com/51296741/169976664-533d9594-fb24-4e81-b097-ee16fbfe9189.png',
        'https://user-images.githubusercontent.com/51296741/169976664-533d9594-fb24-4e81-b097-ee16fbfe9189.png',
      ];
      

      const location = {
        address: '1600 Amphitheatre Parkway, Mountain View, california.',
        lat: 37.42216,
        long: -122.08427,
      }
      console.log('locationMe', location);

    return (
        <ReservationsDetailsContainer>
            <ReservationsAsideWrapper>
                <SearchReservationsWrapper>
                    <ReservationTypeWrapper>
                        <p>Single Day</p>
                        <p>Flex</p>
                        <p>Monthly</p>
                    </ReservationTypeWrapper> 
                    <SearchResultWrapper>
                    <input
                    type="text"
                    name="search"
                    placeholder="Search Address, Place and Event"
                    />
                    <button type="submit">Search</button>
                    </SearchResultWrapper>
                </SearchReservationsWrapper>
                <ParkingGridVerticalWrapper>
                    <ParkingGridVertical
                     locations={reserveParking}
                    />
                </ParkingGridVerticalWrapper>               
            </ReservationsAsideWrapper>
           <ReservationsMainWrapper>
             <Map location={location} zoomLevel={17} />
           </ReservationsMainWrapper>         
        </ReservationsDetailsContainer>
    );
}

export default ReservationsDetails;

Any idea on how to fix this will be appreciated.

simper
  • 19
  • 9
  • I am not a javascript pro developer but curious, what do you see output of printing location? What do you see when you tried putting a debugger point and seeing why longitude is undefined? – Hassan Jul 04 '22 at 09:12
  • And you must already have tried, but try on a new browser once you reverted back code and deployed. Caches sometimes cause issues as you might already know. – Hassan Jul 04 '22 at 09:15
  • @Hassan, I forgot to add that I have console.log almost every section of the relevant components. And everything is fine. Printing location is fine. The problen is when I try to now render the map. That's where the error popup – simper Jul 04 '22 at 09:19

1 Answers1

0

All I needed to do was to replace long with lng every where in the above components. And it worked...

Example

long={location.long}

to

lng={location.lng}
simper
  • 19
  • 9