react-google-maps-api | React Google Maps API | Map library

by JustFly1984 TypeScript Version: 1.0.8 License: MIT

X-Ray Key Features Code Snippets Community Discussions(10)Vulnerabilities Install Support

kandi X-RAY | react-google-maps-api Summary

react-google-maps-api is a TypeScript library typically used in Geo, Map, React applications. react-google-maps-api has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can download it from GitHub.

React Google Maps API

Support

Quality

Security

License

Reuse

Support

react-google-maps-api has a medium active ecosystem.

It has 1484 star(s) with 294 fork(s). There are 20 watchers for this library.

It had no major release in the last 12 months.

There are 103 open issues and 362 have been closed. On average issues are closed in 152 days. There are 19 open pull requests and 0 closed requests.

It has a neutral sentiment in the developer community.

The latest version of react-google-maps-api is 1.0.8

Quality

react-google-maps-api has no bugs reported.

Security

react-google-maps-api has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.

License

react-google-maps-api is licensed under the MIT License. This license is Permissive.

Permissive licenses have the least restrictions, and you can use them in most projects.

Reuse

react-google-maps-api releases are not available. You will need to build from source code and install.

Top functions reviewed by kandi - BETA

kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of react-google-maps-api

Get all kandi verified functions for this library.

react-google-maps-api Key Features

No Key Features are available at this moment for react-google-maps-api.

react-google-maps-api Examples and Code Snippets

No Code Snippets are available at this moment for react-google-maps-api.

Community Discussions

Trending Discussions on react-google-maps-api

Cannot access this.searchBox from StandaloneSearchBox in react-google-maps/api

How do I make an infowindow appear when the user clicks the marker, while using a functional component?

how to change the control position of the drawing manager with the @react-google-maps/api

StopPropagation react google maps autocomplete

Need help in converting this code to functional hooks from class component (React)

@react-google-maps Marker LatLng throwing error

How to change the default Marker used in the Google Maps API Drawing Layer controls

How to move the map by code in react-google-maps?

GoogleMaps custom marker

Can not get radius value from Editable Circle onRadiusChanged event

QUESTION

Cannot access this.searchBox from StandaloneSearchBox in react-google-maps/api

Asked 2021-Jun-10 at 23:58

I am trying to access the getPlaces() function which should be in the StandaloneSearchBox component from react-google-maps/api. In the documentation and other examples the are using it this way:

...

ANSWER

Answered 2021-Jun-10 at 23:58

Here are the suggestions on how to make your code work:

I can see that you are using functional component in your code. You can't use this in functional component. You can use the useState instead. Instead of this.searchBox, you can use const [searchBox, setSearchBox] = useState(null);
Once you have the useState, use the onLoad props of your SearchBox to call a function where you put the ref of your Searchbox object to the searchbox state.
In your onPlacesChanged, you can just log the searchBox.getPlaces() to get the result of your getPlaces.

Here's the working code and the code snippet:

Source https://stackoverflow.com/questions/67879151

QUESTION

How do I make an infowindow appear when the user clicks the marker, while using a functional component?

Asked 2021-Apr-20 at 07:48

The Google Maps API library I am using for this is https://github.com/JustFly1984/react-google-maps-api

What I have been asked to create is a map with multiple markers, each of which can be clicked on to open an InfoWindow centred on that marker. Much like the AirBnB search page, with the map on one side results on the other.

However, I seem to only be able to have an InfoWindow that is open at the loading of the page and then can't be opened again.

My research so far has generally shown that I would need to completely redo this component as a class instead. Although I don't really understand the class based model of components, so ideally I wouldn't have to mess around with that.

Is there a way to make the desired effect without reworking my program entirely?

This is the code for the component, in case it is relevant

...

ANSWER

Answered 2021-Apr-20 at 07:48

To achieve your goal you would want to use states in your application. But since you want to deal with it using Function components, you would need to make use of react hooks to use states.

Here is a working sample for your reference: https://stackblitz.com/edit/marker-with-infowindow-react-api-o6357y

Source https://stackoverflow.com/questions/67092657

QUESTION

how to change the control position of the drawing manager with the @react-google-maps/api

Asked 2021-Jan-10 at 17:21

I'm trying to change the position of the drawing manager control panel (the one that lets the user select what shape to draw).

However, I'm having difficulties doing so.

I figured that the position values google.maps.ControlPosition.TOP_CENTER are just numbers. So according to the docs I'm trying to pass in the position object similar to the example here

...

ANSWER

Answered 2021-Jan-10 at 17:21

I am really no React expert and as it seems they can't provide one working example in the official docs, I am not too sure how it should be done.

The official solution I believe is here: https://react-google-maps-api-docs.netlify.app/#usejsapiloader but I could not get this to work.

So far, the only way I was able to get your above code working was by doing 2 things: 1) move the drawing manager to a separate component, and 2) use /* global google */ in the component.

Source https://stackoverflow.com/questions/65639499

