Google Maps No Roads in BS Modal

Google Maps is one of the sweetest tools I have ever got to use. I loved it since our first date 7 years ago as an engineering student. But since, my involvement has been minimal. I had the pleasure to play with Google Maps yesterday. This time it also involved Google Street View. This is about a problem that bugged me for a few minutes.

Summary

Make sure you run the map init on the modal show.

# Waiting for the modal to show. If it is not a modal
# then make sure to watch for the completion of the
# element rendering.
modal.on 'shown.bs.modal', ->
  center = new google.maps.LatLang(lat, lng)
  map = new google.maps.Map document.getElementById('map'),
    center: center,
    zoom: 12
  street = new google.maps.StreetViewPanorama
  # rest of the code

I had done some thing like this…

$('[data-trigger="street-view-modal"]').on 'click', ->
  # code before

  modal.show()

  # Note that the modal will not show immediately. Instead
  # we should use the 'shown.modal.bs' event to init the
  # Google map.

  center = new google.maps.LatLang(lat, lng)
  map = new google.maps.Map document.getElementById('map'),
    center: center,
    zoom: 12

  # rest of the code

TL;DR

Background

I had a table with a Google Street View image on display of locations of interest. The admin will click on the image and it will open a Bootstrap modal with the Google Street View and Google Maps pared. The user will use the map to position the user and street view will be used to get POV heading and POV pitch. Given we know the latitude and longitude we can generate an image which we use temporarily.

Symptoms

The Google map was firing, but

Problem

I had one modal in a list view. When a link is clicked I will show the modal + init the map in the same go. The map should be initialized once the dom is ready.

Once I used the event for the modal shown and initialized the map only then it worked as expected.

Hoping this post was of help, happy hacking!