Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • 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
  • May 16 04:18
    JustFly1984 commented #1082
  • May 16 04:18
    JustFly1984 commented #1084
  • May 16 04:18
    JustFly1984 commented #1087
  • May 16 04:18
    JustFly1984 commented #1088
  • May 16 04:17
    JustFly1984 commented #1089
  • May 15 22:29
    venkat-koganti-nll opened #1089
  • May 13 17:45
    ganeshkumar-ks-by opened #1088
  • May 03 01:06
    HunterJS-bit opened #1087
  • Apr 21 16:38
    xpyrosh commented #1083
  • Apr 21 14:01
    ismailcherri opened #1086
  • Apr 13 13:38
    JustFly1984 commented #1085
  • Apr 11 19:23
    BrodaNoel edited #1085
  • Apr 11 19:21
    BrodaNoel opened #1085
Hey all! Anyone know how to render an overlay onto the Map component?? I've found this code online 'map.overlayMapTypes.insertAt(0,waqiMapOverlay)' using insertAt but I am not sure of the React syntax equivalent.
@igorwilliam you can use React Geocoder API for that https://github.com/shukerullah/react-geocode
Muhammad Sohail Nazar
is there a way to add and then remove marker in GoogleMap?
Pranav Maheshwari
Hey all, i was trying to use DrawingManager and Polygon components but both of them are appearing twice in Strict-mode. Can someone help me out here?
Magdalena Dering
Hi :),
does someone know how to limit search to specific country?
I'm using react-google-maps, but main setting are written in js functions.
This is the part of the code: https://codepen.io/Mdering/pen/OJNwPzO
I know that I can use componentRestrictions: [country: 'us'], and placed in getPlacePredictions, but is not working.
Hello! Can I use the setCenter() method?
Hi. I am using react-google-maps to place a marker on the map with custom icon and every 1 second, I update the marker's position by updating the position prop being sent to the marker so as to achieve a tracking feature as uber provides. But the issue is that the marker is appearing on both the latest location I updated in the props and the first initial location that the marker was given in the props. So I see the same marker at 2 places. How do I solve this issue?
Hello i have big problem with remove few markers ? Do you have example how to remove all markers from array ?
Hi, I need to display address with lat and long values.. is it possible? can some one help me?
Vinodh Tankasala
How large is this application? I mean the size
Hyungu Yoon
Hello, I'm currently using DirectionsRenderer component but I want the markers at the starting and ending points to disappear. It currently looks like "<DirectionsRenderer directions={directions} markerOptions={markerOptions} />
" and const markerOptions = {
visible: false,
is the markerOptions a valid argument to the component? What should I change there?
Hey guys.
Can I ask one?
Would you please share example of overlappingmarkerspiderfier with react?
Hi All,
We have a requirement for plotting 10k+ markers on google maps, is it possible to plot 10k+ markers using this package, as we are using google-map-react, this package is crashing, sometime it takes 20 mins to load.
Can you guys please help us.
Thank you.
Anjali Kumari
hello everyone, can anyone help me how can i get alternative route on map with react-google-maps package now am getting one direction on map my cureent code is

import React, { Component } from "react";
import {
} from "react-google-maps";
import { Polyline } from 'react-google-maps';

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

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)
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();
        directions: response,
        routeIndex: i,

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

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


export default Map;

Mohammed Ayaz
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
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
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?
Vishnu Tej

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.

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