Google Maps not working when files are transferred to live hosting

I had developed a website from the SinglePro theme and everything looks fine on localhost. However, when I had transferred the files to the live hosting, the Google Maps suddenly stopped working:

Google Maps error

I had looked at the console and I had seen error like this:

"Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/
error-messages#missing-key-map-error" js:40:473
"Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/
error-messages#no-api-keys" util.js:228:12
"Google Maps API warning: InvalidKey https://developers.google.com/maps/documentation/javascript/
error-messages#invalid-key"

The solution is you need to provide an API Key from Google Maps to make it work. Find this javascript include line at the footer section:

https://maps.googleapis.com/maps/api/js

Then add a Google Maps API Key parameter in it.

https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY_HERE]

Visit this page https://developers.google.com/maps/documentation/javascript/get-api-key to obtain an API key.