import React, { useState, useEffect, Component } from "react";
import {
GoogleMap,
withScriptjs,
withGoogleMap,
Marker,
InfoWindow,
useLoadScript
} from "react-google-maps";
import * as listingData from "./data/property-data.json";
import mapStyles from "./mapStyles";
import "./ListingsPage.css";
function Map(){
const [selectedProperty, setSelectedProperty] = useState(null);
return (
{
listingData.Properties.map(house => {
console.log(house.PRICE)
house.PRICE > 100 ?
{
setSelectedProperty(house)
}}
icon={{
url:"homes-3.svg",
scaledSize: new window.google.maps.Size(50,50)
}}
/>
:
console.log(house.PRICE)
})
}
{selectedProperty && (
{
setSelectedProperty(null);
}}
>
{selectedProperty.ADDRESS}
{selectedProperty.DESC}
)}
);
}
const MapWrapped = withScriptjs(withGoogleMap(Map))
class ListingsPage extends Component {
render() {
return (
{/*
*/}
}
containerElement={
}
mapElement={
}
/>
);
}
}
export default ListingsPage;