Issue configuring JavaScript Google Maps API on my server

Question

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

Answer 1

Well i found a work around to the issue. Google requires you to have https if you're to use functions such as getCurrentPosition() etc.

So to have google maps on your site, you can use this option

https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

and get the user lat long based on the marker location.

Answer 2

Use https instead of http to load Google Maps API and also give a maps version as http request parameter.

By default Google Maps SDK loaded is the development version. Prefer de stable version in your application.