QUESTION

StopPropagation react google maps autocomplete

Asked 2020-Nov-12 at 20:27

I'm want to stopPropagation of https://react-google-maps-api-docs.netlify.app/#autocomplete. The autocomplete works well but I need to use it in a popover and when I select a place the popover automatically closes.

If there is another library that works well with popovers and modals

...

ANSWER

Answered 2020-Nov-12 at 20:26

I'm using chakraUI, I get help from discord(dodas user) here is the solution he make. Basically he catch the mousedown event(google block click event) and when the popover is open, select item or click trigger button just do nothing for others events just close popovers.

https://codesandbox.io/s/popovergoogle-autocomplete-6nvtb?file=/src/App.js:0-3329

Source https://stackoverflow.com/questions/64796511

QUESTION

Need help in converting this code to functional hooks from class component (React)

Asked 2020-Aug-20 at 14:26

Currently using TypeScript on my project with React version 16.13.1.

Trying to get the the Autocomplete function working from this @react-google-maps/api but the examples are in class component and i'm using functional hooks.

Any idea whats wrong with my code? Here's an example i got from the library.

Code example from this library

...

ANSWER

Answered 2020-Aug-20 at 14:26

You have the array items in the useState call backwards:

const [setAutocomplete, autocomplete] = useState() as any

You want this:

const [autocomplete, setAutocomplete] = useState() as any

The first item in the array is the variable that holds the state value, the second is the function that React uses to maintain it. In your current code, the setAutoComplete is not a function, but autoComplete is.

Source https://stackoverflow.com/questions/63507181

QUESTION

@react-google-maps Marker LatLng throwing error

Asked 2020-Jul-13 at 08:15

I'm using the @react-google-maps/api to build my first react map.. But my latLng literal for position inside the Marker is breaking my code. Is this not the same latLng format that I'm using for center which works fine? How is my Marker latLng wrong? That seems to be the only required attribute in the docs so I'm at a dead end.

...

ANSWER

Answered 2020-Jul-13 at 08:15

The position property is an object. Hand your lat and lng values like this:

Source https://stackoverflow.com/questions/62871704

QUESTION

How to change the default Marker used in the Google Maps API Drawing Layer controls

Asked 2020-Jun-04 at 14:47

I would like to know how could I use a custom marker with google maps drawing controls. I want to do that because I need to place a marker when a user clicks in the map and have it open a info window (when clicked) and have a few custom actions in there (buttons and such).

I'm using react and @react-google-maps/api for this, but that might be besides the point since it is just a wrapper around the Maps Javascript API provided by Google.

From the docs it is possible to provide google.maps.MarkerOptions to the google.maps.drawing.DrawingManagerOptions. Unfortunately there is no option there to provide a custom Marker to be rendered.

I tried using the markercomplete() call back exposed by the google.maps.drawing.DrawingManager since it has the newly created Marker as parameter, and then doing something like this:

...

ANSWER

Answered 2020-Jun-04 at 14:47

All you need to do is to set the icon property in the MarkerOptions, if I correctly understand your meaning of "custom marker". Below is an example using a SVG path for the icon.

This snippet is in full JS but the same should work with the React library.

Source https://stackoverflow.com/questions/62182737

QUESTION

How to move the map by code in react-google-maps?

Asked 2020-Apr-23 at 08:17

Hi i want to make a button that can move the map to the user current location, i read the docs but i still don't understand which code to move the map like when we type and enter a location in autocomplete, or should i re-render the map with new lat long?

...

ANSWER

Answered 2020-Apr-23 at 08:17

Actually, you have to change the center of the map to the user location and re-render the map component. Like this:

Source https://stackoverflow.com/questions/61382070

QUESTION

GoogleMaps custom marker

Asked 2020-Feb-08 at 09:19

Is it possible to create your own marker with your own styles? That is, change the background, change the radius, add a shadow, etc. All I got was to change the opacity and replace it with an icon.

https://react-google-maps-api-docs.netlify.com/#marker

...

ANSWER

Answered 2020-Feb-08 at 09:19

The icon IS the custom marker, everything you want to change about the marker you have to do to the icon. Since you have an svg it shouldn't be too hard to style.

Custom marker example

Source https://stackoverflow.com/questions/60125341

QUESTION

Can not get radius value from Editable Circle onRadiusChanged event

Asked 2019-Nov-05 at 09:35

I am new to React Google Maps. I'm unable to get radius value from Circle.

https://github.com/JustFly1984/react-google-maps-api

I want to get circle redius onRadiusChanged event.

index.js

...

ANSWER

Answered 2019-Nov-01 at 15:48

onRadiusChanged (as the underlying center_changed event for a Circle class ) event does not accept any arguments. Since onRadiusChanged event handler method is not bound with its component instance in your example, the updated radius could be determined like this:

Source https://stackoverflow.com/questions/58568085

Community Discussions, Code Snippets contain sources that include Stack Exchange Network