search

Code4HR / hrt-bus-finder

Web app for the HRT bus API, GitHub Pages, @bschoenfeld and @wbprice
hrtb.us
16 stars 33 forks source link

Fix map tile issue #217

Open bschoenfeld opened 5 years ago

bschoenfeld commented 5 years ago

Map tiles aren't loading the first time you open the map view on any stop on the home page. Through playing around in the console, I discovered that showing the mapcanvas at different times, or even just pausing execution with a break point seems to fix the problem. I suppose it's an issue with timing of the DOM rendering. This isn't an elegant solution, but it seems to fix the issue. Open to better ideas.

qwo commented 5 years ago

setTimeout(func, 250) lgtm

kmcurry commented 5 years ago

Is async defer appropriate?

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=BLRRRRRRGGGHHH&callback=initialize" async defer>

kmcurry commented 5 years ago

And did you try waiting inside $( document ).ready()

bschoenfeld commented 5 years ago

I'd be surprised if it's a problem with the document being ready, scripts loaded in, etc because we don't try to show the map on page load. You can wait as long as you'd like before clicking the button to show the map and you'll still experience the problem.

What happens when you click the button to see the map is we generate a view with a google map in it, shove it into a div tag and invoke the resize command. So it feels like a timing thing where the view isn't actually rendered quite right when the resize is invoked, causing google maps to think it doesn't need to render the tiles.

But I can't really figure it out... and it was all working for a while and then it broke without us changing anything, so I guess maybe something changed in the google maps js?

ryayak1460 commented 5 years ago

Google Maps JS change sounds like the likely culprit.