54 lines
1.2 KiB
JavaScript
54 lines
1.2 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import PropTypes from "prop-types";
|
|
import { Box, Button } from "grommet";
|
|
|
|
import { MAPS_API } from "../config";
|
|
|
|
function Maps(props) {
|
|
const [ location, setLocation ] = useState([null, null]);
|
|
useEffect(() => {
|
|
navigator.geolocation.getCurrentPosition(
|
|
position => setLocation([position.coords.latitude, position.coords.longitude]),
|
|
() => {}
|
|
);
|
|
});
|
|
|
|
const mapsEmbedUrl = new URL("https://www.google.com/maps/embed/v1/view");
|
|
mapsEmbedUrl.searchParams.append("key", MAPS_API);
|
|
mapsEmbedUrl.searchParams.append("center", `${location[0]},${location[1]}`);
|
|
mapsEmbedUrl.searchParams.append("zoom", 14);
|
|
return (
|
|
<Box
|
|
align="center"
|
|
background="light-1"
|
|
width="100vw"
|
|
justify="center"
|
|
direction="column"
|
|
alignContent="center"
|
|
height="95vh"
|
|
>
|
|
{location[0] === null ?
|
|
"Loading Location":
|
|
<iframe
|
|
width="650"
|
|
height="300"
|
|
frameBorder="0"
|
|
style={{ border: 0 }}
|
|
src={mapsEmbedUrl.href}>
|
|
</iframe>
|
|
}
|
|
<Button primary size="large" onClick={props.close}
|
|
label="Dismiss" margin="1.5em" />
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
Maps.propTypes = {
|
|
data: PropTypes.object,
|
|
close: PropTypes.func
|
|
};
|
|
|
|
Maps.pluginName = "Maps";
|
|
|
|
export default Maps;
|