This caused me many hours of frustration.
If you still want to use the Geolocation API instead of using the IP tracking sites it was recommended to me by another user to use the CrossOrigin CORS Proxy.
This Proxy allows you to successfully share data between HTTP and HTTPS sites.
Append the CrossOrigin URL before your weather API url.
Also, when using CodePen, ensure you are accessing it via HTTPS://
Hope this helps!