google-maps-react | Companion code to the `` How to Write a Google Maps React | REST library

 by   fullstackreact JavaScript Version: Current License: MIT

kandi X-RAY | google-maps-react Summary

google-maps-react is a JavaScript library typically used in Telecommunications, Media, Media, Entertainment, Web Services, REST, React applications. google-maps-react has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i trilogo-google-maps-react' or download it from GitHub, npm.
Companion code to the "How to Write a Google Maps React Component" Tutorial
    Support
      Quality
        Security
          License
            Reuse
            Support
              Quality
                Security
                  License
                    Reuse

                      kandi-support Support

                        summary
                        google-maps-react has a medium active ecosystem.
                        summary
                        It has 1598 star(s) with 807 fork(s). There are 38 watchers for this library.
                        summary
                        It had no major release in the last 6 months.
                        summary
                        There are 264 open issues and 127 have been closed. On average issues are closed in 220 days. There are 30 open pull requests and 0 closed requests.
                        summary
                        It has a neutral sentiment in the developer community.
                        summary
                        The latest version of google-maps-react is current.
                        google-maps-react Support
                          Best in #REST
                            Average in #REST
                            google-maps-react Support
                              Best in #REST
                                Average in #REST

                                  kandi-Quality Quality

                                    summary
                                    google-maps-react has 0 bugs and 0 code smells.
                                    google-maps-react Quality
                                      Best in #REST
                                        Average in #REST
                                        google-maps-react Quality
                                          Best in #REST
                                            Average in #REST

                                              kandi-Security Security

                                                summary
                                                google-maps-react has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
                                                summary
                                                google-maps-react code analysis shows 0 unresolved vulnerabilities.
                                                summary
                                                There are 0 security hotspots that need review.
                                                google-maps-react Security
                                                  Best in #REST
                                                    Average in #REST
                                                    google-maps-react Security
                                                      Best in #REST
                                                        Average in #REST

                                                          kandi-License License

                                                            summary
                                                            google-maps-react is licensed under the MIT License. This license is Permissive.
                                                            summary
                                                            Permissive licenses have the least restrictions, and you can use them in most projects.
                                                            google-maps-react License
                                                              Best in #REST
                                                                Average in #REST
                                                                google-maps-react License
                                                                  Best in #REST
                                                                    Average in #REST

                                                                      kandi-Reuse Reuse

                                                                        summary
                                                                        google-maps-react releases are not available. You will need to build from source code and install.
                                                                        summary
                                                                        Deployable package is available in npm.
                                                                        summary
                                                                        Installation instructions, examples and code snippets are available.
                                                                        summary
                                                                        google-maps-react saves you 40 person hours of effort in developing the same functionality from scratch.
                                                                        summary
                                                                        It has 108 lines of code, 0 functions and 42 files.
                                                                        summary
                                                                        It has low code complexity. Code complexity directly impacts maintainability of the code.
                                                                        google-maps-react Reuse
                                                                          Best in #REST
                                                                            Average in #REST
                                                                            google-maps-react Reuse
                                                                              Best in #REST
                                                                                Average in #REST
                                                                                  Top functions reviewed by kandi - BETA
                                                                                  kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
                                                                                  Currently covering the most popular Java, JavaScript and Python libraries. See a Sample Here
                                                                                  Get all kandi verified functions for this library.
                                                                                  Get all kandi verified functions for this library.

                                                                                  google-maps-react Key Features

                                                                                  Companion code to the "How to Write a Google Maps React Component" Tutorial

                                                                                  google-maps-react Examples and Code Snippets

                                                                                  No Code Snippets are available at this moment for google-maps-react.
                                                                                  Community Discussions

                                                                                  Trending Discussions on google-maps-react

                                                                                  google-maps-react - Specific Pins not Showing up until Click
                                                                                  chevron right
                                                                                  Chart.js Error: You may need an appropriate loader to handle this file type
                                                                                  chevron right
                                                                                  How to add an InfoWindow to my markers in google-maps-react?
                                                                                  chevron right
                                                                                  Warning: Using UNSAFE_componentWillReceiveProps in strict mode
                                                                                  chevron right
                                                                                  Google maps Infowindow ReactJS
                                                                                  chevron right
                                                                                  google maps react front end API key storage
                                                                                  chevron right
                                                                                  How to update google-maps-react direction route?
                                                                                  chevron right
                                                                                  How to run my react app in Docker container
                                                                                  chevron right
                                                                                  Google Maps React Polygon Issues
                                                                                  chevron right
                                                                                  Problem hosting React + Node.js app on heroku
                                                                                  chevron right

                                                                                  QUESTION

                                                                                  google-maps-react - Specific Pins not Showing up until Click
                                                                                  Asked 2021-Apr-27 at 03:04

                                                                                  SparkNotes:

                                                                                  I'm pulling in a crime API to see hotspots. Certain crimes will not be logged with a lat/long, therefore, are not shown up in standard (free) crime apps.

                                                                                  • Lat/Long pins I've overridden to a new lat/long don't show up on first load/or at all. (google-maps-react) (Confirmed lat/long is valid per crimes in near areas.)
                                                                                  • Normal pins that had an existing lat/long show up fine/show up as soon as it loads. (Even though it's all the same array of data.)
                                                                                  • I loop through the blank lat/long and replace the lat/long with a rough lat/long of the area just so it shows up. In my console log I can confirm that I've overriden the blank lat/long.
                                                                                  • I want these records to understand the neighborhoods/potentially avoid moving into a hotspot of specific crimes.

                                                                                  API Normal:
                                                                                  https://data.seattle.gov/resource/tazs-3rd5.json?$limit=20000&$offset=20000&$order=offense_id

                                                                                  Specific Items: https://data.seattle.gov/resource/tazs-3rd5.json?$where=report_number%20in(%272020-022388%27,%272020-044620%27,%272020-043813%27,%272020-029645%27,%272020-901621%27)

                                                                                  Full Use Case (Which doesn't work for at all pins): https://data.seattle.gov/resource/tazs-3rd5.json?crime_against_category=PERSON&mcpp=MAGNOLIA&offense_parent_group=SEX%20OFFENSES

                                                                                  Request for help: Can someone please help on how to get these overridden pins to show up consistently?

                                                                                  Things I've Tried: Force update/having multiple refreshes etc/decreasing async time. Those work for when I put in specific crime report number, but if I search for kidnapping/peeping tom, they will not pull with the rest of the person crimes.

                                                                                  I can confirm that if I just load every crime in that API, the map logs all of them (except the ones I need), It's like a pin per foot of street, but the pins in the categories I need don't show up. (So I don't believe it's a volume issue.)

                                                                                  Code for API Data:

                                                                                  const endpoint = 'https://data.seattle.gov/resource/tazs-3rd5.json?$where=report_number%20in(%272020-022388%27,%272020-044620%27)'
                                                                                  const originalplaces = [];
                                                                                  const places = []
                                                                                  fetch(endpoint)
                                                                                  .then(blob => blob.json())
                                                                                  .then(data => originalplaces.push(...data));
                                                                                  
                                                                                  
                                                                                  
                                                                                  async function returnTrue() {
                                                                                  
                                                                                  
                                                                                    // create a new promise inside of the async function
                                                                                    let promise = new Promise((resolve, reject) => {
                                                                                  
                                                                                      setTimeout(() => resolve(true), 1000) // resolve
                                                                                    });
                                                                                  
                                                                                  
                                                                                    // wait for the promise to resolve
                                                                                    let result = await promise;
                                                                                    // originalplaces.mcpp === 'MAGNOLIA' && originalplaces.longitude == '0E-9'   && originalplaces.longitude.replace("0E-9", "-122.385973723")
                                                                                    // originalplaces.forEach(function(mcpp, i) { if (mcpp == 'MAGNOLIA') originalplaces[i] = '47.649387230'; });
                                                                                    originalplaces.map(object => {
                                                                                  
                                                                                      if (object.mcpp === 'MAGNOLIA' && object.longitude === '0E-9' && object.latitude === '0E-9')
                                                                                  
                                                                                       {  object.longitude = "-122.391970804"
                                                                                       object.latitude = "47.63103937"
                                                                                      }
                                                                                  
                                                                                  
                                                                                    })
                                                                                    places.push(...originalplaces)
                                                                                  
                                                                                  
                                                                                    console.log(places)
                                                                                  
                                                                                  
                                                                                    // console log the result (true)
                                                                                    console.log(result);
                                                                                  }
                                                                                  
                                                                                  // call the function
                                                                                  returnTrue();
                                                                                  
                                                                                  export default originalplaces;
                                                                                  

                                                                                  Code for Map

                                                                                  import React, { Component } from "react";
                                                                                  import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";
                                                                                  
                                                                                  import places from './crimedata.js'
                                                                                  
                                                                                  class MapView extends Component {
                                                                                    constructor(props) {
                                                                                      super(props)
                                                                                      this.state = {
                                                                                        showingInfoWindow: false,
                                                                                        activeMarker: {},
                                                                                        selectedPlace: {},
                                                                                  
                                                                                      };
                                                                                      this.handleMarkerClick = this.handleMarkerClick.bind(this);
                                                                                      this.handleClose = this.handleClose.bind(this);
                                                                                    }
                                                                                  
                                                                                  
                                                                                  
                                                                                    handleMarkerClick = (props, marker, e) => {
                                                                                      this.setState({
                                                                                        selectedPlace: places[props.placeIndex],
                                                                                        activeMarker: marker,
                                                                                        showingInfoWindow: true,
                                                                                  
                                                                                      });
                                                                                    };
                                                                                  
                                                                                    handleClose = () => {
                                                                                      if (this.state.showingInfoWindow) {
                                                                                        this.setState({
                                                                                          showingInfoWindow: false,
                                                                                          activeMarker: null
                                                                                        });
                                                                                      }
                                                                                    };
                                                                                  
                                                                                    render() {
                                                                                  
                                                                                      return (
                                                                                        
                                                                                  
                                                                                          {places.map((place, i) => {
                                                                                            return (
                                                                                  
                                                                                  
                                                                                  
                                                                                              
                                                                                  
                                                                                            );
                                                                                          })}
                                                                                  
                                                                                          
                                                                                             {this.state.selectedPlace.offense}
                                                                                           

                                                                                  {'Crime: ' + this.state.selectedPlace.offense_parent_group}

                                                                                  {'City: ' + this.state.selectedPlace.mcpp}

                                                                                  {'Report Date: ' +this.state.selectedPlace.report_datetime}

                                                                                  {'Report Number: ' + this.state.selectedPlace.report_number}

                                                                                  ); } } export default GoogleApiWrapper({ apiKey: process.env.REACT_APP_GOOGLEMAPS })(MapView);

                                                                                  Screenshots:

                                                                                  Prior to Clicking

                                                                                  AfterClicking

                                                                                  Last Notes: I have overrides for all the cities, which is why you see 4 pins, in my screenshot, but code only has override for one city, if I include all, it's really long.

                                                                                  ANSWER

                                                                                  Answered 2021-Apr-27 at 03:04

                                                                                  It seems that there's a timing issue when importing your places data from crimedata.js in the first load of the code. I can see that the places value is empty [] in the initial run then the loading of your places in your crimedata.js will follow after some time. You can see this in the console log in my working code.

                                                                                  To handle this, I used state variables to hold the value of the updatedPlaces data then in componentDidMount function, I used setTimeOut and set value of updatedPlaces state variable from the imported places data that is now available.

                                                                                  I then used this state variable as a condition for the markers to load.

                                                                                  Here's the code snippet:

                                                                                  import React, { Component } from "react";
                                                                                  import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";
                                                                                  
                                                                                  import places from "./crimedata.js";
                                                                                  console.log("upon importing crimedata.js");
                                                                                  console.log(places);
                                                                                  class MapView extends Component {
                                                                                    constructor(props) {
                                                                                      super(props);
                                                                                      this.state = {
                                                                                        updatedPlaces: null,
                                                                                        showingInfoWindow: false,
                                                                                        activeMarker: {},
                                                                                        selectedPlace: {}
                                                                                      };
                                                                                      this.handleMarkerClick = this.handleMarkerClick.bind(this);
                                                                                      this.handleClose = this.handleClose.bind(this);
                                                                                    }
                                                                                  
                                                                                    componentDidMount() {
                                                                                      //console.log(places);
                                                                                  
                                                                                      setTimeout(() => {
                                                                                        this.setState({
                                                                                          updatedPlaces: places
                                                                                        });
                                                                                        console.log("timeOut in componentDidMount");
                                                                                        console.log(this.state.updatedPlaces);
                                                                                      }, 1000);
                                                                                    }
                                                                                  
                                                                                    handleMarkerClick = (props, marker, e) => {
                                                                                      this.setState({
                                                                                        selectedPlace: places[props.placeIndex],
                                                                                        activeMarker: marker,
                                                                                        showingInfoWindow: true
                                                                                      });
                                                                                    };
                                                                                  
                                                                                    handleClose = () => {
                                                                                      if (this.state.showingInfoWindow) {
                                                                                        this.setState({
                                                                                          showingInfoWindow: false,
                                                                                          activeMarker: null
                                                                                        });
                                                                                      }
                                                                                    };
                                                                                  
                                                                                    render() {
                                                                                      return (
                                                                                        
                                                                                          {this.state.updatedPlaces != null &&
                                                                                            this.state.updatedPlaces.map((place, i) => (
                                                                                              
                                                                                            ))}
                                                                                  
                                                                                          
                                                                                            
                                                                                              {" "}
                                                                                              {this.state.selectedPlace.offense}
                                                                                              

                                                                                  {"Crime: " + this.state.selectedPlace.offense_parent_group}

                                                                                  {"City: " + this.state.selectedPlace.mcpp}

                                                                                  {"Report Date: " + this.state.selectedPlace.report_datetime}

                                                                                  {"Report Number: " + this.state.selectedPlace.report_number}

                                                                                  ); } } export default GoogleApiWrapper({ apiKey: "YOUR_API_KEY" })(MapView);

                                                                                  Source https://stackoverflow.com/questions/67247865

                                                                                  QUESTION

                                                                                  Chart.js Error: You may need an appropriate loader to handle this file type
                                                                                  Asked 2021-Apr-22 at 11:31

                                                                                  I'm currently attempting to use Chart.js within my react application but when I go to build my application I'm presented with this error

                                                                                  ERROR in ./node_modules/chart.js/dist/chart.esm.js
                                                                                  Module parse failed: D:\MyApp\node_modules\chart.js\dist\chart.esm.js Unexpected token (6613:12)
                                                                                  You may need an appropriate loader to handle this file type.
                                                                                  |         if (intermediateIndex1 !== startIndex && intermediateIndex1 !== lastIndex) {
                                                                                  |           decimated.push({
                                                                                  |             ...data[intermediateIndex1],
                                                                                  |             x: avgX,
                                                                                  |           });
                                                                                   @ ./src/imports/Dashboard/Dashboard.js 21:12-31
                                                                                   @ ./src/App.js
                                                                                   @ ./src/index.js
                                                                                   @ multi babel-polyfill ./src/index.js
                                                                                  
                                                                                  

                                                                                  I tried researching online to see if anyone else has had the same issue, but I had no luck.

                                                                                  Below is my Webpack config file:

                                                                                  const path = require('path');
                                                                                  
                                                                                  module.exports = {
                                                                                      entry: ['babel-polyfill', './src/index.js'],
                                                                                    output: {
                                                                                      path: path.join(__dirname, 'public'),
                                                                                      filename: 'bundle.js'
                                                                                    },
                                                                                    module: {
                                                                                      rules: [{
                                                                                        loader: 'babel-loader',
                                                                                        test: /\.jsx?$/,
                                                                                        exclude: /node_modules/
                                                                                      }, {
                                                                                        test: /\.s?css$/,
                                                                                        use: [
                                                                                          'style-loader',
                                                                                          'css-loader',
                                                                                          'sass-loader'
                                                                                        ]
                                                                                      },{
                                                                                          test: /\.(jpe?g|png|gif|svg|mp3)$/i,
                                                                                          loaders: [
                                                                                              'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
                                                                                              'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
                                                                                          ]
                                                                                      }
                                                                                      ]
                                                                                    },
                                                                                    devtool: 'cheap-module-eval-source-map',
                                                                                    devServer: {
                                                                                      contentBase: path.join(__dirname, 'public'),
                                                                                      historyApiFallback: true
                                                                                    }
                                                                                  };
                                                                                  

                                                                                  And here is my bablerc file

                                                                                  {
                                                                                      "presets": [
                                                                                        "env",
                                                                                        "react",
                                                                                        "stage-0"
                                                                                      ],
                                                                                      "plugins": [
                                                                                        "transform-class-properties"
                                                                                      ]
                                                                                    }
                                                                                  
                                                                                  

                                                                                  This is the list of my dependencies that are installed

                                                                                  "dependencies": {
                                                                                      "@babel/polyfill": "^7.0.0",
                                                                                      "aws-sdk": "^2.580.0",
                                                                                      "axios": "^0.19.0",
                                                                                      "babel-cli": "^6.26.0",
                                                                                      "babel-core": "^6.26.3",
                                                                                      "babel-loader": "7.1.1",
                                                                                      "babel-plugin-transform-class-properties": "6.24.1",
                                                                                      "babel-polyfill": "^6.26.0",
                                                                                      "babel-preset-env": "^1.7.0",
                                                                                      "babel-preset-react": "6.24.1",
                                                                                      "babel-preset-stage-0": "^6.24.1",
                                                                                      "bcryptjs": "^2.4.3",
                                                                                      "body-parser": "^1.18.2",
                                                                                      "chart.js": "^3.1.0",
                                                                                      "core-js": "^2.5.3",
                                                                                      "css-loader": "0.28.4",
                                                                                      "express": "latest",
                                                                                      "file-loader": "^1.1.5",
                                                                                      "google-maps-react": "^2.0.2",
                                                                                      "image-webpack-loader": "^3.4.2",
                                                                                      "immutability-helper": "^2.4.0",
                                                                                      "jquery": "^3.4.1",
                                                                                      "jsbarcode": "^3.11.0",
                                                                                      "jsonwebtoken": "^8.1.0",
                                                                                      "lodash": "^4.17.14",
                                                                                      "moment": "^2.22.2",
                                                                                      "node-sass": "^4.12.0",
                                                                                      "node-schedule": "^1.3.2",
                                                                                      "nodemailer": "^4.7.0",
                                                                                      "normalize.css": "7.0.0",
                                                                                      "npm": "^6.10.0",
                                                                                      "papaparse": "^5.1.1",
                                                                                      "promise-mysql": "^3.1.0",
                                                                                      "prop-types": "^15.6.0",
                                                                                      "react": "^16.0.0",
                                                                                      "react-csv": "^1.0.14",
                                                                                      "react-dom": "^16.0.0",
                                                                                      "react-router-dom": "4.2.2",
                                                                                      "react-scripts": "1.0.14",
                                                                                      "sass-loader": "6.0.6",
                                                                                      "socket.io": "^2.0.3",
                                                                                      "style-loader": "0.18.2",
                                                                                      "twilio": "^3.24.0",
                                                                                      "validator": "8.0.0",
                                                                                      "webpack": "3.1.0",
                                                                                      "webpack-dev-server": "2.5.1"
                                                                                    },
                                                                                  

                                                                                  I expected the error to tell me what loader I needed to install to use with Chart.js but it does not specify. If anyone knows which loader I need to install and where I should put it in my files that would be awesome. TIA!

                                                                                  ANSWER

                                                                                  Answered 2021-Apr-22 at 11:31

                                                                                  Chart.js version 3 is not compatible. Change it to ^2.9.4. The same problem as you and I have been solved.

                                                                                  Source https://stackoverflow.com/questions/67081096

                                                                                  QUESTION

                                                                                  How to add an InfoWindow to my markers in google-maps-react?
                                                                                  Asked 2021-Mar-04 at 23:26

                                                                                  I try to add InfoWindows to the markers of my map (using google-maps-react) but it doesn't work and I don't understand why. The state receives the longitude and latitude data.

                                                                                  const InfoPage = ({data}) => {
                                                                                      const [selectedElement, setSelectedElement] = useState(null)
                                                                                   
                                                                                      return (
                                                                                      
                                                                                          
                                                                                          {data.map((element, index) => {
                                                                                            return (
                                                                                            {setSelectedElement(element)}}
                                                                                            />
                                                                                            )})}
                                                                                          {selectedElement ? (
                                                                                             {setSelectedElement(null)}}
                                                                                              >
                                                                                              
                                                                                                info
                                                                                              
                                                                                              ) : null }
                                                                                         
                                                                                      
                                                                                      );
                                                                                  }

                                                                                  ANSWER

                                                                                  Answered 2021-Mar-04 at 02:04

                                                                                  Since you will be clicking the Marker for the InfoWindow to show, you can use the InfoWindow's marker parameter instead of position parameter. You also need to use the InfoWindow's visible parameter and set it to true for it to show. You can check this simple code how I did it(I just used data from json file). Code snippet below:

                                                                                  import React, { useState } from "react";
                                                                                  import { Map, GoogleApiWrapper, Marker, InfoWindow } from "google-maps-react";
                                                                                  
                                                                                  import data from "./data.json";
                                                                                  
                                                                                  const InfoPage = () => {
                                                                                    const [selectedElement, setSelectedElement] = useState(null);
                                                                                    const [activeMarker, setActiveMarker] = useState(null);
                                                                                    const [showInfoWindow, setInfoWindowFlag] = useState(true);
                                                                                  
                                                                                    return (
                                                                                      
                                                                                        
                                                                                          {data.map((element, index) => {
                                                                                            return (
                                                                                               {
                                                                                                  setSelectedElement(element);
                                                                                                  setActiveMarker(marker);
                                                                                                }}
                                                                                              />
                                                                                            );
                                                                                          })}
                                                                                          {selectedElement ? (
                                                                                             {
                                                                                                setSelectedElement(null);
                                                                                              }}
                                                                                            >
                                                                                              
                                                                                                {selectedElement.name}
                                                                                              
                                                                                            
                                                                                          ) : null}
                                                                                        
                                                                                      
                                                                                    );
                                                                                  };
                                                                                  

                                                                                  Source https://stackoverflow.com/questions/66387750

                                                                                  QUESTION

                                                                                  Warning: Using UNSAFE_componentWillReceiveProps in strict mode
                                                                                  Asked 2020-Nov-26 at 16:56

                                                                                  I have tried to add google map to my project and everything works good but i have following warning in my console but don't know why and how to fix it.

                                                                                  "Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.

                                                                                  • Move data fetching code or side effects to componentDidUpdate.
                                                                                  • If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state

                                                                                  Please update the following components: Wrapper"

                                                                                  Below is my code:

                                                                                  import React from 'react'
                                                                                  import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
                                                                                  const Location = (props) => {
                                                                                    const mapStyles = {
                                                                                      width: '60%',
                                                                                      height: '60%'
                                                                                    }
                                                                                    const {google} = props
                                                                                  return (
                                                                                    
                                                                                  
                                                                                    Znajdź nas!
                                                                                    
                                                                                      
                                                                                    
                                                                                  );
                                                                                  }
                                                                                  
                                                                                  export default GoogleApiWrapper({
                                                                                    apiKey: ('MY_TOKEN')
                                                                                  })(Location)
                                                                                  

                                                                                  ANSWER

                                                                                  Answered 2020-Nov-26 at 16:56

                                                                                  It's a problem in the current version of google-maps-react and React's strict mode. See: https://github.com/fullstackreact/google-maps-react/issues/476

                                                                                  You probably shouldn't disable strict mode, so you'll have to either fix the library yourself or wait for someone to do that, then upgrade.

                                                                                  Source https://stackoverflow.com/questions/65026280

                                                                                  QUESTION

                                                                                  Google maps Infowindow ReactJS
                                                                                  Asked 2020-Nov-24 at 06:17

                                                                                  very new to react. I'm using google-maps-react-api. I have two files. Index.js and MapMarker.js. It loads a few location points with info windows already loaded. I can close the window but when clicking on the marker they do not reopen. My onCLick events do not work as I expect. I want the case to be the markers load and I click them to show info window and then can close the window as well. I've read the docs and issues on Github but can't find the info. Thanks.

                                                                                  Index.js
                                                                                  
                                                                                  import ReactDOM from "react-dom";
                                                                                  import React from "react";
                                                                                  
                                                                                  import { GoogleMap, LoadScript, MarkerClusterer } from "@react-google-maps/api";
                                                                                  
                                                                                  import MapMarker from "./MapMarker";
                                                                                  
                                                                                  const mapOptions = {
                                                                                    fullscreenControl: false,
                                                                                    streetViewControl: false,
                                                                                    mapTypeControl: false,
                                                                                    styles: [
                                                                                      {
                                                                                        featureType: "poi",
                                                                                        elementType: "labels",
                                                                                        stylers: [
                                                                                          {
                                                                                            visibility: "off"
                                                                                          }
                                                                                        ]
                                                                                      },
                                                                                      {
                                                                                        featureType: "transit",
                                                                                        elementType: "all",
                                                                                        stylers: [
                                                                                          {
                                                                                            visibility: "off"
                                                                                          }
                                                                                        ]
                                                                                      }
                                                                                    ]
                                                                                  };
                                                                                  const key = ""; // PUT GMAP API KEY HERE
                                                                                  const defaultLocation = {
                                                                                    lat: 37.9755691,
                                                                                    lng: 23.7361789
                                                                                  };
                                                                                  let markers = [
                                                                                    {
                                                                                      id: 1,
                                                                                      lat: 37.975,
                                                                                      lng: 23.7361789
                                                                                    },
                                                                                    {
                                                                                      id: 2,
                                                                                      lat: 37.9755,
                                                                                      lng: 23.7361789
                                                                                    },
                                                                                    {
                                                                                      id: 3,
                                                                                      lat: 37.976,
                                                                                      lng: 23.7361789
                                                                                    }
                                                                                  ];
                                                                                  
                                                                                  class Map extends React.Component {
                                                                                    state = {
                                                                                      isInfoOpen: false,
                                                                                      selectedMarkerId: null,
                                                                                      noOfClusters: null,
                                                                                      markers: markers
                                                                                    };
                                                                                  
                                                                                    onClick = (isInfoOpen, selectedMarkerId) => {
                                                                                      this.setState({
                                                                                        isInfoOpen,
                                                                                        selectedMarkerId
                                                                                      });
                                                                                    };
                                                                                  
                                                                                    render() {
                                                                                      const { isInfoOpen, selectedMarkerId } = this.state;
                                                                                  
                                                                                      return (
                                                                                        
                                                                                          
                                                                                            
                                                                                              
                                                                                                
                                                                                                  {clusterer =>
                                                                                                    this.state.markers.map(markerData => (
                                                                                                       this.onClick()}
                                                                                                      />
                                                                                                    ))
                                                                                                  }
                                                                                                
                                                                                                
                                                                                            
                                                                                          
                                                                                        
                                                                                      );
                                                                                    }
                                                                                  }
                                                                                  
                                                                                  const rootElement = document.getElementById("root");
                                                                                  ReactDOM.render(, rootElement);
                                                                                  
                                                                                  
                                                                                  MapMarker.js
                                                                                  
                                                                                  import React from "react";
                                                                                  
                                                                                  import { InfoWindow, Marker} from "@react-google-maps/api";
                                                                                  
                                                                                  export default class MapMarker extends React.Component {
                                                                                    state = {
                                                                                      mapMarker: null,
                                                                                      activeMarker: {},
                                                                                      selectedPlace: {},
                                                                                      showingInfoWindow: false
                                                                                  };
                                                                                  
                                                                                  onMarkerClick = (props, marker) =>
                                                                                      this.setState({
                                                                                          activeMarker: marker,
                                                                                          selectedPlace: props,
                                                                                          showingInfoWindow: true
                                                                                      });
                                                                                  
                                                                                  onInfoWindowClose = () =>
                                                                                      this.setState({
                                                                                          activeMarker: null,
                                                                                          showingInfoWindow: false
                                                                                      });
                                                                                  
                                                                                    onLoad = mapMarker => {
                                                                                      this.setState({
                                                                                        mapMarker
                                                                                      });
                                                                                    };
                                                                                  
                                                                                    render() {
                                                                                      const { clusterer, markerData } = this.props;
                                                                                      const { mapMarker } = this.state;
                                                                                  
                                                                                      return (
                                                                                         this.onMarkerClick()}
                                                                                  
                                                                                        >
                                                                                          {mapMarker && (
                                                                                          
                                                                                              
                                                                                                {"custom Infobox: " + markerData.id}
                                                                                              
                                                                                            
                                                                                          )}
                                                                                        
                                                                                      );
                                                                                    }
                                                                                  }
                                                                                  
                                                                                  

                                                                                  ANSWER

                                                                                  Answered 2020-Nov-24 at 06:17

                                                                                  I made a couple of changes in your MapMaker.js from the codesandbox link you provided.

                                                                                  First, I added a state named showingInfoWindow and assign a value of false. This will be the state that will indicate if the infowindow will be shown or not.

                                                                                  Then, I added a function named onMarkerClick which is called everytime the Marker is clicked. This will set the state of showingInfoWindow to true.

                                                                                  Next, I put a condition in the return of MapMaker class, which will only show the infowindow when the showingInfoWindow is set to true.

                                                                                  Then, I add the onInfoWindowClose function that sets the state of showingInfoWindow back to false.

                                                                                  Lastly, I added the onCloseClick parameter in the and call the onInfoWindowClose function.

                                                                                  You can follow the code snippet below for the changes in MapMaker.js

                                                                                  import React from "react";
                                                                                  
                                                                                  import { Marker, InfoWindow } from "@react-google-maps/api";
                                                                                  
                                                                                  
                                                                                  export default class MapMarker extends React.Component {
                                                                                    state = {
                                                                                      mapMarker: null,
                                                                                      showingInfoWindow: false
                                                                                    };
                                                                                  
                                                                                    onMarkerClick = (props) => {
                                                                                      this.setState({
                                                                                        showingInfoWindow: true
                                                                                      });
                                                                                    };
                                                                                  
                                                                                    onInfoWindowClose = () =>
                                                                                      this.setState({
                                                                                        showingInfoWindow: false
                                                                                      });
                                                                                  
                                                                                    onLoad = (mapMarker) => {
                                                                                      this.setState({
                                                                                        mapMarker
                                                                                      });
                                                                                    };
                                                                                  
                                                                                    render() {
                                                                                      const { clusterer, markerData } = this.props;
                                                                                  
                                                                                      return (
                                                                                        
                                                                                          {this.state.showingInfoWindow === true && (
                                                                                            
                                                                                              
                                                                                                

                                                                                  hello

                                                                                  )} ); } }

                                                                                  Source https://stackoverflow.com/questions/62369859

                                                                                  QUESTION

                                                                                  google maps react front end API key storage
                                                                                  Asked 2020-Oct-16 at 12:34

                                                                                  I am building a full stack MERN (MongoDB Express React Nodejs) application. I am using the NPM package Google Maps React to display google maps on my website. I am having difficulty coming up with a strategy to secure my front end google maps API key.

                                                                                  In order to fully understand my problem it may be helpful to review the Google Maps React component code below

                                                                                  import {Map, GoogleApiWrapper} from 'google-maps-react';
                                                                                   
                                                                                  export class MapContainer extends Component {
                                                                                    render() {
                                                                                      return (
                                                                                        
                                                                                   
                                                                                        
                                                                                      );
                                                                                    }
                                                                                  }
                                                                                   
                                                                                  export default GoogleApiWrapper({
                                                                                    apiKey: (YOUR_GOOGLE_API_KEY_GOES_HERE)
                                                                                  })(MapContainer)
                                                                                  

                                                                                  Possible Solutions

                                                                                  Solution A

                                                                                  1. Store key in my Mongo database
                                                                                  2. make GET request to database to obtain the google Maps API key
                                                                                  3. put API key data string in google maps component

                                                                                  Solution B

                                                                                  • note: I did some deep digging to the the Google Maps React Node module files. I found .env and .env.example files with in the google maps react node module files. The .env.example file says GAPI_KEY=FILL_IN_YOUR_KEY_HERE
                                                                                  1. store api key in google maps react node module files

                                                                                  Concerns with solution A

                                                                                  • Possible solution is not secure
                                                                                  • API key data can be accessed by user

                                                                                  Concerns with solution B

                                                                                  • the node modules are part of my .gitignore file and therefore the google maps API key will not be available when the app is deployed

                                                                                  Thank you for your thoughts and time.

                                                                                  PS I used create-react-app

                                                                                  ANSWER

                                                                                  Answered 2020-Oct-16 at 00:53

                                                                                  You have various options to securely store an api key. If you are using CircleCi for continuous builds, you can create an environment key. Check your build solution for something similar.

                                                                                  There are also alternatives for encrypting files such as git-secret. That way you could use an environment config file.

                                                                                  Bottom line do not store keys in code or in config files unless you have it encrypted.

                                                                                  Source https://stackoverflow.com/questions/64380799

                                                                                  QUESTION

                                                                                  How to update google-maps-react direction route?
                                                                                  Asked 2020-Sep-25 at 07:46

                                                                                  I have array of coordinates, if i add another coordinate in array the route direction of the map should be updated.

                                                                                  this is my code in googlemap.js

                                                                                  /* global google */
                                                                                  import React, { Component } from "react";
                                                                                  import { Map, GoogleApiWrapper } from "google-maps-react";
                                                                                  import "./config";
                                                                                  import Router from 'next/router';
                                                                                  
                                                                                  
                                                                                  class MapContainer extends React.Component {
                                                                                  
                                                                                  
                                                                                    constructor(props) {
                                                                                      super(props);
                                                                                      this.handleMapReady = this.handleMapReady.bind(this);
                                                                                    }
                                                                                  
                                                                                    handleMapReady(mapProps, map) {
                                                                                      this.calculateAndDisplayRoute(map);
                                                                                    }
                                                                                    
                                                                                  
                                                                                  calculateAndDisplayRoute(map) {
                                                                                    const directionsService = new google.maps.DirectionsService();
                                                                                    const directionsDisplay = new google.maps.DirectionsRenderer();
                                                                                    directionsDisplay.setMap(map);
                                                                                  
                                                                                    const waypoints = this.props.data.map((item) => {
                                                                                      return {
                                                                                        location: { lat: item.lat, lng: item.lng },
                                                                                        stopover: true,
                                                                                      };
                                                                                    });
                                                                                    const origin = waypoints.shift().location;
                                                                                    const destination = waypoints.pop().location;
                                                                                  
                                                                                    directionsService.route(
                                                                                      {
                                                                                        origin: origin,
                                                                                        destination: destination,
                                                                                        waypoints: waypoints,
                                                                                        travelMode: "DRIVING",
                                                                                      },
                                                                                      (response, status) => {
                                                                                        if (status === "OK") {
                                                                                          directionsDisplay.setDirections(response);
                                                                                        } else {
                                                                                          window.alert("Directions request failed due to " + status);
                                                                                        }
                                                                                      }
                                                                                    );
                                                                                  }
                                                                                    render() {
                                                                                     
                                                                                      return (
                                                                                        
                                                                                          
                                                                                        
                                                                                      );
                                                                                    }
                                                                                  }
                                                                                  
                                                                                  export default GoogleApiWrapper({
                                                                                    apiKey: "",
                                                                                    libraries: [],
                                                                                  })(MapContainer);
                                                                                  

                                                                                  Im kinda new in this plugin, because im using react-google-maps in the past few days but its not being maintained anymore thats why im using this plugin for now.

                                                                                  ANSWER

                                                                                  Answered 2020-Sep-25 at 07:46

                                                                                  If you have an array of coordinates and would like to show the directions in the map that shows these coordinates, you need to set the first coordinate as your start , the last coordinate as the destination and the coordinates in between to be your waypoints.

                                                                                  Then once you will add a new coordinate in the array, you need to include the previous last coordinate in your waypoint and make the newly added coordinate as the destination.

                                                                                  Here is a sample code that shows this where I use Google Place Autocomplete where you can input a place and it will provide suggestion then once you choose a place from the suggestion it will get it's coordinate andpush the coordinate in the array.

                                                                                  Please see the code snippet below:

                                                                                  import React, { Component } from "react";
                                                                                  import { Map, InfoWindow, Marker, GoogleApiWrapper } from "google-maps-react";
                                                                                  import "./style.css";
                                                                                  import "./config";
                                                                                  export class MapContainer extends Component {
                                                                                  
                                                                                    onMapReady = (mapProps, map) => {
                                                                                      let coords = [];
                                                                                      let waypoints = [];
                                                                                      //put data from config file in an array
                                                                                      {
                                                                                        places.map((place) => coords.push({ lat: place.lat, lng: place.lng }));
                                                                                      }
                                                                                  
                                                                                      //instantiate directions service and directions renderer
                                                                                      const directionsService = new google.maps.DirectionsService();
                                                                                      const directionsDisplay = new google.maps.DirectionsRenderer();
                                                                                      //put directions renderer to render in the map
                                                                                      directionsDisplay.setMap(map);
                                                                                      //Getting the first coordinate in the array as the start/origin
                                                                                      let start = { lat: coords[0].lat, lng: coords[0].lng };
                                                                                      //Getting the last coordinate in the array as the end/destination
                                                                                      let end = {
                                                                                        lat: coords[coords.length - 1].lat,
                                                                                        lng: coords[coords.length - 1].lng,
                                                                                      };
                                                                                      
                                                                                      //putting all the coordinates between the first and last coordinate from the array as the waypoints
                                                                                      for (let i = 1; i < coords.length - 1; i++) {
                                                                                        waypoints.push({
                                                                                          location: { lat: coords[i].lat, lng: coords[i].lng },
                                                                                          stopover: true,
                                                                                        });
                                                                                      }
                                                                                  
                                                                                      // directions requests
                                                                                  
                                                                                      let request = {
                                                                                        origin: start,
                                                                                        waypoints: waypoints,
                                                                                        destination: end,
                                                                                        travelMode: "DRIVING",
                                                                                      };
                                                                                      //show results in the directionsrenderer
                                                                                      directionsService.route(request, function (result, status) {
                                                                                        if (status == "OK") {
                                                                                          directionsDisplay.setDirections(result);
                                                                                        }
                                                                                      });
                                                                                  
                                                                                      //setting the autocomplete input
                                                                                      let card = document.getElementById("pac-card");
                                                                                      let input = document.getElementById("pac-input");
                                                                                      map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
                                                                                      let autocomplete = new google.maps.places.Autocomplete(input);
                                                                                  
                                                                                      // Bind the map's bounds (viewport) property to the autocomplete object,
                                                                                      // so that the autocomplete requests use the current map bounds for the
                                                                                      // bounds option in the request.
                                                                                      autocomplete.bindTo("bounds", map);
                                                                                  
                                                                                      // Set the data fields to return when the user selects a place.
                                                                                      autocomplete.setFields(["address_components", "geometry", "icon", "name"]);
                                                                                  
                                                                                      //listener for the places input
                                                                                      autocomplete.addListener("place_changed", function () {
                                                                                        console.log(waypoints);
                                                                                        let place = autocomplete.getPlace();
                                                                                        if (!place.geometry) {
                                                                                          // User entered the name of a Place that was not suggested and
                                                                                          // pressed the Enter key, or the Place Details request failed.
                                                                                          window.alert("No details available for input: '" + place.name + "'");
                                                                                          return;
                                                                                        }
                                                                                        
                                                                                        //Putting the previous last coordinate in the array to be part of the waypoint
                                                                                        waypoints.push({
                                                                                          location: {
                                                                                            lat: coords[coords.length - 1].lat,
                                                                                            lng: coords[coords.length - 1].lng,
                                                                                          },
                                                                                          stopover: true,
                                                                                        });
                                                                                  
                                                                                        //putting the Place Autocomplete coordinate result in the coords array
                                                                                        coords.push({
                                                                                          lat: place.geometry.location.lat(),
                                                                                          lng: place.geometry.location.lng(),
                                                                                        });
                                                                                        //putting the Place Autocomplete coordinate result the value of the end/destination
                                                                                        end = place.geometry.location;
                                                                                        
                                                                                        //changing  request
                                                                                        request = {
                                                                                          origin: start,
                                                                                          waypoints: waypoints,
                                                                                          destination: end,
                                                                                          travelMode: "DRIVING",
                                                                                        };
                                                                                        //creating new directions request
                                                                                        directionsService.route(request, function (result, status) {
                                                                                          if (status == "OK") {
                                                                                            directionsDisplay.setDirections(result);
                                                                                          }
                                                                                        });
                                                                                      });
                                                                                    };
                                                                                  
                                                                                  
                                                                                    render() {
                                                                                      //if (!this.props.loaded) return Loading...;
                                                                                  
                                                                                      return (
                                                                                        
                                                                                          
                                                                                          
                                                                                            
                                                                                              Add new point
                                                                                  
                                                                                              
                                                                                                
                                                                                              
                                                                                            
                                                                                          
                                                                                          
                                                                                          
                                                                                            
                                                                                            
                                                                                            

                                                                                  ); } } export default GoogleApiWrapper({ apiKey: "YOUR_API_KEY", version: "3.40", })(MapContainer);

                                                                                  Source https://stackoverflow.com/questions/64002670

                                                                                  QUESTION

                                                                                  How to run my react app in Docker container
                                                                                  Asked 2020-Sep-18 at 09:26

                                                                                  I have this react app I want to dockerize. But the problem is, even though I tried, it doesn't work. But it works pretty well locally

                                                                                  This is how the current directories look like:

                                                                                  docker-compose.yaml
                                                                                  frontend_v2
                                                                                     - node_modules
                                                                                     - public
                                                                                     - src
                                                                                         - 
                                                                                     - Dockerfile
                                                                                     - package.json
                                                                                     - package-lock.json
                                                                                  

                                                                                  So this is the content of the above Dockerfile:

                                                                                  # Use an official node runtime as a parent image
                                                                                  FROM node:latest
                                                                                  
                                                                                  WORKDIR /app
                                                                                  
                                                                                  # Install dependencies
                                                                                  COPY package.json /app
                                                                                  
                                                                                  RUN npm install
                                                                                  
                                                                                  # Add rest of the client code
                                                                                  COPY . /app
                                                                                  
                                                                                  EXPOSE 3000
                                                                                  
                                                                                  CMD ["npm", "start"]
                                                                                  

                                                                                  And I am using a docker-compose.yml to spin up the container, and this is how it looks like: This is in the root directory.

                                                                                  version: "3.2"
                                                                                  
                                                                                  services:
                                                                                  
                                                                                    frontend:
                                                                                      build: ./frontend_v2
                                                                                      environment:
                                                                                        CHOKIDAR_USEPOLLING: "true"
                                                                                      volumes:
                                                                                        # - /app/node_modules
                                                                                        - ./frontend_v2/src:/app/src
                                                                                      ports:
                                                                                        - 80:3000
                                                                                  

                                                                                  Problem I am facing is, even though the container is running I get the below error (which I don't get I run locally)

                                                                                  When i try

                                                                                  docker logs i get this below output

                                                                                  > cyberhr-rv18.0.4@0.1.0 start /app
                                                                                  > react-scripts start
                                                                                  
                                                                                  
                                                                                  There might be a problem with the project dependency tree.
                                                                                  It is likely not a bug in Create React App, but something you need to fix locally.
                                                                                  
                                                                                  The react-scripts package provided by Create React App requires a dependency:
                                                                                  
                                                                                    "webpack-dev-server": "3.11.0"
                                                                                  
                                                                                  Don't try to install it manually: your package manager does it automatically.
                                                                                  However, a different version of webpack-dev-server was detected higher up in the tree:
                                                                                  
                                                                                    /app/node_modules/webpack-dev-server (version: 3.10.3) 
                                                                                  
                                                                                  Manually installing incompatible versions is known to cause hard-to-debug issues.
                                                                                  
                                                                                  If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
                                                                                  That will permanently disable this message but you might encounter other issues.
                                                                                  
                                                                                  To fix the dependency tree, try following the steps below in the exact order:
                                                                                  
                                                                                    1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
                                                                                    2. Delete node_modules in your project folder.
                                                                                    3. Remove "webpack-dev-server" from dependencies and/or devDependencies in the package.json file in your project folder.
                                                                                    4. Run npm install or yarn, depending on the package manager you use.
                                                                                  
                                                                                  In most cases, this should be enough to fix the problem.
                                                                                  If this has not helped, there are a few other things you can try:
                                                                                  
                                                                                    5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
                                                                                       This may help because npm has known issues with package hoisting which may get resolved in future versions.
                                                                                  
                                                                                    6. Check if /app/node_modules/webpack-dev-server is outside your project directory.
                                                                                       For example, you might have accidentally installed something in your home folder.
                                                                                  
                                                                                    7. Try running npm ls webpack-dev-server in your project folder.
                                                                                       This will tell you which other package (apart from the expected react-scripts) installed webpack-dev-server.
                                                                                  
                                                                                  If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
                                                                                  That would permanently disable this preflight check in case you want to proceed anyway.
                                                                                  
                                                                                  P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
                                                                                  
                                                                                  npm ERR! code ELIFECYCLE
                                                                                  npm ERR! errno 1
                                                                                  npm ERR! cyberhr-rv18.0.4@0.1.0 start: `react-scripts start`
                                                                                  npm ERR! Exit status 1
                                                                                  npm ERR! 
                                                                                  npm ERR! Failed at the cyberhr-rv18.0.4@0.1.0 start script.
                                                                                  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
                                                                                  
                                                                                  npm ERR! A complete log of this run can be found in:
                                                                                  npm ERR!     /root/.npm/_logs/2020-09-18T08_32_25_268Z-debug.log
                                                                                  

                                                                                  [Update]

                                                                                  Here's my package.json file:

                                                                                  {
                                                                                    "name": "cyberhr-rv18.0.4",
                                                                                    "version": "0.1.0",
                                                                                    "private": true,
                                                                                    "homepage": "",
                                                                                    "dependencies": {
                                                                                      "3d-force-graph": "^1.60.11",
                                                                                      "@blueprintjs/core": "^3.26.1",
                                                                                      "@coreui/coreui": "^2.1.12",
                                                                                      "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
                                                                                      "@coreui/icons": "0.3.0",
                                                                                      "@coreui/react": "^2.5.1",
                                                                                      "@emotion/core": "^10.0.35",
                                                                                      "@material-ui/core": "^4.11.0",
                                                                                      "@tensorflow/tfjs": "^1.7.2",
                                                                                      "@tensorflow/tfjs-tsne": "^0.2.0",
                                                                                      "axios": "^0.19.2",
                                                                                      "bootstrap": "^4.3.1",
                                                                                      "chart.js": "^2.8.0",
                                                                                      "classnames": "^2.2.6",
                                                                                      "core-js": "^3.1.4",
                                                                                      "d3-dsv": "^1.2.0",
                                                                                      "enzyme": "^3.10.0",
                                                                                      "enzyme-adapter-react-16": "^1.14.0",
                                                                                      "evergreen-ui": "^4.27.4",
                                                                                      "flag-icon-css": "^3.3.0",
                                                                                      "font-awesome": "^4.7.0",
                                                                                      "google-maps-react": "^2.0.2",
                                                                                      "jquery": "^3.4.0",
                                                                                      "material-dashboard-react": "^1.8.0",
                                                                                      "mdbreact": "4.25.3",
                                                                                      "node-sass": "^4.12.0",
                                                                                      "prop-types": "^15.7.2",
                                                                                      "react": "^16.8.4",
                                                                                      "react-animations": "^1.0.0",
                                                                                      "react-app-polyfill": "^1.0.1",
                                                                                      "react-bootstrap": "^1.0.0-beta.5",
                                                                                      "react-chartjs-2": "^2.7.6",
                                                                                      "react-chat-popup": "^1.1.2",
                                                                                      "react-dom": "^16.8.4",
                                                                                      "react-dropzone": "^11.0.1",
                                                                                      "react-force-graph": "^1.32.1",
                                                                                      "react-full-screen": "^0.2.4",
                                                                                      "react-loadable": "^5.5.0",
                                                                                      "react-nvd3": "^0.5.7",
                                                                                      "react-perfect-scrollbar": "^1.4.4",
                                                                                      "react-pure-grid": "^2.1.1",
                                                                                      "react-redux": "^6.0.1",
                                                                                      "react-reveal": "^1.2.2",
                                                                                      "react-router-config": "^5.0.1",
                                                                                      "react-router-dom": "^4.3.1",
                                                                                      "react-scripts": "^3.4.3",
                                                                                      "react-spinners": "^0.9.0",
                                                                                      "react-step-wizard": "^5.3.2",
                                                                                      "react-table": "^7.2.1",
                                                                                      "react-test-renderer": "^16.8.6",
                                                                                      "react-toastify": "^6.0.8",
                                                                                      "react-window-size": "^1.2.2",
                                                                                      "reactstrap": "^8.0.0",
                                                                                      "redux": "^4.0.1",
                                                                                      "simple-line-icons": "^2.4.1",
                                                                                      "tabler-react": "^2.0.0-alpha.1",
                                                                                      "three": "latest",
                                                                                      "tsne-js": "^1.0.3"
                                                                                    },
                                                                                    "scripts": {
                                                                                      "start": "react-scripts start",
                                                                                      "build": "react-scripts build",
                                                                                      "test": "react-scripts test",
                                                                                      "eject": "react-scripts eject"
                                                                                    },
                                                                                    "eslintConfig": {
                                                                                      "extends": "react-app"
                                                                                    },
                                                                                    "browserslist": [
                                                                                      ">0.2%",
                                                                                      "not dead",
                                                                                      "not ie <= 11",
                                                                                      "not op_mini all"
                                                                                    ],
                                                                                    "devDependencies": {
                                                                                      "react-to-print": "^2.1.1"
                                                                                    }
                                                                                  }
                                                                                  

                                                                                  Can someone please help me?

                                                                                  ANSWER

                                                                                  Answered 2020-Sep-18 at 09:09

                                                                                  Firstly, make sure you are copying the same package-lock.json file that you use to install deps locally, to make sure you have the same dependency tree in your container as you do locally.

                                                                                  COPY package.json package-lock.json /app/

                                                                                  Then, make sure that you are matching the same node/npm version as you run locally (replace 12 with the major version you are running, be it 10, 12, 14 or whatever):

                                                                                  FROM node:12

                                                                                  Each node version is bundled with a specific npm version (latest 12 version comes with npm 6.14.6), you can find the bundled NPM version int he changelogs, https://github.com/nodejs/node/tree/master/doc/changelogs

                                                                                  Additionally, instead of running npm install, you might wanna run npm ci in the container. The latter skips any checks for discrepancy between the lock file and your package.json file and just installs the locked dependency tree, which is not only faster, but will also match your local dep tree exactly.

                                                                                  EDIT:

                                                                                  In addition, this line:

                                                                                  COPY . /app

                                                                                  Would also overwrite node_modules unless you have ignored it via .dockerignore or similar.

                                                                                  Easiest would probably be to add a .dockerignore file to the same folder as your Dockerfile and add lines stating:

                                                                                  .git
                                                                                  node_modules
                                                                                  

                                                                                  The complete Dockerfile would look like this:

                                                                                  # Use whatever version you are running locally (see node -v)
                                                                                  FROM node:12
                                                                                  
                                                                                  WORKDIR /app
                                                                                  
                                                                                  # Install dependencies (you are already in /app)
                                                                                  COPY package.json package-lock.json ./
                                                                                  RUN npm ci
                                                                                  
                                                                                  # Add rest of the client code
                                                                                  # .dockerignore needs to skip node_modules
                                                                                  COPY . /app
                                                                                  
                                                                                  EXPOSE 3000
                                                                                  
                                                                                  CMD ["npm", "start"]
                                                                                  

                                                                                  Source https://stackoverflow.com/questions/63951764

                                                                                  QUESTION

                                                                                  Google Maps React Polygon Issues
                                                                                  Asked 2020-Sep-09 at 18:24

                                                                                  I am creating an app that uses wildfire data from APIs and flips it in order to display polygons on a Google Map using the google-maps-react package. I have figured everything out up until returning and displaying the polygon using a function built into the map component. Does anyone want to chime in on what the issue might be? I'd really appreciate some help. Thanks.

                                                                                  import React, { Component } from 'react';
                                                                                  import { Map, GoogleApiWrapper, Polygon } from 'google-maps-react';
                                                                                  
                                                                                  
                                                                                  
                                                                                  const mapStyles = {
                                                                                      margin: 30,
                                                                                      width: '93.75%',
                                                                                      height: '90%',
                                                                                      border: '1px solid #3E1C18',
                                                                                      display: 'inline-block'
                                                                                  };
                                                                                  
                                                                                  
                                                                                  class FireMap extends Component {
                                                                                  
                                                                                      constructor(props) {
                                                                                          super(props)
                                                                                  
                                                                                          this.state = {
                                                                                              fires: [],
                                                                                              polygons: []
                                                                                          }
                                                                                      }
                                                                                      
                                                                                  
                                                                                      componentDidMount() {
                                                                                          fetch('https://services3.arcgis.com/T4QMspbfLg3qTGWY/arcgis/rest/services/Public_Wildfire_Perimeters_View/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json')
                                                                                              .then(res => res.json())
                                                                                              .then(data => {
                                                                                                  this.setState({ fires: data.features })
                                                                                                  this.state.fires.map((fire) =>{
                                                                                                      if (fire.geometry !== null){
                                                                                                          let fireCoords = fire.geometry.rings
                                                                                                          let trueCoords = []
                                                                                                          fireCoords.map((coords) => {
                                                                                                              coords.map((pair) => {
                                                                                                                  let newPair = {lat: pair[1], lng: pair[0]}
                                                                                                                  return trueCoords.push(newPair)
                                                                                                              })
                                                                                                          })
                                                                                                          this.state.polygons.push(trueCoords);
                                                                                                          console.log(this.state.polygons)
                                                                                                       }
                                                                                                   })
                                                                                              })
                                                                                      }
                                                                                  
                                                                                      showPolygons = () => {
                                                                                          this.state.polygons.map((polygon) => {
                                                                                              let firePoly=  
                                                                                              return firePoly
                                                                                          })
                                                                                      }
                                                                                      
                                                                                      render(){
                                                                                          return(
                                                                                              
                                                                                                  
                                                                                                      {this.showPolygons()}
                                                                                                  
                                                                                              
                                                                                          );
                                                                                      }
                                                                                  }
                                                                                  

                                                                                  ANSWER

                                                                                  Answered 2020-Sep-09 at 18:24

                                                                                  I haven't caught from your comment if you've tried things I've suggested... But you've edited your post with some random (and incorrect) changes. OK, I'll try to post an answer. It's an answer related to the original code because it looks simpler and contains less errors.

                                                                                  This is how I think it should look like:

                                                                                  const coord_pair_to_latlng =  ([lat,lng]) => ({ lat, lng })
                                                                                  const convert_ring_coords = ring => ring.map(coord_pair_to_latlng)
                                                                                  
                                                                                  class FireMap extends Component {
                                                                                    constructor(props) {
                                                                                      super(props)
                                                                                      this.state = { fires: [] }
                                                                                    }
                                                                                    componentDidMount() {
                                                                                      fetch('https://services3.arcgis.com/T4QMspbfLg3qTGWY/arcgis/rest/services/Public_Wildfire_Perimeters_View/FeatureServer/0/query?where=1%3D1&outFields=*&outSR=4326&f=json')
                                                                                        .then(res => res.json())
                                                                                        .then(data => this.setState({ fires: data.features }))
                                                                                    }
                                                                                    displayFires = () => this.state.fires
                                                                                      .filter(fire => fire.geometry !== null)
                                                                                      .map(fire => fire.geometry.rings)
                                                                                      .map(rings =>  acc.concat(convert_ring_coords(ring)), []) }
                                                                                        fillColor     = "#BF5E4B"
                                                                                        fillOpacity   = {0.45}
                                                                                        strokeColor   = "#6B352A"
                                                                                        strokeOpacity = {0.9}
                                                                                        strokeWeight  = {1}
                                                                                      />)
                                                                                    render() {
                                                                                      return (
                                                                                        
                                                                                          
                                                                                            {this.displayFires()}
                                                                                          
                                                                                        
                                                                                      )
                                                                                    }
                                                                                  }
                                                                                  

                                                                                  Except for a more functional code style (which you can ignore), basically all I've changed was:

                                                                                  1. new Polygon() and is not the same thing. You should return the latter. JSX translates to something like React.createElement(Polygon,...) not to new Polygon(...). OK, you've fixed that.

                                                                                  2. As per docs and per source code, Polygon should be created as

                                                                                  
                                                                                  

                                                                                  and not as

                                                                                  
                                                                                  

                                                                                  your options are ignored

                                                                                • this.displayFires() in componentDidMount does nothing, so it should be removed.

                                                                                  As a side note: also at the time of this.displayFires() call this.state is not changed yet. But it shouldn't change the outcome because, as I said, this.displayFires() have no effect in componentDidMount... but this.state.polygons.push in your new version of code can have an effect... or I'd better say will introduce bugs. You should never do that.

                                                                                • Source https://stackoverflow.com/questions/63789482

                                                                                  QUESTION

                                                                                  Problem hosting React + Node.js app on heroku
                                                                                  Asked 2020-Aug-29 at 20:36

                                                                                  When I work on my project locally (without problem), I do npm start which works on port 3000, also i have to open another terminal and do node server/server.js which works on port 4000. Then I will be able to work with my browser to connect my both frontend and backend. Now I am trying to host this project on heroku but no luck. here are my error:

                                                                                  2020-08-26T11:54:23.905587+00:00 heroku[router]: at=error code=H13 desc="Connection closed without response" method=GET path="/" host=whatever.herokuapp.com request_id="whatever" fwd="96.20.56.73" dyno=web.1 connect=1ms service=159ms status=503 bytes=0 protocol=https
                                                                                  

                                                                                  and package.json:

                                                                                      {
                                                                                    "name": "library",
                                                                                    "version": "0.1.0",
                                                                                    "private": true,
                                                                                    "proxy": "http://localhost:4000",
                                                                                    "dependencies": {
                                                                                      "@material-ui/core": "^4.9.9",
                                                                                      "@material-ui/icons": "^4.9.1",
                                                                                      "@material-ui/lab": "^4.0.0-alpha.48",
                                                                                      "@material/react-snackbar": "^0.15.0",
                                                                                      "@testing-library/jest-dom": "^4.2.4",
                                                                                      "@testing-library/react": "^9.4.0",
                                                                                      "@testing-library/user-event": "^7.2.1",
                                                                                      "chai": "^4.2.0",
                                                                                      "clsx": "^1.1.0",
                                                                                      "cookie-parser": "^1.4.4",
                                                                                      "dotenv": "^8.2.0",
                                                                                      "google-maps-react": "^2.0.2",
                                                                                      "hookrouter": "^1.2.3",
                                                                                      "i18next": "^19.4.1",
                                                                                      "i18next-browser-languagedetector": "^4.0.2",
                                                                                      "i18next-xhr-backend": "^3.2.2",
                                                                                      "immer": "^5.3.6",
                                                                                      "mongo-seeding": "^3.4.1",
                                                                                      "mongodb": "^3.5.3",
                                                                                      "multer": "^1.4.2",
                                                                                      "react": "^16.12.0",
                                                                                      "react-dom": "^16.12.0",
                                                                                      "react-facebook-login": "^4.1.1",
                                                                                      "react-google-login": "^5.1.1",
                                                                                      "react-hook-google-maps": "0.0.3",
                                                                                      "react-i18next": "^11.3.4",
                                                                                      "react-redux": "^7.1.3",
                                                                                      "react-router-dom": "^5.1.2",
                                                                                      "react-scripts": "3.4.0",
                                                                                      "redux": "^4.0.5",
                                                                                      "redux-immer": "^1.0.4",
                                                                                      "sha1": "^1.1.1"
                                                                                    },
                                                                                    "scripts": {
                                                                                      "start": "react-scripts start",
                                                                                      "build": "react-scripts build",
                                                                                      "test": "mocha --exit",
                                                                                      "eject": "react-scripts eject"
                                                                                    },
                                                                                    "eslintConfig": {
                                                                                      "extends": "react-app"
                                                                                    },
                                                                                    "browserslist": {
                                                                                      "production": [
                                                                                        ">0.2%",
                                                                                        "not dead",
                                                                                        "not op_mini all"
                                                                                      ],
                                                                                      "development": [
                                                                                        "last 1 chrome version",
                                                                                        "last 1 firefox version",
                                                                                        "last 1 safari version"
                                                                                      ]
                                                                                    },
                                                                                    "devDependencies": {
                                                                                      "eslint": "^6.8.0",
                                                                                      "eslint-plugin-node": "^11.1.0",
                                                                                      "eslint-plugin-react": "^7.19.0",
                                                                                      "eslint-plugin-react-hooks": "^3.0.0",
                                                                                      "eslint-plugin-react-redux": "^3.0.3",
                                                                                      "mocha": "^7.2.0",
                                                                                      "supertest": "^4.0.2"
                                                                                    }
                                                                                  }```
                                                                                  

                                                                                  is it cause of the proxy? or i have a wrong start script? or something else?

                                                                                  ANSWER

                                                                                  Answered 2020-Aug-29 at 13:54

                                                                                  I was using create-react-app + JSX, so i had to open two terminals one for npm start (on port 3000 for react server) and one for node server.js (for backend on port 4000) and these two are connect through the proxy that i had on my package.json. when i have finished with development, all i had to do was:

                                                                                  1. remove the proxy from package.json.

                                                                                  2. npm run build, which makes a copy of all my code into the build folder.

                                                                                  3. app.use("/", express.static("build")); in my server.js file to make the build folder accessible to app.

                                                                                  4. app.all("/*", (req, res) => { res.sendFile(__dirname + "/build/index.html"); }); at the end of the server.js to catch all.

                                                                                  hope this saves some of your time.

                                                                                  Source https://stackoverflow.com/questions/63597331

                                                                                  Community Discussions, Code Snippets contain sources that include Stack Exchange Network

                                                                                  Vulnerabilities

                                                                                  No vulnerabilities reported

                                                                                  Install google-maps-react

                                                                                  First, install the library:.

                                                                                  Support

                                                                                  The Google Map React component library uses React and the Google API to give easy access to the Google Maps library.
                                                                                  Find more information at:
                                                                                  Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
                                                                                  Find more libraries
                                                                                  Explore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits​
                                                                                  Save this library and start creating your kit
                                                                                  CLONE
                                                                                • HTTPS

                                                                                  https://github.com/fullstackreact/google-maps-react.git

                                                                                • CLI

                                                                                  gh repo clone fullstackreact/google-maps-react

                                                                                • sshUrl

                                                                                  git@github.com:fullstackreact/google-maps-react.git

                                                                                • Share this Page

                                                                                  share link

                                                                                  Consider Popular REST Libraries

                                                                                  public-apis

                                                                                  by public-apis

                                                                                  json-server

                                                                                  by typicode

                                                                                  iptv

                                                                                  by iptv-org

                                                                                  fastapi

                                                                                  by tiangolo

                                                                                  beego

                                                                                  by beego

                                                                                  Try Top Libraries by fullstackreact

                                                                                  30-days-of-react

                                                                                  by fullstackreactJavaScript

                                                                                  food-lookup-demo

                                                                                  by fullstackreactJavaScript

                                                                                  react-daily-ui

                                                                                  by fullstackreactCSS

                                                                                  react-yelp-clone

                                                                                  by fullstackreactJavaScript

                                                                                  react-native-oauth

                                                                                  by fullstackreactJava

                                                                                  Compare REST Libraries with Highest Support

                                                                                  fastapi

                                                                                  by tiangolo

                                                                                  dropwizard

                                                                                  by dropwizard

                                                                                  python

                                                                                  by kubernetes-client

                                                                                  Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
                                                                                  Find more libraries
                                                                                  Explore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits​
                                                                                  Save this library and start creating your kit