Make Google Maps non blocking

[JeremieLitzler]

Blog post: https://medium.com/@nikjohn/speed-up-google-maps-and-everything-else-with-async-defer-7b9814efb2b

Options

Consider the following options:

1. Using a static map
2. Hidding the maps by default and show on request (remark: but then how to deal with the desktop layout where the map is on the left / right ?)

Solution for option 2

• [x] 1. on smartphone:
  • [x] 1. Index page:
  • [x] 1. show a button "View the map" to display (lazyloading) the map in the place of the map (inside the same container).
  • [x] 2. When clicked, we need to show a "Hide maps" button before the Filter button.
  • [x] 2. Restaurant page:
  • [x] 1. show a button "View the map" to display (lazyloading) the map in the place of the map (inside the same container).
  • [x] 2. When clicked, we need to show a "Hide maps" button after the "View Reviews" button.
• [x] 2. on tablet:
  • [x] 1. Index page:
  • [x] 1. identical to smartphone up to 650px breakpoint.
  • [x] 2. identical to desktop from 650px breakpoint.
  • [x] 2. Restaurant page:
  • [x] 1. identical to smartphone up to 650px breakpoint.
  • [x] 2. identical to desktop from 650px breakpoint.
• [ ] 3. on desktop:
  • [ ] 1. Index page:
  • [x] 1. show a button "View the map" in the place of the map (inside the same container).
  • [ ] 2. The button "View the map" is centered
  • [x] 3. When clicked, we need to show a "Hide maps" button after the "View Reviews" button.
  • [x] 2. Restaurant page:
  • [x] 1. show a button "View the map" in the place of the map (inside the same container).
  • [ ] 2. The button "View the map" is centered
  • [x] 3. When clicked, we need to show a "Hide maps" button after the "View Reviews" button.

[JeremieLitzler]

Solution for option 1

Use the Static map api to load an image of the area.

The static map api url is something like:

var staticApi = `https://maps.googleapis.com/maps/api/staticmap?center=40.7125844,-73.9713328&zoom=12&size=320x240&key=API_KEY`

API Key for Static API: AIzaSyB8mGRExPGJ5-h6QjBu1-MsUoAm4kWKaqY

• [ ] 1. on smartphone:
  • [ ] 1. Index page:
  • [ ] 1. On initial load, the map is static
  • [ ] 2. The static map has the markers
  • [ ] 3. When clicked, we need to show the full dynamic and includes the markers.
  • [ ] 2. Restaurant page:
  • [ ] 1. On initial load, the map is static
  • [ ] 2. The static map has the marker
  • [ ] 3. When clicked, we need to show the full dynamic and includes the marker.
• [ ] 2. on tablet:
  • [ ] 1. Index page:
  • [ ] 1. identical to smartphone up to 650px breakpoint.
  • [ ] 2. identical to desktop from 650px breakpoint.
  • [ ] 2. Restaurant page:
  • [ ] 1. identical to smartphone up to 650px breakpoint.
  • [ ] 2. identical to desktop from 650px breakpoint.
• [ ] 3. on desktop:
  • [ ] 1. Index page:
  • [ ] 1. The static map uses 2x images.
  • [ ] 2. The static map is adapted to the viewport.
  • [ ] 3. On initial load, the map is static
  • [ ] 4. The static map has the markers
  • [ ] 5. When clicked, we need to show the full dynamic and includes the markers.
  • [ ] 2. Restaurant page:
  • [ ] 1. The static map uses 2x images.
  • [ ] 2. The static map is adapted to the viewport.
  • [ ] 3. On initial load, the map is static
  • [ ] 4. The static map has the marker
  • [ ] 5. When clicked, we need to show the full dynamic and includes the marker.