by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jun 24 17:38
    JustFly1984 commented #1051
  • Jun 24 16:51
    cinder92 opened #1051
  • Jun 22 09:32
    JustFly1984 commented #888
  • Jun 22 09:25
    myleftshoe closed #888
  • Jun 22 09:01
    aruljayaraj commented #1050
  • Jun 22 08:28
    JustFly1984 commented #1050
  • Jun 22 08:20
    aruljayaraj opened #1050
  • Jun 22 07:25
    JustFly1984 commented #821
  • Jun 22 05:37
    iamir4g closed #1049
  • Jun 21 21:58
    Simek closed #821
  • Jun 18 12:55
    JustFly1984 commented #328
  • Jun 18 07:40
    naveensomanna commented #328
  • Jun 15 23:53
    JustFly1984 commented #917
  • Jun 15 23:53
    JustFly1984 commented #917
  • Jun 15 20:58
    becky-intelletive commented #917
  • Jun 13 20:55
    JustFly1984 commented #1049
  • Jun 10 09:44
    GiovanniGiampaolo commented #1048
  • Jun 10 07:50
    iamir4g opened #1049
  • Jun 09 20:36
    JustFly1984 commented #1043
  • Jun 09 20:35
    JustFly1984 commented #1047
Alexey Vasilevich
@hillariter
Hi guys. Trying to add react-google-maps to project but am I right understand that it's not possible to add custom component on the map?
Craig Pickard
@Craigson

Hi all, my Maps component doesn't rerender when I update props of the wrapper container, any ideas why? I'm adding to an array of object which have coords, I'm expecting the markers to be added to the map. I'm using the useEffect hook, but it does not fire when props change... CAn anyone offer advice?

outside the component:
locations.push(newLocation)

<MyMapComponent locs={locations} />

