92 lines
3.2 KiB
JavaScript
92 lines
3.2 KiB
JavaScript
import { he } from "date-fns/locale";
|
|
import GoogleMapReact from "google-map-react";
|
|
const GoogleMapComponent = (props) => {
|
|
const { center, zoom } = props;
|
|
|
|
let data = [center];
|
|
|
|
const ModelsMap = (map, maps) => {
|
|
//instantiate array that will hold your Json Data
|
|
let dataArray = [];
|
|
//push your Json Data in the array
|
|
{
|
|
data.map((markerJson) => dataArray.push(markerJson));
|
|
}
|
|
|
|
//Loop through the dataArray to create a marker per data using the coordinates in the json
|
|
for (let i = 0; i < dataArray.length; i++) {
|
|
let marker = new maps.Marker({
|
|
position: { lat: dataArray[i].lat, lng: dataArray[i].lng },
|
|
map,
|
|
label: dataArray[i].id
|
|
});
|
|
}
|
|
};
|
|
|
|
// console.log(
|
|
// "https://datamap.gov.wales/maps/pedw-dev/embed?center=" +
|
|
// props.center.lng +
|
|
// "," +
|
|
// props.center.lat +
|
|
// "&zoom=12#/"
|
|
// );
|
|
return (
|
|
// <GoogleMapReact
|
|
// options={function (maps) {
|
|
// return {
|
|
// overviewMapControl: true,
|
|
// mapTypeControl: true,
|
|
// };
|
|
// }}
|
|
// bootstrapURLKeys={{
|
|
// key: "AIzaSyCzeVrHt544bp_72YCFkw21eDsmI2JEsQo",
|
|
// }}
|
|
// defaultCenter={center}
|
|
// defaultZoom={zoom}
|
|
// yesIWantToUseGoogleMapApiInternals
|
|
// onGoogleApiLoaded={({ map, maps }) => ModelsMap(map, maps)}
|
|
// ></GoogleMapReact>
|
|
<>
|
|
{" "}
|
|
<div className="govuk-grid-row">
|
|
<div className="govuk-grid-column-full">
|
|
<a
|
|
href={
|
|
"https://datamap.gov.wales/maps/pedw-dev/embed?center=" +
|
|
props.center.lng +
|
|
"," +
|
|
props.center.lat +
|
|
"&zoom=7#/"
|
|
}
|
|
rel="noreferrer noopener"
|
|
className="govuk-link govuk-link--no-underline govuk-!-font-size-14 "
|
|
target="_blank"
|
|
>
|
|
See this map on Datamap Wales
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="govuk-grid-row">
|
|
<div className="govuk-grid-column-full">
|
|
<iframe
|
|
src={
|
|
"https://datamap.gov.wales/maps/pedw-dev/embed?center=" +
|
|
props.center.lng +
|
|
"," +
|
|
props.center.lat +
|
|
"&zoom=7#/"
|
|
}
|
|
//src={"https://datamap.gov.wales/maps/pedw-dev/embed#/"}
|
|
width={"100%"}
|
|
style={{ maxHeight: "400px" }}
|
|
height={"500px"}
|
|
className={"mappingFrame"}
|
|
></iframe>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default GoogleMapComponent;
|