How to create map like in airbnb with react and google-maps

Introduction

Disclaimer

1. English is not my native language, so there may be mistakes in the text, but I'm sure that the code can say a thousand times more than any of my words
2. I did not use react-map-libraries to make the solution as flexible and understandable as possible
3. This is the most simple implementation without deep styling, clustering and global-storage.
4. Source code is here - https://github.com/alex1998dmit/map_airbnb

Task

Let's assume that we need to create a map with displaying apartment cards on it as it is done on airbnb
The technology stack is next:

• React & Typescript
• Google map and @googlemaps/react-wrapper
• MUI for style stuff

Implementation

Create our app

Everything is pretty trivial - you need to install the application using creat-react-app using TS

npx create-react-app my-app --template typescript

Install dependecies

For the application to work, we need MUI, @googlemaps/react-wrapper

npm install --save @material-ui/core @material-ui/icons @googlemaps/react-wrapper

Configure map

In this step we will integrate simple map to application. First of all you need to get google-map key - [https://developers.google.com/maps/documentation/javascript/get-api-key].
First of all let's create a Map component, which will be wrapper for google-maps.

import { useEffect, useRef, useState } from "react";
// we will use make styles for styling components, you can use another solutions (like css, sass or cssonjs
import { makeStyles } from "@material-ui/core";
// api mock data
import Apartments from "./apartments";

// Our component will receive center coords and zoom size in props
type MapProps = {
  center: google.maps.LatLngLiteral
  zoom: number
}

// map wrapper styles
const useStyles = makeStyles({
  map: {
    height: '100vh'
  }
})

function Map({ center, zoom }: MapProps) {
  const ref = useRef(null);
  const [map, setMap] = useState<google.maps.Map<Element> | null>(null)
  const classes = useStyles();

  useEffect(() => {
    // we need to save google-map object for adding markers and routes in future
    if (ref.current) {
      // here will connect map frame to div element in DOM by using ref hook
      let createdMap = new window.google.maps.Map(
        ref.current,
        {
          center,
          zoom,
          disableDefaultUI: true,
          clickableIcons: false
        }
      );
      setMap(createdMap)
    }
  }, [center, zoom]);

  // map will be connect to this div block
  return <div ref={ref} id="map" className={classes.map} />;
}

export default Map

Then let's modify App.tsx with:

import React, { ReactElement } from 'react';
import { Wrapper, Status } from "@googlemaps/react-wrapper";
import Map from './Map'

// Here we can add views when map will loading or failure
const render = (status: Status): ReactElement => {
  if (status === Status.LOADING) return <h3>{status} ..</h3>;
  if (status === Status.FAILURE) return <h3>{status} ...</h3>;
  return <></>;
};

function App() {
  if (!process.env.REACT_APP_GOOGLE_KEY) {
    return <h2>Add google key</h2>
  }
  return (
    <div className="App">
      <Wrapper apiKey={process.env.REACT_APP_GOOGLE_KEY} render={render}>
        <Map center={{ lat: 55.753559, lng: 37.609218 }} zoom={11} />
      </Wrapper>
    </div>
  );
}

export default App;

And result is:

Add custom overlays

The next step is to add a custom overlay. Why will we use overlays and not markers ? Because in my opinion it will be difficult to customize regular markers, according to the documentation we can change only icon image and label over it [https://developers.google.com/maps/documentation/javascript/custom-markers].
Let's create an OverlayContainer, which will be a wrapper for the components located on the map at certain coordinates.

import * as React from 'react'
import ReactDOM from 'react-dom';

// base function for creating DOM div node
function createOverlayElement() {
  const el = document.createElement('div');
  el.style.position = 'absolute';
  el.style.display = 'inline-block';
  el.style.width = '9999px';
  return el;
}

// Our OverlayComponent will recieve map, postion and children props - position is coords, map is google.map object and children is a component that will be render in overlay
export type Props = {
  map: google.maps.Map | null
  position: { lat: number, lng: number }
  children?: React.ReactChild
}

const OverlayContainer = (props: Props) => {
  const overlay = React.useRef<google.maps.OverlayView | null>(null)
  const el = React.useRef<Element | null>(null)

  // modified OverlayView from google.maps [https://developers.google.com/maps/documentation/javascript/reference/3.44/overlay-view?hl=en]
  class OverlayView extends window.google.maps.OverlayView {
    position: google.maps.LatLng | null = null;
    content: any = null;

    constructor(props: any) {
      super();
      props.position && (this.position = props.position);
      props.content && (this.content = props.content);
    }

    onAdd = () => {
      if (this.content) this.getPanes().floatPane.appendChild(this.content);
    };

    onRemove = () => {
      if (this.content?.parentElement) {
        this.content.parentElement.removeChild(this.content);
      }
    };

    draw = () => {
      if (this.position) {
        const divPosition = this.getProjection().fromLatLngToDivPixel(
          this.position
        );
        this.content.style.left = divPosition.x + 'px';
        this.content.style.top = divPosition.y + 'px';
      }
    };
  }

  React.useEffect(() => {
    return () => {
      if (overlay.current) overlay.current.setMap(null)
    }
  }, [])

  if (props.map) {
    el.current = el.current || createOverlayElement()
    overlay.current = overlay.current || new OverlayView(
      {
        position: new google.maps.LatLng(props.position.lat, props.position.lng),
        content: el.current
      }
    )
    overlay.current.setMap(props.map)
    return ReactDOM.createPortal(props.children, el.current);
  }
  return null
}

export default OverlayContainer

Creating Map Points and Apartment Cards

I will create a simple apartment card by using MUI-core and MUI-icons [https://material-ui.com/ru/components/cards/] [https://material-ui.com/ru/components/material-icons/].
Let's create ApartmentCard:

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardActionArea from '@material-ui/core/CardActionArea';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
import Typography from '@material-ui/core/Typography';
import AspectRatioIcon from '@material-ui/icons/AspectRatio';
import { Grid, IconButton } from '@material-ui/core';
import MeetingRoomIcon from '@material-ui/icons/MeetingRoom';
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
import CloseIcon from '@material-ui/icons/Close';

const useStyles = makeStyles({
  root: {
    maxWidth: 230,
    position: 'relative',
    zIndex: 1001,
  },
  media: {
    height: 100,
  },
  close: {
    position: 'absolute',
    left: 0,
    top: 0,
    zIndex: 1001,
    background: 'white',
    width: '25px',
    height: '25px'
  }
});

type ApartmentCardProps = {
  image: string
  address: string
  area: number
  rooms_number: number
  floor: number
  floor_count: number
  rent: number
  handleClose: () => void
}

export default function ApartmentCard(props: ApartmentCardProps) {
  const classes = useStyles();
  return (
    <Card className={classes.root}>
       <IconButton className={classes.close} aria-label="close" onClick={props.handleClose}>
        <CloseIcon />
      </IconButton>
      <CardActionArea>
        <CardMedia
          className={classes.media}
          image={props.image}
          title="Contemplative Reptile"
        />
        <CardContent>
          <Typography variant="body2" component="h2">
            {props.address}
          </Typography>
          <Grid container spacing={1}>
            <Grid item container xs={6} spacing={1} alignItems='center'>
              <Grid item xs={8}><AspectRatioIcon /></Grid>
              <Grid item xs={4}>{props.area}</Grid>
            </Grid>
            <Grid item container xs={6} spacing={1} alignItems='center'>
              <Grid item xs={8}><MeetingRoomIcon /></Grid>
              <Grid item xs={4}>{props.rooms_number}</Grid>
            </Grid>
            <Grid item container xs={6} spacing={1} alignItems='center'>
              <Grid item xs={8}><KeyboardArrowUpIcon /></Grid>
              <Grid item xs={4}>{props.floor}/{props.floor_count}</Grid>
            </Grid>
            <Grid item container xs={12} spacing={1} alignItems='center' justifyContent="center">
              <Typography variant="body2" style={{ fontWeight: 600 }}>{props.rent} $</Typography>
            </Grid>
          </Grid>
          </Typography> */}
        </CardContent>
      </CardActionArea>
    </Card>
  );
}

And ApartmentPoint:

import { makeStyles } from "@material-ui/styles"

type ApartmentPonitProps = {
  price: number
  onClick: () => void
}

const styles = makeStyles({
  root:{
    background: 'white',
    borderRadius: '12px',
    padding: '8px',
    width: '60px',
    zIndex: 1000,
    position: 'relative'
  }
})

const ApartmentPoint = (props: ApartmentPonitProps) => {
  const classes = styles()
  return (
    <div className={classes.root} onClick={props.onClick}>
      {props.price} $
    </div>
  )
}

export default ApartmentPoint

We will use MapPoint like wrapper that will render ApartmentPoint or ApartmentCard:

import { useEffect, useRef, useState } from "react"
import ApartmentCard from "./ApartmentCard"
import ApartmentPoint from "./ApartmentPoint"

type MapPointProps = {
  image: string
  address: string
  area: number
  rooms_number: number
  floor: number
  floor_count: number
  rent: number
}

const MapPoint = (props: MapPointProps) => {
  const [opened, setIsOpened] = useState<boolean>(false)
  const handleOnOpen = () => setIsOpened(true)
  const handleOnClose = () => setIsOpened(false)
  const containerRef = useRef<HTMLDivElement>(null)

// Hook for handle outside click - simple implementation from stack overflow
  useEffect(() => {
    function handleClickOutside(this: Document, event: MouseEvent) {
      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
        setIsOpened(false)
      }
    }

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [containerRef]);

  return (<div ref={containerRef}>
    {opened ?
      <ApartmentCard
        image={props.image}
        address={props.address}
        area={props.area}
        rooms_number={props.rooms_number}
        floor={props.floor}
        floor_count={props.floor_count}
        rent={props.rent}
        handleClose={handleOnClose}
      /> :
      <ApartmentPoint
        price={props.rent}
        onClick={handleOnOpen}
      />}
  </div>)
}

export default MapPoint

And all together

Let's modify Map component by adding apartments points inside overlay containers:

import { makeStyles } from "@material-ui/core";
import { useEffect, useRef, useState } from "react";
import Apartments from "./apartments";
import MapPoint from "./MapPoint";
import OverlayContainer from "./OverlayContainer";

type MapProps = {
  center: google.maps.LatLngLiteral
  zoom: number
}

const useStyles = makeStyles({
  map: {
    height: '100vh'
  }
})

function Map({ center, zoom }: MapProps) {
  const ref = useRef(null);
  const [map, setMap] = useState<google.maps.Map<Element> | null>(null)
  const classes = useStyles();

  useEffect(() => {
    if (ref.current) { 
      let createdMap = new window.google.maps.Map(
        ref.current,
        {
          center,
          zoom,
          disableDefaultUI: true,
          clickableIcons: false
        }
      );
      setMap(createdMap)
    }
  }, [center, zoom]);

  return <div ref={ref} id="map" className={classes.map}>
    {Apartments.map((apartment, index) => (
      <OverlayContainer
        map={map}
        position={{
          lat: apartment.lat,
          lng: apartment.lng
        }}
        key={index}
      >
        <MapPoint
          image={apartment.image}
          address={apartment.address}
          area={apartment.area}
          rooms_number={apartment.rooms_number}
          floor={apartment.floor}
          floor_count={apartment.floor_count}
          rent={apartment.rent}
        />
      </OverlayContainer>
    ))}
  </div>;
}

export default Map

Apartments mock-data example(apartments.ts):

const Apartments = [
  {
    "id": 1,
    "image": "https://storage.yandexcloud.net/apartment-images/2.jpg",
    "area": 34.9,
    "kitchen_area": null,
    "address": "Novoalekseevskaya  4d4",
    "lat": 55.80562399999999,
    "lng": 37.641239,
    "rooms_number": 1,
    "bedrooms_number": 1,
    "restrooms_number": 1,
    "floor": 3,
    "floor_count": 14,
    "rent": 1500
  },
  {
    "id": 2,
    "image": "https://storage.yandexcloud.net/apartment-images/10_S939Rcf.jpg",
    "area": 47,
    "kitchen_area": null,
    "address": "Valovaya street 31",
    "lat": 55.66497999999999,
    "lng": 37.857464,
    "rooms_number": 1,
    "bedrooms_number": 1,
    "restrooms_number": 1,
    "floor": 6,
    "floor_count": 9,
    "rent": 2000
  },
  {
    "id": 3,
    "image": "https://storage.yandexcloud.net/apartment-images/07_uvV7gIk.jpg",
    "area": 40.9,
    "kitchen_area": null,
    "address": "academic Volgyn street 8A",
    "lat": 55.68271799999999,
    "lng": 37.544263,
    "rooms_number": 3,
    "bedrooms_number": 2,
    "restrooms_number": 1,
    "floor": 2,
    "floor_count": 5,
    "rent": 3000
  }
]

export default Apartments

Result

And our application will be:

P.S.

This is just the first article, in it I tried only to show how I work with google maps and react, in further articles there will be more logic and styling to get as close as possible to airbnb

Comments

[shopia432]

Set Up Your React Project: Start by creating a new React project or using an existing one. You can use tools like Create React App to set up your project quickly.

Install Google Maps API: Sign up for a Google Maps API key and install the necessary packages to integrate Google Maps into your React project. You can use the google-maps-react package, which provides a React wrapper vip restrooms for the Google Maps JavaScript API.

[Florian Vallen]

Great! Well done! Thanks for the repo, that really helped me