Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Jun 23 14:27
    arinconc opened #1092
  • Jun 21 17:43
    feynmanish commented #309
  • Jun 07 18:37
    andrewfritz86 commented #1068
  • Jun 03 12:33
    zharikovartem commented #1077
  • Jun 01 10:00
    asharuDheen-code commented #818
  • Jun 01 10:00
    asharuDheen-code commented #818
  • Jun 01 10:00
    asharuDheen-code commented #818
  • Jun 01 09:59
    asharuDheen-code commented #818
  • Jun 01 09:59
    asharuDheen-code commented #818
  • Jun 01 09:59
    asharuDheen-code commented #818
  • Jun 01 09:58
    asharuDheen-code commented #818
  • Jun 01 09:58
    asharuDheen-code opened #1091
  • May 24 13:46
    soumojit-technoexponent opened #1090
  • May 17 12:23
    turbothinh closed #1029
  • May 16 15:03
    venkat-koganti-nll closed #1089
  • May 16 06:17
    venkat-koganti-nll reopened #1089
  • May 16 06:17
    venkat-koganti-nll closed #1089
  • May 16 04:19
    JustFly1984 commented #1078
  • May 16 04:19
    JustFly1984 commented #1080
  • May 16 04:19
    JustFly1984 commented #1081
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
Hello team,
can we achieve Visualization: GeoChart region in this package?
if yes then, how?
please share any tutorial or something
Thanks in Advanced
Paul Wilson
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
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
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
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
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
This supports multi pins with info windows ?
Something like : http://jsfiddle.net/2crQ7/
Andrea Trotta
Hello, one question for me, is there a method to test react-google-maps with jest? thank you
error "Did you include prop libraries={['drawing']} in the URL? undefined" i can't fix it, i try to use drawingmanager
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
I figured it out. Thanks everyone
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
@sonyj21 Try searching for the google maps API docs. You can look for the default center coordinates and custom icons. Both are supported.
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
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
hi all....how do i get it running?
Mahmoud El Kotoury
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
Hi, Is there any way to add additional waypoints in the Map direction
Hi all
I am having an issue, how to get the updated radius of a circle?
The onRadiusChanged does not return anything
is anyone online?
how to show bydefault street view ?
anyOne please ?
Ignatius Aggrey

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.

When I use MarkerClusterer, even if there is only one Maker, 2 Makers will be displayed.
Vivek Sharma
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 {
} from "react-google-maps";
class Map extends PureComponent {
constructor(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,
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) {
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)}
polylineOptions: {
strokeColor: "#1171ef",
strokeOpacity: 1,
strokeWeight: 4,
return (
<GoogleMapExample containerElement={<div style={{ height: `350px`, width: "100%" }} />}
mapElement={<div style={{ height: `100%` }} />}


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

NG Digitals
Please how do I get data like lat lng or center from google maps Drawing Manager with onCircleComplete function.
All I see in the returned object is shown below:
{type: "circle", overlay: _.fj}overlay: _.fj {gm_accessors_: {…}, fillColor: "#ffff00", gm_bindings_: {…}, fillOpacity: 1, strokeWeight: 5, …}type: "circle"[[Prototype]]: Object
PolyMap.js?867b:171 _.fj {gm_accessors_: {…}, fillColor: "#ffff00", gm_bindings_: {…}, fillOpacity: 1, strokeWeight: 5, …}Ne: $i {gm_bindings_: {…}, __gm: Aca, gm_accessors_: {…}, renderingType: "RASTER", mapTypeId: "hybrid", …}Vq: (3) [Wf, Wf, Wf]Xe: _.VB {i: div, g: _.WA, j: _.SA, gm_bindings_: {…}, gm_accessors_: {…}, …}center: _.zf {lat: ƒ, lng: ƒ}clickable: falseclosure_uid_543128641: 461draggable_changed: ƒ c()editable: trueeditable_changed: ƒ e()eq: SH {i: _.hj, gm_bindings_: {…}, g: Array(10), __e3_: {…}, ob: _.Hi, …}fillColor: "#ffff00"fillOpacity: 1gm_accessors_: {fillColor: null, fillOpacity: null, strokeWeight: null, clickable: null, editable: null, …}gm_bindings_: {fillColor: {…}, fillOpacity: {…}, strokeWeight: {…}, clickable: {…}, editable: {…}, …}listeners: (11) [Wf, Wf, Wf, Wf, Wf, Wf, Wf, Wf, Wf, Wf, Wf]map: $i {gm_bindings_: {…}, __gm: Aca, gm_accessors_: {…}, renderingType: "RASTER", mapTypeId: "hybrid", …}nr: OH {gm_bindings_: {…}, g: _.SA, gm_accessors_: {…}}radius: 246.17354060977704strokeWeight: 5ti: _.ZB {g: _.kr, gm_accessors_: {…}, strokeColor: "#000000", gm_bindings_: {…}, strokeOpacity: 1, …}un: MH {H: OH, o: KH, i: false, g: _.di, N: ƒ, …}visible: truezIndex: 1__e3_: {toolbar: {…}, mouseover: {…}, click: {…}, mouseout: {…}}[[Prototype]]: _.J
Koray S.
hi all, does anybody know how we can save state for the map (center, zoom) accross page changes without triggering a re-render of the map ?
Srikanth Thyagarajan
hello all
Srikanth Thyagarajan
I'm Srikanth Thagarajan, I have a specific use case but I'm not finding the solution, I'm working on a UTM project where we have de 1st we were using Mapbox. and Mapbox studio, in Mapbox studio we were able to upload the geojson where the data get rendered in react app by using Mapbox-gl library, but now the tech changed and we need to move to GMap, and I'm trying to find some similar behaviour where the geojson can be fetch and rendered within google map API
so i came across the react-google-maps library, but I'm failing to find the solution
please help
Mitchel Foster
Hello! I am having a hard time implementing the heatmap to my project. I am also having a hard time finding an example of how to use the heatmap with the react-google-maps package. Thanks for the help!
Hussein Duvigneau
I have a calculation-heavy app (real-time movement of markers/thousand-point polylines and distance calcs between them), and getting some stutter, not unusable but noticable. I'm wondering if one way of optimizing might be to switch to vanilla google maps to remove any react overhead. Does anyone have experience or benchmarks to suggest if this is worth the effort?
or is it the case that there wouldn't be much difference
Sombir Singh
how i can make route is diffrent color route using direction renderer component