Tomchentw from React-google-maps Repository

MIT License

28 Sep 2022

Eskfung

started

Started On 28 Sep 2022 at 02:55:11

DavidAmyot

google is not defined?

Hey, I keep getting a reference error for google in the withGoogleMap at line 101.

Uncaught ReferenceError: google is not defined - withGoogleMap.js:101

Does anyone know how to remedy this error?

Forked On 21 Sep 2022 at 05:49:21

DavidAmyot

Our app still has classes and I found the easiest way was to create a wrapper component that uses the useJsApiLoader hook.

withGoogleMap.js

import React from "react";
import { useJsApiLoader } from "@react-google-maps/api";

export const withGoogleMap = (Component) => {
  const ComponentWithGoogleMapProp = (props) => {
    const { isLoaded, loadError } = useJsApiLoader({
      googleMapsApiKey: process.env.GOOGLE_MAPS_KEY,
    });

    return <Component {...props} googleMap={{ isLoaded, loadError }} />;
  };

  return ComponentWithGoogleMapProp;
}; 

SomeComponent.js

import { withGoogleMap } from "@utils/withGoogleMap";

class SomeComponent extends PureComponent {
  // ...

  render() {
    const { isLoaded, loadError } = this.props.googleMap;  

    return (
      {!loadError ? (
          isLoaded ? (
             <GoogleMap {...mapProps}>{this.renderMapMarkers()}</GoogleMap>
          ) : (
            <MapLoadingSpinner />
          )
        ) : (
          <MapErrorView />
        )}
      }
    )
  }


export default withGoogleMap(SomeComponent); 

Commented On 21 Sep 2022 at 05:49:21
Issue Comment

NoamsGit

Performance issue dynamically adding many markers

I have a map that loads additional markers when the user pans/zooms.

Looking for any ideas here on how I can manage the performance issues as the number of markers grows and each map move results in a re-render of every marker.

What's worse is our search method returns paginated marker results so each map move can result in 1-10 additional re-renders of all markers on the map.

Here is what it looks like....

MyGoogleMap.jsx

import React, {Component, PropTypes} from 'react';
import {withGoogleMap, GoogleMap, Marker, KmlLayer} from 'react-google-maps';
import {maps as gmaps} from 'google';
import {MARKER_CONFIG} from 'map-utils';

class MyGoogleMap extends Component {
    constructor(props) {
        super(props);

        this._markers = {};
        this._MARKER_SPRITE_PATH = '/static/main/img/sprites/sprite-markers@2x.png';
        this._HOVER_Z_INDEX = 1001;
    }

    render() {
        const {
            markers,
            zoom,
            position,
            mapOptions,
            onDragStart,
            onDragEnd,
            onIdle,
            onGoogleMapLoaded,
            getMarkerLabelText
        } = this.props;
        const renderedMarkers = (markers && markers.length > 0)
            ? markers.map(marker => {
                const {
                    spot,
                    state
                } = marker;
                const {
                    spotId,
                    latitude,
                    longitude,
                    activeMarker,
                    selectedRate,
                    facility,
                    title
                } = spot;
                const markerType = (selectedRate.unavailable)
                    ? 'disabled'
                    : (activeMarker)
                        ? 'large'
                        : 'medium';
                const icon = {
                    url: this._MARKER_SPRITE_PATH,
                    ...MARKER_CONFIG[markerType][state].icon
                };
                const zIndex = (state === 'hover')
                    ? this._HOVER_Z_INDEX
                    : (activeMarker)
                        ? this._HOVER_Z_INDEX - 1
                        : null;
                const markerText = getMarkerLabelText({selectedRate});
                const labelFontSize = (markerText.length > 5)
                    ? `${parseInt(MARKER_CONFIG[markerType][state].label.fontSize.replace('px', ''), 10) - 2}px`
                    : MARKER_CONFIG[markerType][state].label.fontSize;

                return (
                    <Marker
                        ref={node => {
                            this._markers[spotId] = {
                                node,
                                markerType
                            };
                        }}
                        key={spotId}
                        icon={icon}
                        title={title}
                        label={
                            (markerType === 'disabled' && state === 'default')
                                ? ''
                                : {
                                    text: markerText,
                                    color: MARKER_CONFIG[markerType][state].label.color,
                                    fontSize: labelFontSize,
                                    fontWeight: 'bold',
                                    fontFamily: 'Open Sans,sans-serif'
                                }
                        }
                        position={new gmaps.LatLng(latitude, longitude)}
                        zIndex={zIndex}
                    />
                );
            })
            : null;

        return (
            <GoogleMap
                ref={onGoogleMapLoaded}
                zoom={zoom}
                defaultCenter={position}
                options={mapOptions}
                onDragStart={onDragStart}
                onDragEnd={onDragEnd}
                onIdle={onIdle}
            >
                {renderedMarkers}
            </GoogleMap>
        );
    }
}

