question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Map renders empty grey box?

See original GitHub issue

Using the exact example from the readme. Am I missing something or is there a bug?

import React from 'react'
import GoogleMapReact from 'google-map-react'

export default class MapView extends React.Component {

	static defaultProps = {
		center: {lat: 59.95, lng: 30.33},
		zoom: 5
	  };

	render() {
		const AnyReactComponent = ({ text }) => <div>{text}</div>;

		return (
			<GoogleMapReact
				defaultCenter={this.props.center}
				defaultZoom={this.props.zoom}
				bootstrapURLKeys={{
					key: 'redacted'
				}}
			  >
				<AnyReactComponent
				  lat={59.955413}
				  lng={30.337844}
				  text={'Kreyser Avrora'}
				/>
			  </GoogleMapReact>
		);
	}

}

screen shot 2017-04-03 at 4 08 59 pm

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:3
  • Comments:15 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
istarkovcommented, Apr 3, 2017

Try “magic” property resetBoundsOnResize

<GoogleMapReact
   resetBoundsOnResize
   ....

should help

1reaction
Luckass77commented, Mar 22, 2019

I am having a similar problem with my web site’s contact page. (http://sandermechanical.com/contact) The WordPress theme (Envision) has a built in Google Maps widget, and all of a sudden it stopped working. I’ve paid for the author’s support program, but my service ticket requests have gone ignored since December 2018. Any assistance or guidance that can be offered would be most appreciated.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Google Maps renders as grey box - Stack Overflow
I try to display a Google Map in a collapsible 'React-Bootstrap' Panel. But I just get a grey box. After a window resize...
Read more >
Google Maps Only Displaying Grey Box - ACF Support
Google Maps Only Displaying Grey Box ... Here's the code that is attempting to render the map: private function bsd_qvp_display_map( $map) ...
Read more >
Rendering a google map gives a gray box in the pdf
I have a google map on the webpage. When I convert to pdf the map renders as just a gray box. Version 0.12.1...
Read more >
Leaflet output is grey - GIS Stack Exchange
Map shows grey space with a blue marker. No trace of OSM spatial visualisation. Leaflet Output. Could you point out where is the...
Read more >
Google Maps Platform FAQ
My app only shows blank grey tiles instead of a map. ... suitable for using the Maps JavaScript API, the Maps Static API...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found