react-google-maps: map is not displaying in browser; no error in console

I am trying to integrate google maps in my application; I created a component just like you provided and called it with a route but it doesnt shows map as I needed.

My Map Component:

    import {default as React, Component} from "react";
    import {default as update} from "react-addons-update";

    import {default as canUseDOM} from "can-use-dom";
    import {default as _} from "lodash";

    import {GoogleMapLoader, GoogleMap, Marker} from "react-google-maps";

    import {triggerEvent} from "react-google-maps/lib/utils";



     class Mapping extends Component {

         state = {
             markers: [{
                 position: {
                     lat: 25.0112183,
                     lng: 121.52067570000001,
                 },
                 key: "Taiwan",
                 defaultAnimation: 2
             }]
         };

         constructor (props, context) {
             super(props, context);
             this.handleWindowResize = _.throttle(this.handleWindowResize, 500);
         }

         componentDidMount () {
             if (!canUseDOM) {
                 return;
             }
                 window.addEventListener("resize", this.handleWindowResize);
                 }

        componentWillUnmount () {
        if (!canUseDOM) {
            return;
        }
        window.removeEventListener("resize", this.handleWindowResize);
    }

    handleWindowResize () {
        console.log("handleWindowResize", this._googleMapComponent);
        triggerEvent(this._googleMapComponent, "resize");
    }

    /    *
 *     This is called when you click on the map.
     * Go and try click now.
     */
        handleMapClick (event) {
        var {markers} = this.state;
        markers = update(markers, {
            $push: [
                {
                    position: event.latLng,
                    defaultAnimation: 2,
                    key: Date.now()// Add a key property for: http://fb.me/react-warning-keys
                },
            ],
        });
        this.setState({ markers });

        if (3 === markers.length) {
            this.props.toast(
                "Right click on the marker to remove it",
                "Also check the code!"
            );
        }
    }

    handleMarkerRightclick (index, event) {
        /*
         * All you modify is data, and the view is driven by data.
         * This is so called data-driven-development. (And yes, it's now in
         * web front end and even with google maps API.)
         */
        var {markers} = this.state;
        markers = update(markers, {
            $splice: [
                [index, 1]
            ],
        });
        this.setState({ markers });
    }

    render () {
            return (
           <GoogleMapLoader
                containerElement={
          <div
            {...this.props}
            style={{
              height: "100%"
            }}
          />
        }
                googleMapElement={
          <GoogleMap
            ref={(map) => (this._googleMapComponent = map) && console.log(map.getZoom())}
            defaultZoom={3}
            defaultCenter={{lat: -25.363882, lng: 131.044922}}
            onClick={this.handleMapClick}>
                {this.state.markers.map((marker, index) => {
              return (
                <Marker
                  {...marker}
                  onRightclick={this.handleMarkerRightclick.bind(this, index)} />
              );
            })}
          </GoogleMap>
        }
                />
        );
    }
}
export default Mapping;

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 4
Comments: 53 (9 by maintainers)

Most upvoted comments

i found out that converting height and width’s values from percentage to pixels worked for me.

+67

tahir-masood1 on Jan 11, 2016

I have a similar issue with seeing the google logo and only a grey box.

But the interesting thing is that the map appears when I resize the window!

Is that happening with anyone else?

+15

zkdzegede on Oct 27, 2016

the issue is not related to the react-google-map. the container element of the map needs to have an height specified. it will not render anything if height is set to a percentage. so you could either set the containerElement a fix height or the better solution would be wrap the map component inside another div and give it a fix height.so your render looks something like this

return (
      <div className={st.mapWrapper}>
          <AsyncGoogleMap
            googleMapURL={ googleMapURL }
            loadingElement={ <div style={ { height: "100%" } } /> }
            containerElement={ <div style={ { height: "100%" } } /> }
            mapElement={ <div style={ { height: "100%" } } /> }
            markers={ this.state.markers }
            onMarkerClick={ this.handleMarkerClick }
            onMarkerClose={ this.handleMarkerClose }
          />
      </div>
    );

and in your styles

.mapWrapper {
    position: relative;
    display: block;
    height: 350px; //give a height in px or in vh NOT a percentage value
    width: 100%;
}

+10

duleep-noetic on Nov 17, 2017

{width: 200, height: 200} results in an empty grey box. Clicking or dragging on the box generates Uncaught TypeError: Cannot read property 'x' of undefined

julienvincent on Jan 13, 2016

Sorry I should of posted an update here. I got it to work properly by placing it within another div that was position: absolute; and had width and height set to 100%, and then additionally setting the style on the containerElement prop to height: 100%;. Without the outer div, the component completely breaks.

julienvincent on Jan 19, 2016

I did this and can now see the google logo and terms of use, but the map area is grey. Also clicking or dragging within the component triggers errors and breaks the component

julienvincent on Jan 11, 2016

Had a similar problem. Adding zoom & center props helped in my case.

ansgarm on May 23, 2016

Just to complement, I was having an issue with Safari not rendering the map (It was working fine in Chrome). I had a min-height: 850px in the outer div. I then changed it to height: 850px and worked.

