Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jul 24 10:50
    vashisth00 commented #990
  • Jul 09 13:39
    w3bpro commented #812
  • Jun 29 09:31
    mattvb91 commented #1071
  • Jun 21 15:22
    zelin commented #586
  • Jun 14 11:15
    JustFly1984 commented #1071
  • Jun 14 09:26
    DarkAng3L commented #1071
  • Jun 04 05:33
    prnv0001 opened #1075
  • Jun 03 12:59
    jfarris587 closed #1074
  • Jun 03 12:55
    jfarris587 edited #1074
  • Jun 03 12:55
    jfarris587 opened #1074
  • May 30 16:12
    wojtekmaj commented #864
  • May 29 12:00
    lysaan commented #1053
  • May 29 03:16
    lysaan commented #1053
  • May 29 03:14
    lysaan commented #1053
  • May 27 07:27
    hariprasath14 commented #373
  • May 15 03:11
    navarroaxel closed #1069
  • May 15 03:11
    navarroaxel commented #1069
  • May 15 00:12
    iamdevvalecha commented #1069
  • May 06 23:17
    Apthox commented #586
  • May 05 12:52
    AbhaysinghBhosale commented #646
Anjali Kumari
@anjali.kumari2_gitlab

import React, { Component } from "react";
import {
withGoogleMap,
withScriptjs,
GoogleMap,
DirectionsRenderer,
} from "react-google-maps";
import { Polyline } from 'react-google-maps';

class Map extends Component {
constructor(props) {
super(props);
this.state = {
directions: null,
error: null,
}
}

componentWillReceiveProps(){
this.getDirection()
}
getDirection(){
const directionsRenderer = new google.maps.DirectionsRenderer();
const directionsService = new google.maps.DirectionsService();
const origin = this.props.start_lat_lng;
const destination =this.props.end_lat_lng;
// console.log("propssssss: ",this.props)
directionsService.route(
{
origin: origin,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING,
provideRouteAlternatives: true,

     unitSystem: google.maps.UnitSystem.METRIC
  },
  (response, status) => {
    if (status == google.maps.DirectionsStatus.OK) {
    for (var i = 0; i < response.routes.length; i++) {
     var directions = new google.maps.DirectionsRenderer();
     this.setState({
        directions: response,
        routeIndex: i,
      });
      }
    }
    }
);

}
render() {
const ShowGoogleMap = withGoogleMap(props => (
<GoogleMap defaultCenter={{ lat: 8.525335, lng: 76.939269 }} defaultZoom={5} >
<DirectionsRenderer directions={this.state.directions} />
</GoogleMap>
));

return (
  <div>
    <ShowGoogleMap
      containerElement={<div style={{ height: `300px`, width: "500px" }} />}
      mapElement={<div style={{ height: `100%` }} />}
    />
  </div>
);

}
}

export default Map;

Mohammed Ayaz
@learning-dev
Hi all, I am getting this error while reloading the page.
Uncaught ReferenceError: google is not defined at handleAutoComplete (index.js?df54:93)
I have added the script in my index.html.
I am using react js and google autocomplete
I have tried the defer and async as well
Anjali Kumari
@anjali.kumari2_gitlab
hello everyone, please inform me is it possible to show infoWindow on route directions with react-google -maps?????
i am New In Reactjs Please help me
tushkyparikh
@tushkyparikh
Hello,
I have seen that, react-google-map has prop name "libraries", so what are expected values we can provide to it.?
Also If need timezone libraries to load so can we do that using libraries prop?
Thanks
Vishnu Tej
@therootfolder

How do i make a basic React Application which has the following:

2 input fields:

  1. Source
  2. Destination

Both of the above fields should have Google Maps search API integrated into them so that we are able to search for a particular location (with auto-complete)

Below these inputs there will be a Map displayed which will show us markers at the Source, Destination and the Route between the two locations.

