Building a rentals website

It's time to show what we can accomplish with these tools! It seems like the most popular examples are Airbnb-like interfaces – a list of data on one side and a map visualising it on the other side. Heck, even the ember guides create a rentals website! This example showcases a large chunk of the power of this addon and how it can positively affect a developer's productivity and the quality of the their code.

Keep in mind this is just a visual example. Let's simulate fetching a geo-bound AJAX query from a BE server by filtering an array of random locations as you pan the map. Let's also attach some mouseover effects!

Tip You might want to view this demo on a device with a larger screen.

View rentals example ›
Breakdown of the demo

Let's quickly discuss what is happening in the demo. You can view the code for the entire demo in the repo, but most of the work is happening in the template.

  1. We set the center of the map and the zoom level in the first line.
  2. We then set a bunch of map options: we modify the look of the map tiles with styles, disable the scroll wheel to force the feed to scroll down instead, and mess around with the map controls to achieve a minimalist look.
  3. We use onLoad and onBoundsChanged events to fetch the current map bounds. We use these bounds to filter the random array of markers on the map. This filtered array is called boundedLondonLocations. This simulates loading external data when panning or zooming the map.
  4. We use the {{each}} helper to loop over the locations and display an overlay with custom content at the given location coordinates. Inside the overlay, we render a custom, styled tooltip div, containing the price of the rental.
  5. The onMouseover and onMouseleave events modify the active property on the rental, which lets us animate the tooltip and the card in the feed. Finally, the onClick event receives the clicked rental and scrolls to its card in the feed.

{{#g-map lat=london.lat lng=london.lng zoom=12
  styles=primaryMapStyle
  classNames="ember-google-map-cover"
  scrollwheel=false
  gestureHandling="greedy"
  disableDefaultUI=true
  zoomControl=true
  zoomControlOptions=(hash
    position=google.maps.ControlPosition.TOP_LEFT)
  fullscreenControl=true
  onLoad=(action "saveBounds")
  onBoundsChanged=(action "saveBounds") as |g|}}
  {{#each boundedLondonLocations as |l|}}
    {{#g.overlay lat=l.lat lng=l.lng
      onClick=(action "scrollToListing" l)
      onMouseover=(action (mut l.active) true)
      onMouseleave=(action (mut l.active) false)}}
      <div class="tooltip {{if l.active "active"}}">
        £{{l.price}}
      </div>
    {{/g.overlay}}
  {{/each}}
{{/g-map}}
Leave your feedback on GitHub

That's it, folks. This demo took just a few minutes to create. It would have taken less time, but, alas, my typing speed is nothing to be proud of! 🤣

If you liked this addon, leave a ⭐ on GitHub – it helps out immensely. If you have questions, concerns, problems, issues, debatable topics – use the issue/PR tracker.