inside component:
const MyMapComponent = withScriptjs(
  withGoogleMap(({ locs }) => {
    useEffect( () => {
console.log({locs}
}, [locs]);

)});

Any ideas?

Kannan T
@kannan007
```
const _ = require("lodash");
const { compose, withProps, lifecycle } = require("recompose");
const {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
} = require("react-google-maps");
const { SearchBox } = require("react-google-maps/lib/components/places/SearchBox");

const MapWithASearchBox = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  lifecycle({
    componentWillMount() {
      const refs = {}

      this.setState({
        bounds: null,
        center: {
          lat: 41.9, lng: -87.624
        },
        markers: [],
        onMapMounted: ref => {
          refs.map = ref;
        },
        onBoundsChanged: () => {
          this.setState({
            bounds: refs.map.getBounds(),
            center: refs.map.getCenter(),
          })
        },
        onSearchBoxMounted: ref => {
          refs.searchBox = ref;
        },
        onPlacesChanged: () => {
          const places = refs.searchBox.getPlaces();
          const bounds = new google.maps.LatLngBounds();

          places.forEach(place => {
            if (place.geometry.viewport) {
              bounds.union(place.geometry.viewport)
            } else {
              bounds.extend(place.geometry.location)
            }
          });
          const nextMarkers = places.map(place => ({
            position: place.geometry.location,
          }));
          const nextCenter = _.get(nextMarkers, '0.position', this.state.center);

          this.setState({
            center: nextCenter,
            markers: nextMarkers,
          });
          // refs.map.fitBounds(bounds);
        },
      })
    },
  }),
  withScriptjs,
  withGoogleMap
)(props =>
  <GoogleMap
    ref={props.onMapMounted}
    defaultZoom={15}
    center={props.center}
    onBoundsChanged={props.onBoundsChanged}
  >
    <SearchBox
      ref={props.onSearchBoxMounted}
      bounds={props.bounds}
      controlPosition={google.maps.ControlPosition.TOP_LEFT}
      onPlacesChanged={props.onPlacesChanged}
    >
      <input
        type="text"
        placeholder="Customized your placeholder"
        style={{
          boxSizing: `border-box`,
          border: `1px solid transparent`,
          width: `240px`,
          height: `32px`,
          marginTop: `27px`,
          padding: `0 12px`,
          borderRadius: `3px`,
          boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
          fontSize: `14px`,
          outline: `none`,
          textOverflow: `ellipses`,
        }}
      />
    </SearchBox>
    {props.markers.map((marker, index) =>
      <Marker key={index} position={marker.position} />
    )}
  </GoogleMap>
);

<MapWithASearchBox />
I have used the same code as above which was given in the example but am getting google is not defined error
Kannan T
@kannan007
Does anyone here?
Chris Bell
@Monochop
Can anyone help with the below stackoverflow question? really stack trying to implement user location!!!
uday chauhan
@udaywebdev_gitlab
Hi I want to add Marker Clusterer.
I was able to add it but it is giving me the count of markers
I have to implement the calculate custom method, so I can give direct value but the issue is I want the value inside value of the marker in my case the pollution level to be used in computation
kaleemullah-innovo
@kaleemullah-innovo
I want to draw two polygon on map using react-google-maps .. is there any way that both polygon should not overlapp each other?
kaleemullah-innovo
@kaleemullah-innovo
anyone please help
export default compose(withScriptjs, withGoogleMap)(Map)
i want to access map object wich is withGoogleMap componet state.
actually i want to access map.controls to add custom buttons on react-google-maps
Ayema Chowdhury
@ayemac

Any idea how to solve this error: Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: withGoogleMap(Component)

@ayemac i'm thinking this is why the map isn't loading
I Kadek Bayu Arys Wisnu Kencana
@aryswisnu

Hey guys- is there a way to asynchronously render the map markers?

Have u found the solution? @belmer

lakshmisanthi
@lakshmisanthi
Hi Guys, I am using react-google-maps
I need some help regarding map control positioning
Is it possible to change map zoom and other control placing position.
kaleemullah-innovo
@kaleemullah-innovo
@lakshmisanthi
hope this will help u

@lakshmisanthi
addRemoveIconInDrawingManager = () => {
let map = this._map.context[MAP]
var gmnoprint = document.createElement('div')
gmnoprint.class = gmnoprint ${style.gmnoprint}
ReactDOM.render(
<React.Fragment>
<div className="gmnoprint" title="Clear drawing" style={{ margin: '5px', zIndex: '10', position: 'absolute', right: '-10px', top: 0, }} >
<div style={{ float: 'left', lineHeight: 0 }}>
<div role="button" tabIndex="0" aria-label="Stop drawing" aria-pressed="true" draggable="false" style={{ direction: ' ltr', overflow: ' hidden', textAlign: ' left', position: ' relative', color: ' rgb(0, 0, 0)', fontFamily: ' Roboto, Arial, sans-serif', userSelect: ' none', fontSize: ' 11px', backgroundColor: ' rgb(255, 255, 255)', padding: ' 4px', borderBottomLeftRadius: ' 2px', borderTopLeftRadius: ' 2px', backgroundClip: ' padding-box', boxShadow: ' rgba(0, 0, 0, 0.3) 0px 1px 4px -1px', fontWeight: ' 500', }} >
<span style={{ display: 'inline-block' }}>
<div style={{ width: '16px', height: '16px', overflow: 'hidden', position: 'relative', }} >
<i
onClick={this.removeAllShapes}
style={{
position: 'absolute',
fontSize: '19px',
}}
className="fa fa-remove"

                       ></i>
                    </div>
                 </span>
              </div>
           </div>
        </div>
     </React.Fragment>,
     gmnoprint
  )
  gmnoprint.accessKey = 'clearallbtn'
  let index = map.controls[this.google.maps.ControlPosition.TOP_RIGHT].push(
     gmnoprint
  )

}

@ayemac i think just install latest version of react-google-maps
one92tb
@one92tb
can someone explain me how can I change old version to new?
i want to use LoadScript, but I can't read current bounds and center.
Chase-Rains
@Chase-Rains
Can someone give me an example of how the heatmap works? I have tried to so hard to get the example working.
Varikap
@Varikap_gitlab
Hello! :)
Is there a way to show label inside of marker? Current label shows only on top left of marker.
Athukorala
@Athukorala
Hi guys, how can I remove markers from a map before adding new ones?
kaleemullah-innovo
@kaleemullah-innovo
Hi
How to chnage react-google-maps langauge using state or props.
I am using HOC component withScriptJs and withGoogleMapjs
@Athukorala if you want to map one marker at a time then you no need to delete previous one.just maintain an object in state and pass every time new value into it and then use <Marker position={your state pbject} /> ... it will work

@Athukorala yes

<Marker animation={this.google.maps.Animation.BOUNCE} pinColor="yellow" key={i} label={{ fontWeight: 'bold', fontSize: '10px', text: `${i + 1}`, }} position={ } ></Marker>

Nick Stavrakakis
@NickStavrakakis
Hello to everyone! I have a little difficulty to restrict the bounds of the map, can any one give me a quick hint? 10Q!
Dilrukshan Figurado
@dfigurado
I working on a task were, the user can search a location in google map that location lat lng is saved to the database. how do I implement a handler that would return coordinates. the project is in tsx, I'm stuck on the problem please help
jkz_27
@jkz27

Hi guys do anyone know how to fix Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: GoogleMap, Marker

kaleemullah-innovo
@kaleemullah-innovo
@tomchentw @Kronuz
Hello
I want to update google map langauge when page language changes using button click.
Every thing works fine and components re render but lnagugae does nit chnage.
or any other way to change langauge without page refresh?
I am using withScriptjs and withGoogleMapjs
Alexey Lyakhov
@JustFly1984

The repo of this project is unmaintained more than 2 years, and we had build new version https://www.npmjs.com/package/@react-google-maps/api

We had rewrite it to TypeScript, and updating it frequently: https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api
You can enjoy autocomplete.

You can see our docs: https://react-google-maps-api-docs.netlify.app

Also a lot of examples: https://react-google-maps-api-gatsby-demo.netlify.app/ https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api-gatsby-example/src/examples

The bundle size is much smaller: https://bundlephobia.com/result?p=@react-google-maps/api

Our Spectrum community: https://spectrum.chat/react-google-maps
Our Slack channel: https://join.slack.com/t/react-google-maps-api/shared_invite/enQtODc5ODU1NTY5MzQ4LTBiNTYzZmY1YmVjYzJhZThkMGU0YzUwZjJkNGJmYjk4YjQyYjZhMDk2YThlZGEzNDc0M2RhNjBmMWE4ZTJiMjQ

Enjoy!


We are started to working on hooks in 2.0.0-alpha, everybody who is interested, are welcome jump in to debug new version till it runs smooth.

Roy
@roy.raju_gitlab
Hi team i would like to integrate Highlight particular route of multiple routes in google map using javascript or jquery
i coudn't find this code anyone help me
very urgent
Naveen
@naveensomanna
Hi Circle component onRadiusChanged function is not triggering
Richardson Dackam
@richardsondx
Hi Any update with the missing map.data.loadGeoJson feature?
Richardson Dackam
@richardsondx
@JustFly1984 react-google-maps/api doesn't have loadGeoJson() either
Marc Giovannoni
@marcgiovannoni
Hi guys, is it possible to use the mapId property so load vector map from the beta channel?
Paulina Gavilán
@PaulinaVPG
Hey community! Quick thing. My map is loading as a blank screen. The 'map' and satellite' and 'zoom' buttons are appearing, but nothing else :(
umairalii
@umairalii
have to set the width and height of the map?
@PaulinaVPG have you set the position of the map to relative?
Paulina Gavilán
@PaulinaVPG

@umairalii Thank you for the response!

I resolved it by using a different package. I'm using Gatsby and it won't let me have an interactive map.

I'm using: gatsby-source-googlemaps-static for anyone that wonders.

Mai Ubeid
@MaiUbeid
Hey community!
Did I need to have token for google map to add longitude and latitude for the map?
kaleemullah-innovo
@kaleemullah-innovo
Hey
How to get map erros and set state using error string to diplay to user and do not let map to carsh whole app... is there any solution for my problem
@MaiUbeid not just need api key in map url ... there is no need for token
ElliZar
@ElliZar
Hello everyone!
How I can prevent re-render map component with react and redux hooks?
I have a parent component that contains the map component. The parent component is subscribed to the state, makes a request to the server every n minutes, and updates the state. Every time the state is updated, my markers flash, how can I avoid this?