Weather App using google API

Weather App using google API
0

#1

I have tried to use google api, weather api and newly learned promised function within the WEATHER APP project but I think I have made a little mess, as it randomly shows bunch of errors in the console.

Kindly give a feedback on the js codes and help me to grow > :wink:


#2

First of all, you should be not be setting async to false. Take advantage of the asynchronous nature of the $.ajax function.

Second, because you are using Codepen, instead of putting the following in your HTML section,

<!-- <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCatkL2sjagp4vnMSloyWF0VOrMvr8QlaM&callback=initMap"
        type="text/javascript"></script>
 -->

put the following url below jQuery in your JS external files section of the JS settings.

https://maps.googleapis.com/maps/api/js?key=AIzaSyCatkL2sjagp4vnMSloyWF0VOrMvr8QlaM&callback=initMap

Lastly, your conversion from Celsius to Fahrenheit is not correct.


#3

Thank you for your valuable feedback; I have fixed all that you mentioned above.

I am getting an error in console "Uncaught InvalidValueError: initMap is not a function ", can you advise me something on that?


#4

It took me a bit to figure out the best combination to work on Codepen, but I was able to get it to work with no console errors by removing jQuery and google api from the JS external files section of the JS Settings and putting the following code right above the body tag in the HTML as follows:

<head>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCatkL2sjagp4vnMSloyWF0VOrMvr8QlaM&callback=initMap"
        type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head> 
<body>

#5

Perfect!!!
Is there anything more you think I should focus to make a good product? :face_with_raised_eyebrow: