Info Window not showing on marker click in react-google-maps

Asked
Active3 hr before
Viewed126 times

7 Answers

showingwindowclickreact
90%

The google-maps-react documentation on InfoWindow says the following:,The visibility of the <InfoWindow /> component is controlled by a visible prop. The visible prop is a boolean (PropTypes.bool) that shows the <InfoWindow /> when true and hides it when false.,There are two ways how to control a position of the <InfoWindow /> component. You can use a position prop or connect the <InfoWindow /> component directly to an existing <Marker /> component by using a marker prop.

Pretag
 Pretag team - issue, fix, solve, resolve
88%

Pretag
 Pretag team - issue, fix, solve, resolve
72%

class InfoWindowMap extends Component {,I fixed. I replaced with Marker and InfoWindow to its component.,then I put the infoWindowMap component in sindei google map component.

  class VenuesMap extends Component {

constructor(props){
	super(props);

	this.state = {
		zoom: 11,
		isOpen: false
	}

handleToggle = () => {
	this.setState({
		isOpen: !false
	});
}
  render() {

		markers = venues.map((location, i) => {

			const lat = location.venue.location.lat
			const lng = location.venue.location.lng
			const index = i + 1 ;
			return (
				<Marker
					key={i}
					position={{ lat: lat, lng: lng}}
					label={index.toString()}
					onClick={this.handleToggle}
				>
				{this.state.isOpen &&
				<InfoWindow
						onCloseClick={this.handleToggle}
						>
					<span>Something</span>
				</InfoWindow>
			 }
			</Marker>
			)
		})

  const MapWithAMarker = withGoogleMap(props =>
     <GoogleMap
      defaultZoom={this.state.zoom}
       defaultCenter={{ lat:Number(latCurrentLocation) || 40.7128, lng: 
      Number(lngCurrentLocation) || -74.0060}}

           >
	{markers}
	{userMarkers}
      </GoogleMap>
   );

	const googleMap = 	<MapWithAMarker
		containerElement={<div style={{ height: this.props.containerElement }} />}
		mapElement={<div style={{ height: this.props.mapElement}}  />}
	/>

        return (
		<div>
			{googleMap}
		</div>
	)
      }
   }

 export default connect(stateToProps)(VenuesMap)
load more v
65%

So what do we want to show in the info window? You can put anything you want in here! You can add pictures (think Redfin, when you click on a marker for a house for sale, and it pops up a picture of the house!), or any other information about the location that you have saved into your props that are being passed into the Map component.,First, notice that with the import from react-google-maps, we’ve included something called Infowindow. The Info window is exactly what we want to pop up when we click on a marker.,You can check the official documentation for using info windows, including an example to see how to create a fully customized here:

The google-maps-react package that you installed to render the map in your app has a simple way to solve this! If you’ll remember, we have a Map component in our app that so far looks like this:

import React from "react";import { withScriptjs, withGoogleMap, GoogleMap, Marker, InfoWindow } from "react-google-maps";const Map = withScriptjs(withGoogleMap((props) =>{   const recycleCenters = props.recycleCenters      return (              <GoogleMap zoom={4.5} center={ { lat:  39.6693, lng: -98.3476 } } />              {recycleCenters.map(center => (                       <Marker                               key={center.id}                               position={{                                      lat: center.latitude,                                      lng: center.longitude                               }}           />                ))};       </GoogleMap>}))export default Map;
load more v
75%

Now, let's add our InfoWindow component that has the following functionality:,You might have also noticed that onMouseLeave callback sets the value of the state to null. This action is needed in order to remove marker selection and displayed direction if no card is hovered on.,preserveViewport: true, - disable zoom on direction display (when a direction is calculated the map is zoomed to fit the screen boundaries)

Pretag
 Pretag team - issue, fix, solve, resolve
40%

ProductsSearch for Java codeSearch for JavaScript code,ResourcesFAQBlogTabnine AcademyStudentsTerms of usePrivacy policyJavascript Code Index,aws-sdkAWS SDK for JavaScript

withScriptjs(withGoogleMap(() =>
 <GoogleMap
  defaultZoom={12}
  defaultCenter={{ lat: parseFloat(-37.813179), lng: parseFloat(144.950259) }}
 >
  <Marker position={{ lat: -37.813179, lng: 144.950259 }} />
 </GoogleMap>,
))
load more v
22%

Pretag
 Pretag team - issue, fix, solve, resolve

Other "showing-window" queries related to "Info Window not showing on marker click in react-google-maps"