Issue in integrating GoogleMaps in React App

戏子无情 提交于 2019-12-24 08:09:10

问题


I am trying to integrate googlemaps in my React App.But it returns the following error in javascript console.

The javascript console returns the following error while trying to integrate Google Maps.How can I resolve that issue?

       [Violation] Added non-passive event listener to a scroll-blocking  'wheel' event. Consider marking event handler as 'passive' to make the page  more responsive.
                  js?key=APIKEY:99
        [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive.
                      util.js:40 
        [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive.
                      util.js:40 
        [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive.

How can I display Google Maps in my browsers?


回答1:


I have a working solution with a different package.

However, there are a few issues with your code example, so please see if you can utilise these suggestions for resolving several issues with it.

1. Google maps script in head section

Unlike stylesheets and fonts, scripts should be loaded at the end of the body, for peformance reasons, as they will otherwise be loaded before the content, prolonging the page load.

Also, don't forget to include page title and other things, that usually help you with SEO, which are missing in your example.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/style/style.css">
        <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
        <title>page title</title>
    </head>
    <body>
        <div class="container"></div>
        <script src="https://maps.googleapis.com/maps/api/js?key=APIKEY" type="text/javascript"></script>
        <script src="./bundle.js"></script>
    </body>
</html>

2. Map itself & User details

I've previously successfully used another package called 'react-google-maps' that seems to be working properly at this moment, so I'll add an example with that one inside the UserDetail example

Considering that you only have a render method for UserDetails, I would suggest that you use a pure functional component here.

Also, there are a few things you can do here to help with code brevity, and a few thing you should ask yourself.

  • why userdetail is not camelCase?
  • why are you passing actions to connect method, when you aren't using it anywhere inside and when it can be used directly in the render?
  • Are you sure you really need to import everything from actions?

    import { actionName } from '../actions'

    Maybe something like this would be more beneficial if you are going to use something specific.

  • On another note, actions aren't used anywhere here, so I've removed them from my example.
  • why is google maps file named google_maps? Snake case should be only used for constants, for example in the case of google maps api key that will not change:

    const GOOGLE_MAPS_API_KEY

Example:

import React from 'react';
import { connect } from 'react-redux';
import GoogleMap from 'google-map-react'

const UserDetail = (props) => {
    const { latitude, longitude, email, address, countryCode } = props.userDetail;
    const googleMapProps = { 
      bootstrapURLKeys: { key: "yourKey" }, 
      center: [parseFloat(latitude), parseFloat(longitude)], 
      zoom: 12 
    };
    const noDetails = <div>no data</div>;
    const hasDetails = (
        <div>
            <GoogleMap {...googleMapProps}></GoogleMap>
            <p>Email: {email}</p>
            <p>Address: {address}</p>
            <p>Latitude: {latitude}</p>
            <p>Longitude: {longitude}</p>
            <p>Country Code: {countryCode}</p>
        </div>
    );

    return props.userDetail 
        ? hasDetails
        : noDetails; 
}

function mapStateToProps(state){
    const { userDetail } = state.auth;
    return { userDetail };
}

export default connect(mapStateToProps)(UserDetail);


来源:https://stackoverflow.com/questions/45917552/issue-in-integrating-googlemaps-in-react-app

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!