Weather page with map

I submitted this once before only to find it was broken.

It works. But I had to brute force it to get the weather underground API and the google maps API to work together.

the code is not elegant, but it does what I wanted.

the page is pretty self-explanatory.

either enter a location in the input, or click on the google map button and your geolocation is determined. If you choose the latter route, then click on the get weather button.

Please provide feedback.

Please note that if you do not load as an https website, it will not function.


Nice! Mixing AJAX calls and APIs is an absolutely critical skill, but it’s not easy to wrap your noodle around, so it’s good that you tackled it sooner rather than later. I also think it’s great that you use native geolocation (note that only Chrome blocks geolocation over non-secure connections). The most important feature to add now is error handling. As it is, if I reject the geolocation or it’s blocked by Chrome’s policy against insecure connections, the app fails silently. Users will wonder, “Is it loading? Is it broken? Is there something else I need to do?”. Luckily, you’re all set up to deal with broken geolocation - just add an else clause after if(navigator.geolocation).

well, thanks. you probably saw that I brute forced the code because on first call to the map api after a city, state is entered, the map renders with the ‘old’ city state.

I cannot figure out an elegant way to correct this. so instead, I brute force it by calling the map API twice. seems silly and inefficient, but everything I tried failed…

I tried a
setTimeout which had no effect
do-while which crashed chrome. it appears the do loop went on for infinity.

I tried to set up do loop to:

as long as current lattitude equals old lattitude, delay a little bit. but that do while never exited.

thanks for the feedback. If you have thoughts on a more elegant approach, I’d love to hear it.

I didn’t notice that. To be honest, it’s a bit difficult to read through your code. It seems counter intuitive, but comments make your programs less readable. Where in the code does this happen?

Your intuitions on this are entirely right. There are better ways to do this, and much of the new functionality we’re seeing in the next iterations of JavaScript (ES2015 & ES2016) deal with asynchronous data handling. Promises, generators, and observables are ways of making code flow together from different sources in ways that are easy to think about and read. However, we can still do a lot with our vanilla JavaScript, and when I have a better idea of what’s happening, I’ll show you a pattern or two that can alleviate some of this async pain.

look at the initMap function. It actually creates the map twice.