react-google-maps OverlayView zIndex
Trying to get zIndex working on an OverlayView.
[This fiddle doesn't work -- missing react-google-maps]
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<!-- this doesn't actually work: -->
<script type="text/babel" src="https://rawgit.com/tomchentw/react-google-maps/master/lib/index.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
The fiddle can't run, because it can't import react-google-maps. (But check the JS source).
</div>
CSS
.overlay {
background: white;
border: 1px solid #ccc;
padding: 5px;
max-width: 40em;
}
JavaScript 1.7
import {
GoogleMap,
OverlayView,
Marker
} from "react-google-maps";
class OverlayViewExample extends React.Component {
render() {
const pos = {
lat: -34.397,
lng: 150.644
};
const mapPane = OverlayView.OVERLAY_MOUSE_TARGET;
const getOffset = this.getPixelPositionOffset.bind(this);
return ( <
GoogleMap defaultZoom = {
8
}
defaultCenter = {
pos
} >
<
OverlayView position = {
pos
}
mapPaneName = {
mapPane
}
getPixelPositionOffset = {
getOffset
} >
<
div style = {
{
zIndex: 2
}
}
className = "overlay"
ref = "childDiv" > This should be in front < /div> < /
OverlayView > <
OverlayView position = {
pos
}
mapPaneName = {
mapPane
}
getPixelPositionOffset = {
getOffset
} >
<
div style = {
{
zIndex: 1
}
}
className = "overlay" > Another overlay should be in front of me < /div> < /
OverlayView > <
/GoogleMap>
);
}
getPixelPositionOffset(width, height) {
// uncomment this for a hack workaround:
// if (this.refs.childDiv) {
// this.refs.childDiv.parentNode.style.zIndex = 2;
// }
return {
x: -(width / 2),
y: -(height / 2)
};
}
}
ReactDOM.render( <
OverlayViewExample / > ,
document.getElementById('container')
);