Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Nov 25 16:06
    gabriellacerda commented #53
  • Nov 25 16:03
    gabriellacerda commented #53
  • Nov 25 16:01
    gabriellacerda commented #53
  • Nov 25 15:24
    yhoungdev commented #53
  • Nov 25 12:07
    premshetty opened #1097
  • Nov 24 12:37
    cristianTOTH commented #1006
  • Nov 11 08:36
    salih-mojgenie edited #1096
  • Nov 11 08:35
    salih-mojgenie edited #1096
  • Nov 11 08:35
    salih-mojgenie opened #1096
  • Nov 10 10:34
    mohamedaleya commented #1094
  • Nov 07 13:30
    jedzeins commented #1095
  • Nov 07 13:27
    jedzeins edited #1095
  • Nov 07 13:24
    jedzeins opened #1095
  • Oct 30 13:47
    yasinuysal33 commented #939
  • Oct 29 18:16
    DaddyWarbucks closed #934
  • Oct 28 07:37
    NitnekB closed #1028
  • Oct 21 16:01
    tvaroglu commented #931
  • Oct 10 12:01
    DanielDouradoFsa commented #459
  • Sep 21 17:49
    DavidAmyot commented #414
  • Sep 18 08:58
    NoamsGit commented #495
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
Hello ppl. I am new here . I want to ask something amd I would appreciate it a lot if u could help me. I am building a simple react google map with next js. In the beginning the map has some initial markers . I add a custom search input thay update the data with every input change and that causes the map to rerender with new markers. The problem is that the previous marker icons are still rendered on the map and the new markers render in front of them. There is no wrong on updated markers . They rendered normally , the problem is the previously markers are still there. Anyone jas any idea of why that happening? Ty in advance
Рустем Гарипов
Hello, friends. I have a big problem with this component: without key component show all google POI (like a shops, restaurants etc), but with correct key not this POI showns. I need this POI... Have any idea how to resolve it?
Code is simple:
                    key: '',
                    lat: 68.970663,
                    lng: 33.074918
Enrique Barco
Hey Guys, when I open up my InfoWindow, there seems to be an empty one that opens up with it. Seems it was a bug that was previously fixed , however, it is persisting in my case. Any work arounds?
Enrique Barco
Hey again, for those that have run into a similar program, disabling react strict mode in the index file fixed the issue for me
Good day! I'm trying to set the zoom level when there's only 1 marker. The codestack is quite large, so i'm not sure if it's set somewhere in the code or if it's default behaviour; but when there's only 1 marker, it zooms in to the max zoom level. Is this default behaviour? And if so, how to overwrite it?
Fenaz Mohamed
Is there any way to use map instance to use it for places library outside onLoad? I want the map instance to be in onCenterChanged so I can use the places library there,
Ram Meena
Hey Guys, I am passing heading as a number as per documentation in my react project to rotate the map but it is not working, could anyone help here
I connected my react project to the google maps api using react-google-maps library and it shows the following without any errors
My code
import {
  } from "@react-google-maps/api";
import { useState, useMemo, useEffect, useRef } from "react";
import "./Map.css";

const API_KEY = xxxxx;

export default function Map() {

    const { isLoaded } = useLoadScript({
        id: 'google-map-script',
        googleMapsApiKey: API_KEY,

    if (!isLoaded) return <div> Loading... </div>
            <GoogleMap zoom={10} center={{lat:100, lng: 100}} mapContainerClassName="mapContainer" >
                <Marker position={{lat:100, lng: 100}}></Marker>
any idea why it happens?
,Hi All

Hi All,

I want to implement live navigation just like google maps in react (functional). Can anyone please help me how to implement this as i am not getting any idea. I have implemented upto DirectionRender but after that i am not getting any stuffs for this live navigation.

Nisrine El Turky

Hello :)
I am using https://react-google-maps-api-docs.netlify.app/#drawingmanager

getting black screen :(
can you help please

Mortimer Marsyja
Hello and good morning I just wanted to mantion that your sandbox is currently broken
Hello there this is my first time to use google map platform. And I have website where that the user choose among 4 paths every path have start and end points. But I want estimate arrival time according to the chosen path by using google map distance metrics in my <#905533814577717308> component. How I can use it I’m tried many ways but It’s not successful and I don’t know where I should put API key. Please help me. Thank you
Hello there this is my first time to use google map platform. And I have website where that the user choose among 4 paths every path have start and end points. But I want estimate arrival time according to the chosen path by using google map distance metrics in my react component. How I can use it I’m tried many ways but It’s not successful and I don’t know where I should put API key. Please help me. Thank you
Dhinesh Kumar
Hello :)
I am using this libary i need to plot boundary using city names/ zip/postal code is there any work around
can you help please
Daniel Winter
hi there, are any updates coming to this package or is it completely dead? is there a famous fork supporting newer react versions?
In my case it turned out to be because fitBounds was immediately rebounding the map, so I had to change it so that it was only called once when my map's markers were created.
hi any one there?
Reniskumar Ribadiya
I want to add only marker with label on predefined lat and long in my react js static page.
any one have idea, what will be charge from google ?
Andrei Chiriac
Hello, I am new on the platform. I am currently using "react": "17.0.2" and "react-google-maps": "9.4.5". I am getting this warning (React.createFactory() is deprecated and will be removed in a future major release. Consider using JSX or use React.createElement() directly instead.) when I am trying to use withGoogleMap HOC because it uses createFactory. Currently, in the project I work, this will cause the build to fail. Is there any fix on the way for this?