MyGoogleMap.propTypes = {
    markers: PropTypes.array.isRequired,
    zoom: PropTypes.number.isRequired,
    position: PropTypes.object.isRequired,
    mapOptions: PropTypes.object.isRequired,
    onDragStart: PropTypes.func.isRequired,
    onDragEnd: PropTypes.func.isRequired,
    onIdle: PropTypes.func.isRequired,
    onGoogleMapLoaded: PropTypes.func.isRequired,
    getMarkerLabelText: PropTypes.func.isRequired
};

export default withGoogleMap(MyGoogleMap); 

And the parent render method (the markers come from the state and are updated when the map moves causing a re-render of the MyGoogleMap.jsx)...

return (
    <MyGoogleMap
        ref={node => { this._map = node; }}
        containerElement={
            <div
                style={{
                    height: '100%'
                }}
            />
        }
        mapElement={
            <div
                style={{
                    height: '100%'
                }}
            />
        }
        markers={markers}
        zoom={zoom}
        position={position}
        mapOptions={this._mapOptions}
        onDragStart={this._onDragStart}
        onDragEnd={this._onDragEnd}
        onIdle={this._onIdle}
        onGoogleMapLoaded={this._onGoogleMapLoaded}
        getMarkerLabelText={this._getMarkerLabelText}
    />
); 

Any help would be greatly appreciated, kinda stumped here. Thanks in advance!

Forked On 18 Sep 2022 at 08:58:51

NoamsGit

Hi @bkellgren @walreyes I ran into a similar problem, can you please elaborate more on your solution? Thanks

Commented On 18 Sep 2022 at 08:58:51

Pkb94

started

Started On 14 Sep 2022 at 03:44:20

Dilshan97

started

Started On 08 Sep 2022 at 12:15:01

Nejdetkadir

started

Started On 06 Sep 2022 at 11:23:23

Ifatihyildirim

started

Started On 06 Sep 2022 at 09:39:12

Dadwic

started

Started On 04 Sep 2022 at 06:20:52

Ibsd

started

Started On 02 Sep 2022 at 12:40:05

Flosch

started

Started On 01 Sep 2022 at 03:35:04

Arga-kargo

started

Started On 31 Aug 2022 at 10:16:05

Bahyusanciko

started

Started On 29 Aug 2022 at 04:11:40

Bjvalmaseda-dev

started

Started On 26 Aug 2022 at 07:07:02

Code0017

started

Started On 25 Aug 2022 at 08:16:25
Issue Comment

Vetal7777

onClick Map to get Coordinates

I was wondering how I can retrieve the coordinates of the GoogleMap onClick event? I can only find something called "oe" and it only returns X and Y that don't equal to Lat and Long values.

What am I missing here?

Forked On 23 Aug 2022 at 10:50:08

Vetal7777

How on typescript?

Commented On 23 Aug 2022 at 10:50:08

Yuricode1014

React.js Google Maps integration component

Forked On 23 Aug 2022 at 02:04:27

MacBookProne

started

Started On 23 Aug 2022 at 01:06:54

Keyserwood

started

Started On 21 Aug 2022 at 05:23:49

Niiazemiluulu

google is not defined?

Hey, I keep getting a reference error for google in the withGoogleMap at line 101.

Uncaught ReferenceError: google is not defined - withGoogleMap.js:101

Does anyone know how to remedy this error?

Forked On 18 Aug 2022 at 08:41:22

Niiazemiluulu

LoooooooL, I was trying to solve that issue for the last hour. Just make sure to withScriptJs goes before withGoogleMaps

Commented On 18 Aug 2022 at 08:41:22

Nesarworking6

started

Started On 18 Aug 2022 at 03:30:35

Bushuai

started

Started On 18 Aug 2022 at 07:30:11

ShaunSpringer

started

Started On 18 Aug 2022 at 12:06:12

Elvinhatamov

Module not found: Can't resolve 'react-google-maps'

Hi there

I get this message and I don't know why:

Module not found: Can't resolve 'react-google-maps' in '/usr/src/app/src/components'

I tried to delete node_modules folder, tried various versions of your library but it didn't help. Curently I use React 16.4.0 and react-google-maps 9.4.5. I don't use typescript as the other users with the same problem.

Forked On 16 Aug 2022 at 03:57:31

Elvinhatamov

npm i react-google-maps --force

Commented On 16 Aug 2022 at 03:57:31

Nancy-sun

started

Started On 16 Aug 2022 at 02:30:38

Francoalemandi1

started

Started On 11 Aug 2022 at 08:39:11

Peter-rusin

started

Started On 07 Aug 2022 at 02:46:18

Jesseworking

started

Started On 04 Aug 2022 at 10:51:04

Stephenavocado

started

Started On 03 Aug 2022 at 11:54:28

Paulosiciliano

started

Started On 02 Aug 2022 at 10:33:14

About Repository

React.js Google Maps integration component
Language: JavaScript
Star: 4531
Fork: 941
Watchers: 4531
Open Issues: 271
https://github.com/tomchentw/react-google-maps
MIT License
Last updated: 28 Sep 2022
Tropics: