Issue configuring JavaScript Google Maps API on my server

I've developed an application in .net MVC, it uses Google Maps and retrives user's latitude and longitude and provides plants info. The application on my local pc i.e. Visual Studio localhost works perfectly.

I recently deployed the application to an online server where the map stopped showing up.

Here's the screenshot of my view and console window

Here's my MVC View Code

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAOwftJGF5aEhCpifN-pa4A8atYYW_oWMY"></script>

<script type="text/javascript">

    var lattt = "";
    var longg = "";
    var address = "";
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(p) {
            var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
            lattt = p.coords.latitude;
            longg = p.coords.longitude;
            var mapOptions = {
                center: LatLng,
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            var marker = new google.maps.Marker({
                position: LatLng,
                map: map,
                title: "<div style = 'height:60px;width:200px'><b>Your location:</b><br />Latitude: " + p.coords.latitude + "<br />Longitude: " + p.coords.longitude
            });
            google.maps.event.addListener(marker, "click", function(e) {
                var infoWindow = new google.maps.InfoWindow();
                infoWindow.setContent(marker.title);
                infoWindow.open(map, marker);
            });

            var latlng = new google.maps.LatLng(lattt, longg);
            var geocoder = geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'latLng': latlng }, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    if (results[1]) {
                        address = new String(results[1].formatted_address.toString());
                        $.ajax({
                            data: { latitude: lattt, longitude: longg, cityP: address },
                            url: '/User/GetCoords',
                            type: 'GET',
                            datatype: 'json',
                            success: function(response) {

                            }
                        });
                    }
                }
            });
        });
    } else {
        alert('Geo Location feature is not supported in this browser.');
    }
</script>

YES i added a reference of the View URL to the Google Developer console. Any sort of help would really be appreciated! Thank you