batuhan-basoglu/Kene-s-Cribs-Website
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added some css and fixed some alignment.

Browse source
This commit is contained in:
Batuhan Basoglu 2021-03-31 16:30:37 -04:00
parent e1891bd59b
commit efc12682d6
6 changed files with 141 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

188
src/listings-page/ListingsPage.js
View file

@ -1,16 +1,16 @@
import React, { useState, useEffect, Component } from "react";
import {
GoogleMap,
withScriptjs,
GoogleMap,
withScriptjs,
withGoogleMap,
Marker,
InfoWindow
} from "react-google-maps";
import * as listingData from "./data/property-data.json";
import mapStyles from "./mapStyles";
import "./ListingsPage.css";
} from "react-google-maps";
import * as listingData from "./data/property-data.json";
import mapStyles from "./mapStyles";
import "./ListingsPage.css";
function Map(){
function Map() {
const [selectedProperty, setSelectedProperty] = useState(null);
@ -19,89 +19,89 @@ function Map(){
return (
<GoogleMap
defaultZoom={10}
defaultCenter={{lat: 45.4231, lng:-75.6931}}
defaultCenter={{ lat: 45.4231, lng: -75.6931 }}
//https://snazzymaps.com/explore
defaultOptions={{styles: mapStyles}}
defaultOptions={{ styles: mapStyles }}
>
{listingData.Properties.map(house => (
{listingData.Properties.map(house => (
<Marker
key={house.LISTING_ID}
position={{
lat: house.coordinates[1],
lng: house.coordinates[0]
}}
<Marker
key={house.LISTING_ID}
position={{
lat: house.coordinates[1],
lng: house.coordinates[0]
onClick={() => {
setSelectedProperty(house)
}}
}}
icon={{
url:"homes-3.svg",
scaledSize: new window.google.maps.Size(50,50)
}}
onClick={() => {
setSelectedProperty(house)
}}
/>
))}
icon={{
url: "homes-3.svg",
scaledSize: new window.google.maps.Size(50, 50)
}}
{selectedProperty && (
<InfoWindow
position={{
lat: selectedProperty.coordinates[1],
lng: selectedProperty.coordinates[0]
}}
onCloseClick={() => {
setSelectedProperty(null);
}}
>
<div>
<h2>{selectedProperty.ADDRESS}</h2>
<p> {selectedProperty.DESC}</p>
<div>
<div class="row">
<div className="col-6">
/>
))}
{selectedProperty && (
<InfoWindow
position={{
lat: selectedProperty.coordinates[1],
lng: selectedProperty.coordinates[0]
}}
onCloseClick={() => {
setSelectedProperty(null);
}}
>
<div>
<h2>{selectedProperty.ADDRESS}</h2>
<p> {selectedProperty.DESC}</p>
<div>
<div class="row">
<div className="col-6">
<i class="fas fa-bed fa-3x"></i> <span class="popup_nums"> 1 </span>
<i class="fas fa-bath fa-3x"></i> <span class="popup_nums"> 2</span>
</div>
<div className="col-6 booking_button">
</div>
<div className="col-6 booking_button">
<button>Show Listing</button>
</div>
</div>
</div>
</div>
</InfoWindow>
)}
</div>
</InfoWindow>
)}
</GoogleMap>
);
}
@ -113,12 +113,12 @@ class ListingsPage extends Component {
render() {
return (
<div className="listings">
<div className="listings">
<section class="colored-section2" id="cta">
<section class="colored-section2" id="cta">
{/*
{/*
@ -153,41 +153,45 @@ class ListingsPage extends Component {
</div>
*/}
<div class="row">
<div class="col-12">
<div class="row">
<h2> Map </h2>
<div style={{ width: "100vm", height: "800px" }}>
<MapWrapped
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
<div class="col-12">
<section className="colored-section" id="features">
<div className="container-fluid">
<h2> Map </h2>
</div>
</section>
<div style={{ width: "100vm", height: "800px" }}>
<MapWrapped
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I`}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `100%` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `100%` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</div>
</div>
</div>
</div>
</section>
</div>
);
</section>
</div>
);
}
}