Later on, I wanted to make it proportional to the screen size and changed to height: 100%, but it didn’t work on Safari again (good on Chrome though).

Finally, I changed to height: 100vh, and worked on both browsers 👍

antonioduarte on Nov 28, 2017

@Climber22 The repo of this project is unmaintained more than a year, and we had build new version https://www.npmjs.com/package/@react-google-maps/api

We had rewrite it to TypeScript, and updating it frequently: https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api You can enjoy autocomplete.

You can see our docs: https://react-google-maps-api-docs.netlify.com/

Also a lot of examples: https://react-google-maps-api-gatsby-demo.netlify.com/ https://github.com/JustFly1984/react-google-maps-api/tree/master/packages/react-google-maps-api-gatsby-example/src/examples

The bundle size is much smaller: https://bundlephobia.com/result?p=@react-google-maps/api

Our Spectrum community: https://spectrum.chat/react-google-maps Our Slack channel: https://join.slack.com/t/react-google-maps-api/shared_invite/enQtODc5ODU1NTY5MzQ4LTBiNTYzZmY1YmVjYzJhZThkMGU0YzUwZjJkNGJmYjk4YjQyYjZhMDk2YThlZGEzNDc0M2RhNjBmMWE4ZTJiMjQ

Enjoy!  https://localhost:8000 AIzaSyAIEIUwCGFxj7LQoJP7f1uIjrdW_caZ5dg

http://localhost:3000 AIzaSyDGoMq24FaPFSVxKgMeXE5fkJw0JkdQ7i8  https://react-google-maps-api-gatsby-demo.netlify.com/ AIzaSyC3kkfcd1XTail_ft8YEoNto49NKOmFhWo

http://localhost:9001 AIzaSyCakXXwZ_CyPggaQBrYmbw5QhgGUcoMD_E

export const googleMapKey = ‘AIzaSyCakXXwZ_CyPggaQBrYmbw5QhgGUcoMD_E’ export default googleMapKey  http://localhost:6060 AIzaSyCgkbHxXpGlShz9Doj6dhbnXR59v-G8bO0

JustFly1984 on Mar 9, 2020

I was having this problem and after much frustration, I figured out that the coordinates I was testing it with had the lat and lng flipped. Guess I was sending it unmappable coordinates. Just another possible solution to throw into the mix here. You can see what was rendering for me below with the bad coordinates…

reggieofarrell on Feb 6, 2018

I’m having the same issue as @zkdzegede. Also, when I resize the page, the center is completely off.

Anyone have a possible solution ?

ZachPerkitny on Nov 6, 2016

Google maps API will initialize on the DOM defined by containerElement. You have to make sure the containerElement will have height & width when rendered on the page.

tomchentw on Jan 11, 2016

I also encountered a similar issue. But it’s all gray, there is no google logo or any other stuff. No errors. It turned out I use the map in two different component, one of them passing “zoom” property from parent but the other doesn’t. Once I fixed this and it worked. Help this could help.

noraliucode on Jun 1, 2018

Add style={{width: ‘100%’, height: ‘100%’}} to all the parents elements of google map, including body and html.

chadzheng on Jul 24, 2017

I had so much trouble getting the map to show and none of the answers above worked for me, so I’m posting this solution hoping it would solve y’all hours of playing around!

I think because I’m using a dialog and a map in that dialog I had to do some extra steps:

This is my dialog in HTML <div id="modal-create" class="modal fade" role="dialog">

in that I have the map <div id="map"></div>

for a css style I have this #map{ height: 300px; } change the height to whatever you want, for me it helped to have a set px height and not a %

I added a dom listener in my doucment.ready

google.maps.event.addDomListener(window, 'load', initMap);

and my initMap() is as follows

function initMap() {

        navigator.geolocation.getCurrentPosition(function(position) {
            var mapCanvas = document.getElementById('map');
            var mapOptions = {
                center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(mapCanvas, mapOptions)

            $('#modal-create').on('shown.bs.modal', function () {
                google.maps.event.trigger(map, "resize");
            });

        });

really hope this works for you whomever you are ❤️

Omarsh1 on Apr 15, 2017

This works: style={{width: '100%', height: '100%'}}

jrichardsz on Nov 29, 2016

I was also having the same issue as @zkdzegede. Fixed it by adding default width and height to the containerElement prop of the ScriptLoader component which I’m using:

<ScriptjsLoader
        hostname={'maps.googleapis.com'}
        pathname={'/maps/api/js'}
        query={{
          key: 'the-api-key',
          language: 'en',
          libraries: 'geometry,drawing,places,visualization',
          v: '3',
        }}

        loadingElement={
          <div>{'Loading'}</div>
        }

        containerElement={
          <div style={{height: 400, width: 600}}></div>
        }

        googleMapElement={
          <GoogleMap
            defaultZoom={5}
            defaultCenter={{lat: -25.363882, lng: 131.044922}}
          >
            <Marker {...this.props.markerProps} />
          </GoogleMap>
        }
      />

aaj on Nov 19, 2016

I got mine working by fiddling with its containers. Can’t remember exactly what I did but I think it needed an outer container with position absolute and a width and height set

julienvincent on Feb 4, 2016