kirti3
@kirti3
Hi Team , i am integrating the map and wanted to use Markerwithlabel but it's not working with import MarkerWithLabel from "react-google-maps/lib/components/addons/MarkerWithLab
i also tried with import MarkerWithLabel from 'react-google-maps/lib/components/Marker' , it's not taking the labelStyle
kindly help how to import the makerwithlabel , i don't need the require approach
aakashbhagat23
@aakashbhagat23
Hello team,
https://developers.google.com/chart/interactive/docs/gallery/geochart
can we achieve Visualization: GeoChart region in this package?
if yes then, how?
please share any tutorial or something
Thanks in Advanced
Paul Wilson
@pauldewilson
Hello all, I'm developing a simple listing app would like users to be able to click a map to generate lat-lon for markers. All example maps on the documentation are showing as not working for me. Is there an alternative resource or any areas recommended for what I need? Thanks (documentation I am using: https://tomchentw.github.io/react-google-maps/#ui-components)
Paul Wilson
@pauldewilson
One more -- I have set up my Google Maps API and custom styled map with its mapID and whilst the API key must be working since the "development" watermark has vanished, the custom styled map is not pulling through. I believe my URL is correct, is there something I might be doing wrong? Thanks. Here is the URL I am using: https://maps.googleapis.com/maps/api/js?key=${siteSettings.googleMaps.apiKey}&map_ids=${siteSettings.googleMaps.mapID}&callback=initMap
Paul Wilson
@pauldewilson
Hello, I have upgraded to the @react-google-maps/api and making good progress however my custom map using the MapID provided by Google isn't working, just the default map. But the API clearly works since I'm not getting the development watermark. Does anyone have experience with this issue? Cheers
yersskit
@yersskit
Hello, i m trying to implement a circle with radius in react 16 and im using hooks, but can't get de new radius when it's changed.
Rafael Custódio
@rafacustodio
Good morning
For some reason directionsservice doesn't respect fitbounds, is that expected? I'd like to know if there's a way to limit Directions (routes) inside a specific area (city), not allowing it to leave
kishore kumar
@d-kishore
This supports multi pins with info windows ?
Something like : http://jsfiddle.net/2crQ7/
Andrea Trotta
@Andrea_Trotta_twitter
Hello, one question for me, is there a method to test react-google-maps with jest? thank you
nghialthanh
@nghialthanh
error "Did you include prop libraries={['drawing']} in the URL? undefined" i can't fix it, i try to use drawingmanager
Anthony Langford
@anthony-langford
Hello, has anyone had any problems rendering a map on iOS safari? I have implemented react-google-maps in a standard react app and am able to render it fine on both desktop web and simulator iOS, but it is not rendering on my iPhone 7. I have attached a photo of the HTML tree here. The top is the iPhone and the bottom is the working iPhone 12 simulator. Both are on iOS 14.4 https://ibb.co/tcN5Btj
It renders fine on an iPhone 8 simulator as well. I would test it on an iPhone 7 simulator but there isn't one.
@tomchentw Do you have any insight or could you connect me with someone who might be able to help?
Anthony Langford
@anthony-langford
I figured it out. Thanks everyone
sonyj21
@sonyj21
Hi, How can we display the show my location icon to pan to the current location using react-google-maps on my map.Could you please help me to figure it out
Anthony Langford
@anthony-langford
@sonyj21 Try searching for the google maps API docs. You can look for the default center coordinates and custom icons. Both are supported.
sonyj21
@sonyj21
Thanks Anthony.I have searched through these doc.but i don't get solution for that.Is there any options to show the icon on the map.For example, streetViewControl option shows street view icon on the map.
Arvind Sharma
@arvind.sharma:matrix.org
[m]
hey can anyone suggest a better example for adding google maps in react js
i am facing minor issue and unable to figure out the solution
getting this issue
for marker till yesterday it was working but then i used my google api key to test on another project and after that i dont know why this above issue started
to pop on my screen in console
Macdrug
@musicbird
hi all....how do i get it running?
Mahmoud El Kotoury
@melkotoury
Hi all , I am using the library and I want to use the polygon ,I can show the polygon but I can't seem to update the path of the polygon, any help please would be appreciated , I tried using ref and then getPath but it doesn't get the updated path
balaji-trillionthoughts
@balaji-trillionthoughts
Hi, Is there any way to add additional waypoints in the Map direction
huashenliang
@huashenliang
Hi all
I am having an issue, how to get the updated radius of a circle?
The onRadiusChanged does not return anything
huashenliang
@huashenliang
is anyone online?
Abdul8008
@Abdul8008
how to show bydefault street view ?
anyOne please ?
Ignatius Aggrey
@IggsGrey

hello. so i am not new to react or js but i am trying to implement this API for the first time in a project and i woud like to do some forecasting.

  1. I am interested in the server requirements for this API to work effectively eg: will it work on shared hosting or does it require vps. Will it need some special features like cron jobs? ... etc.

  2. I am also interested in knowing whether it will need server-side integration of some sort or it only works on the client.

  3. Are there any differences in the integration for this and the integration for google maps.

bizq
@bizq
When I use MarkerClusterer, even if there is only one Maker, 2 Makers will be displayed.
image.png
Vivek Sharma
@viveksharma8130
I am facing some issue in my project i am using DirectionRender when i am trying to change the origin lat& lang
through the server (Api). the whole map will render again when the state or props are changed what i forget to do in my code guys please help me out give me the solution
here is my code :

import React, { PureComponent } from "react";
import {
withGoogleMap,
GoogleMap,
DirectionsRenderer,
withScriptjs,
} from "react-google-maps";
class Map extends PureComponent {
constructor(props) {
super(props);
this.state = {
directions: null,
cords: null,
userFrom: parseFloat(this.props.routing.latitude_from),
userto: parseFloat(this.props.routing.longitude_from),
destinationFrom: parseFloat(this.props.routing.latitude_to),
destinationto: parseFloat(this.props.routing.longitude_to),
};
}
componentDidMount() {
const { userFrom, userto, destinationFrom, destinationto } = this.state;
const directionsService = new window.google.maps.DirectionsService();
const directionsRenderer = new window.google.maps.DirectionsRenderer();
const origin = { lat: userFrom, lng: userto };
const destination = {
lat: destinationFrom,
lng: destinationto,
};
directionsService.route(
{
origin: origin,
destination: destination,
travelMode: window.google.maps.TravelMode.DRIVING,
},
(result, status) => {
directionsRenderer.setDirections({ result });
var route = result.routes[0].legs[0];
const coords = result.routes[0].overview_path;
if (status === window.google.maps.DirectionsStatus.OK) {
this.setState({
directions: result,
distance: route.distance.text,
duration: route.duration.text,
cords: coords,
});
} else {
console.error(error fetching directions ${result});
}
}
);
}
render() {
const GoogleMapExample = withGoogleMap((props) => (
<GoogleMap defaultCenter={{ lat: this.state.userFrom, lng: this.state.userto }} defaultZoom={10} >
<DirectionsRenderer directions={this.state.directions} onDirectionsChanged={(e) => console.log(e)}
options={{
polylineOptions: {
strokeColor: "#1171ef",
strokeOpacity: 1,
strokeWeight: 4,
},
}}
/>
</GoogleMap>
));
return (
<div>
<GoogleMapExample containerElement={<div style={{ height: `350px`, width: "100%" }} />}
mapElement={<div style={{ height: `100%` }} />}

    ></GoogleMapExample>
  </div>
);

}
}
const MapLoader = withScriptjs(Map);
export default MapLoader;