Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Jan 13 02:53
    nandorojo commented #1033
  • Jan 05 07:13
    JustFly1984 commented #190
  • Jan 05 02:38
    tsryu commented #190
  • Dec 25 2020 05:01
    JustFly1984 commented #656
  • Dec 25 2020 04:02
    Littlewiz123 commented #656
  • Dec 21 2020 06:36
    vmobeedeveloper commented #806
  • Dec 21 2020 06:34
    vmobeedeveloper commented #806
  • Dec 21 2020 06:34
    vmobeedeveloper commented #806
  • Dec 08 2020 09:02
    donni106 commented #1066
  • Dec 08 2020 03:49
    JustFly1984 commented #1066
  • Dec 07 2020 23:08
    donni106 edited #1066
  • Dec 07 2020 20:02
    donni106 edited #1066
  • Dec 07 2020 20:01
    donni106 edited #1066
  • Dec 07 2020 19:59
    donni106 opened #1066
  • Nov 29 2020 13:24
    JustFly1984 commented #1061
  • Nov 29 2020 12:46
    PokerJava commented #1065
  • Nov 29 2020 12:32
    JustFly1984 commented #1064
  • Nov 29 2020 12:31
    JustFly1984 commented #1065
  • Nov 29 2020 12:20
    PokerJava opened #1065
  • Nov 19 2020 08:00
    alexkhismatulin commented #1061
kaleemullah-innovo
@kaleemullah-innovo
@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?
Alfonso Antonio
@fonzilla
Hello! Has anyone been able to successfully bind a circle to marker and allow them to be draggable together?
Krishnamraju Kammili
@KrishnamrajuK11_twitter
Hi all, I am using a DrawingManager to draw shapes on the map, my issue is I need to update a individual shapes fillcolor, strokecolor, strokeweight when some event occours how can I do that?
Zijian Zhou
@zhouuualexander
Hi! I am trying to add my api key, but have no idea how to do it. Anyone who can help me? I appreciate in advance.
Sidharth Lodha
@Sidlodha
Hey, I want to filter suggestions and want only suggestions that have postal_code . Is there any way to do that ?
Ruchi Goswami
@ruchi-scaletech
Hello, I am using info-window outside the marker tag as there are multiple dynamic markers. But when I am trying to open a info window on given lat long, one blank info window is also appearing at same position. How do I solve it, how do I stop that blank infowindow ?
ashishiiit01
@ashishiiit01
@JustFly1984 My component doesn't re-render, anyone having some idea??
umair-riaz-official
@umair-riaz-official
set a key attribute in the element with which key you want to re render it.
Roman Hrybinchuk
@Romucmad
Hi, how can I remove this buttoms and etc before the click? So the map look nice ?
YamilRuiz
@YamilRuiz
@zhouuualexander Go to the documentation and see the examples. The examples have the format
YamilRuiz
@YamilRuiz
I am having some difficulties trying to use the method from a Marker (getTitle, getLabel etc ...). I am able to pass a simple function down and it works but the methods from the Marker will not work. Can somebody give me some advise on the matter. Thanks
import React,{Component} from "react"
import { compose, withProps } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker} from "react-google-maps"
import {MarkerClusterer} from 'react-google-maps/lib/components/addons/MarkerClusterer'

const Data=[
    { site:'DXL01234',lat:32.884254, lng:-97.276890,visible:true},
    { site:'DXL01238',lat:32.883707, lng:-97.275264,visible:true}
]


const MyMapComponent = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)(props =>
  <GoogleMap
    defaultZoom={14}
    defaultCenter={{lat:props.center.lat,lng:props.center.lng}}
  >
  <MarkerClusterer
      averageCenter
      enableRetinaIcons
      gridSize={50}
    >
        {props.data.map(pin=>(
          <Marker 
            key={pin.site}
            defaultTitle={pin.site}
            position={{lat:pin.lat, lng:pin.lng}}
            defaultAnimation={window.google.maps.Animation.DROP}
            visible={pin.visible}
            onClick={props.onMarkerclick}
          />
        ))}

    </MarkerClusterer>


  </GoogleMap>
)

class TheMap extends Component {
  constructor(props){

    super(props);
    this.state={
      center:{ lat: Data[0].lat, lng:Data[0].lng},
      data:[]
    }      
  } 
  componentDidMount(){
    this.setState({
        data:Data
    })
  }
  onMarkerclick(e){

    const label=e.getTitle()
    console.log(label)
  }
  render() {
    return (
      <MyMapComponent
        center={this.state.center}
        data={this.state.data}
        click={this.onMarkerclick}      
      />
    )
  }
}

export default TheMap
Mekala
@Mekala-palaniyappan
Screenshot 2020-07-30 at 9.33.22 AM.png
Screenshot 2020-07-30 at 9.34.03 AM.png
Hi guys,
I am using react-google-maps, i have changed the center position when we onClick the GoogleMap component, used state for this. Center position has been changed, but blank screen is displaying, can anyone help me
umair-riaz-official
@umair-riaz-official
@Mekala-palaniyappan please show some console error
Igor William
@igorwilliam
Hi guys, i looking for a way to get address by coordinates lat and lng
anyone know if this lib suport this?
johnloberger
@johnloberger
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
@sohail-nazar
is there a way to add and then remove marker in GoogleMap?
Pranav Maheshwari
@pranavm-deqode
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
@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.
avicouzin
@avicouzin
Hello! Can I use the setCenter() method?
roshan-maind
@roshan-maind
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?
Jakub
@mks1948_gitlab
Hello i have big problem with remove few markers ? Do you have example how to remove all markers from array ?
RamNaga
@RamNaga1_twitter
Hi, I need to display address with lat and long values.. is it possible? can some one help me?
Vinodh Tankasala
@vinodh99
How large is this application? I mean the size
Hyungu Yoon
@hgyoon
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?
Raymond Rome
@DannyRome524
Hey guys.
Can I ask one?
Would you please share example of overlappingmarkerspiderfier with react?
pramodAmbekar
@pramodAmbekar
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
@anjali.kumari2_gitlab
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 {
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