rameshsyn / react-location-picker

A react component to pick a location using google maps

👋 Hi there, I'm Ramesh Syangtan

I'm front-end developer from Kathmandu, Nepal.

📫 How to reach me:

• LinkedIn
• Twitter

react-location-picker's Issues

Location pen sometime is shown and sometime or not

Location pen sometime is shown and sometime or not
notice it take the lat and lng

Map and marker's place doesn't move when the lat,long state is changed by another component.

When using only handleLocationChange, it works fine.

this.state = {
address: 'Kala Pattar Ascent Trail, Khumjung 56000, Nepal',
position: {
lat: 0,
lng: 0
}

handleLocationChange({ position, address, places }) {
this.setState({ position, address });
}

but when it comes to set the states by another component, map marker and map doens't move. I can set the states without any problem but i need to change map markers place when i set the new lat,long.

My other component is below:
onSuggestSelect(suggest) {
let newLat = suggest.location.lat;
let newLng = suggest.location.lng;
let newAddress = suggest.label;
let newProperties = {
position: {
lat: newLat,
lng: newLng
},
address: address,
places: null
};

this.handleLocationChange(newProperties);

}

Can any body have an idea about how can i change the map marker's place?

InvalidValueError thrown

Hi
I am using this component in a capacitor webview app. The error is only seen on the Android platform. It happens after a couple of seconds by just moving the map around with a finger. After the error is thrown the app freezes and needs to be restarted.
Any ideas?

User-Agent: Mozilla/5.0 (Linux; Android 8.0.0; SM-G935F Build/R16NW; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/76.0.3809.132 Mobile Safari/537.36

The second error in the image is causing the freeze of the app:

Cannot set circle picker programmatically after fetch

good day Mr.

i'm trying to display map on an UPDATE PAGE
so i need to get saved position from server then re-locate the cirlcePicker with the new state
for this reason i use fetch in componentDidMount ( also trying componentWillMount )
but map never change the default state ( initial state )

<LocationPicker containerElement={<div style={{height: '100%'}}/>} mapElement={<div style={{height: '400px'}}/>} defaultPosition={this.state.position} onChange={this.handleLocationChange} />

can you help me please ?

Is it possible to use this without Google API key?

I don't know if I'm doing something wrong, but the map doesn't load. Probably becouse I don't have an API key. Is it possible to use this without one?

is it Possible to fix location pin?

I need to fix location pin on a particular position and no one will able to change that if it is possible then let me know ASAP.

The Map's zoom does not get changed when the zoom value changes

When providing the zoom to the component through state, when updating said value, the zoom in the map does not change accordingly.

example code:

this.state = {
      zoom: 10,
};

handleLocationChange = ({ position, address }) => {
       // Set new location
       this.setState({ position, address, zoom: 14 });
 }

<LocationPicker
         containerElement={ <div style={ {height: '100%'} } /> }
         mapElement={ <div style={ {height: '400px'} } /> }
         defaultPosition={this.state.defaultPosition}
         zoom={this.state.zoom}
         radius={-1}
         onChange={this.handleLocationChange}
/>

typescript typings pls?

Can we have types for this package to be used with typescript app? thank you.

Replace the unmaintained/outdated react-google-maps dependency

Are there any intentions to replace the unmaintained (react-google-maps) dependency with a maintainend one?

The package @react-google-maps/api is a maintained one, based on react-google-maps.

When I use the react-location-picker with react 16.13.1 we have some deprecation warnings. That's also the reason why we moved from react-google-maps (last commit 2 years ago) to @react-google-maps/api

If you want to update your documentation

I just wrote your class component to a functional component. here´s the code

import React, { useState } from "react";
import LocationPicker from 'react-location-picker';


const LocationPickerComponent = () => {

  const defaultPosition = {
    lat: 27.9878,
    lng: 86.9250
  };

  const [location, setLocation] = useState({
    address: "Kala Pattar Ascent Trail, Khumjung 56000, Nepal",
      position: {
         lat: 0,
         lng: 0
    }
  })

  const handleLocationChange = ({ position, address } = location) => {
    setLocation({ position, address });
  }

  React.useEffect(() => {
    handleLocationChange();
  }, [])

  return (
    <>
      <LocationPicker
        containerElement={ <div style={ {height: '100%'} } /> }
        mapElement={ <div style={ {height: '223px'} } /> }
        defaultPosition={defaultPosition}
        onChange={handleLocationChange}
      />
    </>
  )
}

export default LocationPickerComponent;
;

Unhandled promise rejection

Thank you for the component.

When I select a point in the middle of the ocean, I should get, perhaps, an empty string for the address. Instead, in console I get:

Uncaught (in promise) ZERO_RESULTS

Thank you.