Weird onChild* behaviour

My use case is that I’m pulling a bunch of events from a server and displaying them on the map along with the user’s location. The user should be able to click the events and have a pop-up appear displaying the details of the event, along with being able to drag the user marker to display new events close to the new location.

I got the event-clicking behaviour to work by passing in an onClick prop, and then when I started moving everything to onChildClick, I added a custom distanceToMouse function that seems to accurately be calculating the distance of the mouse from the children, returning 0 if the mouse is inside the child.

My problem is that one of the event markers isn’t being recognized at all. I can click all over it and the onChildClick function is not being called. While doing other testing to see what might be happening, I found that when I click the user marker, the onChildClick function sometimes logs the properties that should be associated with the “missing” event. Why does the map think that my event is over by the user marker?

I’ve circled the event that isn’t being recognized. I’m using placeholder icons for my marker images right now, which is why they’re not transparent. When I zoom in on the map and click around more, I find that the map seems to think the circled event is around the user marker’s left ear.

Here’s the code I’m using to create the map and markers:

// #### map.js ####
import React, {Component, PropTypes} from 'react';
import GoogleMapReact from 'google-map-react';
import Marker from './map_marker';

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

export default class SimpleMap extends Component {
	static contextTypes = {
		router: PropTypes.object
	};
	
	constructor(props) {
		super(props);
		this.state = {
			center: {
					lat: 59.95,
					lng: 30.33
				},
			zoom: 11,
			
			userCoords: null,
			
			mapElement: null,
			map: null,
			userMarker: null,
			markerCoords: null,
			openMarkerIDs: []
			//geocoder: null
		};
		
		this.onMapClick = this.onMapClick.bind(this);
		this.onChildMouseDown = this.onChildMouseDown.bind(this);
		this.onChildClick = this.onChildClick.bind(this);
	}
	
	componentWillMount() {
		var newState = {...this.state};
		
		if (this.props.lat && this.props.lng) {
			const {lat, lng} = this.props;
			newState.center = {lat: parseFloat(lat), lng: parseFloat(lng)};
			newState.userCoords = {lat: parseFloat(lat), lng: parseFloat(lng)};
		}
		
		if (this.props.zoom)
			newState.zoom = this.props.zoom;
		
		if (this.props.openMarkerIDs)
			newState.openMarkerIDs = this.props.openMarkerIDs;
		
		this.setState(newState);
	}
	
	onMapClick(clickEvent) {
		if (!hasClass(clickEvent.nativeEvent.target, 'map-marker-img') && this.state.openMarkerIDs.length > 0)
			this.setState({...this.state, openMarkerIDs: []});
	}
	
	onChildMouseDown(hoverKey, childProps, mouse) {
		console.log("onChildMouseDown mouse: ", mouse);
	}
	onChildClick(hoverKey, childProps, mouse) {
		console.log("onChildClick childProps: ", childProps);
		const markerId = childProps.id;
	}
	
	render() {
		const style = {
			width: '30em',
			height: '30em'
		};
		
		const Markers = this.props.markerCoords &&
			this.props.markerCoords.map((marker, index) => {
				const isOpen = this.state.openMarkerIDs.indexOf(marker.id) != -1;
				//onClick={() => {this.setState({...this.state, openMarkerIDs: [marker.id]});}}
				//onEventClick={() => {this.context.router.push(`/event/${marker.id}`);}}
				return (
					<Marker
						key={marker.id}
						{...marker}
						open={isOpen}
						imgSrc="images/locator-icon.png"
						width={33}
						height={48}
					/>
				);
			});
		
		const userMarker = this.state.userCoords &&
			<Marker
				lat={this.state.userCoords.lat}
				lng={this.state.userCoords.lng}
				imgSrc="images/Corgi-Face-User.png"
				width={51}
				height={63}
			/>;
		
		//onChildMouseDown={(hoverKey, childProps, mouse) => {this.onChildMouseDown(hoverKey, childProps, mouse)}}
		return (
			<div style={style}
					onClick={(e) => {this.onMapClick(e)}}>
				<GoogleMapReact
						onChildClick={(hoverKey, childProps, mouse) => {this.onChildClick(hoverKey, childProps, mouse)}}
						onClick={() => console.log('mapClick')}
						
						bootstrapURLKeys={{key: API_KEY}}
						defaultCenter={this.state.center}
						defaultZoom={this.state.zoom}
						distanceToMouse = {({x, y}, {x: mouseX, y: mouseY}, markerProps) => {
							// the function assumes x, y is the center of the rectangle, so move x, y to the center
							x = x + markerProps.width / 2;
							y = y + markerProps.height / 2;
							const dx = Math.max(Math.abs(x - mouseX) - markerProps.width / 2, 0);
							const dy = Math.max(Math.abs(y - mouseY) - markerProps.height / 2, 0);
							return dx*dx + dy*dy;
						}} >
					{Markers}
					{userMarker}
				</GoogleMapReact>
			</div>
		);
	}
}

// #### map_marker.js ####
import React, {Component} from 'react';
import EventBlock, {BIG_BLOCK} from '../components/event_block';

export default class MapMarker extends Component {
	getOpenMarker() {
		// return an open event marker
		if (this.props.event_id) {
			return (
				<div className="row event-browser-list map-view">
					<div className="map-popup events-map-popup">
						<EventBlock {...this.props} />
						<div className="map-popup-arrow"></div>
					</div>
					<div className="example-map-locator">
						<img src="images/locator-icon.png"/>
					</div>
				</div>
			);
		}
	}
	
	render() {
		const onClickFunc = this.props.onClick || null;
		if (this.props.open) {
			const clickOpenEventFunc = this.props.onEventClick || null;
			/*
				<div onClick={onClickFunc}>
					{this.getOpenMarker.bind(this)}
				</div>
			*/
			return (
				<div onClick={clickOpenEventFunc}>
					<div className="map-popup events-map-popup">
						<EventBlock display={BIG_BLOCK} {...this.props} />
						<div className="map-popup-arrow"></div>
					</div>
					<div className={this.props.classNames}>
						<img src={this.props.imgSrc} />
					</div>
				</div>
			);
		}
		
		else {
			//onClick={() => {console.log("user marker props: ", this.props)}}
			return (
				<div className={this.props.classNames}>
					<img src={this.props.imgSrc} />
				</div>
			);
		}
	}
}

For reference, the circled event’s coords are 43.135791, -70.947712 and the user marker’s coords are 43.13, -70.92.

I should also note that the event behind the user marker in the picture is being recognized properly and is not overlapping the circled mystery event.

I hope there’s an easy fix for this that I’m not seeing!

[ckim16]

Found my err. Added position: absolute for the GoogleMap component. Hope this helps someone.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.