Google Map API-未定义“ google”-MVC5 javascript

Question

I get JavaScript "google is undefined" error.

I apologize if this question is similar to this but I am using it in a different setting, so this may be an MVC issue.

I use MCV5 website standard template and I put in the head of _layout.chtml main template:

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

This code goes into one of the views, for the account/index action:

<div id="map_canvas"></div>
<span id="result"></span>
<script>
    var map = null;
    var markersArray = [];

    function initialize() {

        var latlng = new google.maps.LatLng(13.73868, 1.07143);

        var settings = {
            zoom: 14,
            center: latlng,
            mapTypeControl: true,
            scaleControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
            },
            navigationControl: true,
            navigationControlOptions: {
                style: google.maps.NavigationControlStyle.DEFAULT
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            backgroundColor: 'white'
        };

        map = new google.maps.Map(document.getElementById('map_canvas'), settings);
        google.maps.event.addListener(map, 'click', function (event) {
            document.getElementById('result').innerHTML = 'Lat: ' + event.latLng.lat() + ' Lng: ' + event.latLng.lng();
        });
    }

    window.onload = initialize;

</script>

Somehow the linked google js file does not seem to load by the time function initialize() runs and I get JavaScript "google is undefined" error in the first line of initialize() function.

Thanks for your help.

Answer 1

The only real point where MVC could be an issue is in the loading of your layout. Have you inspected the page source to ensure that the Google Maps API script is actually on the page? If it's not, then you just need to figure out why your view isn't utilizing the layout you think it should be.

If it is on page, then open the link to the JS file and ensure that it loads properly. Especially if you on a corporate network, sometimes firewalls or other security software may prevent certain scripts from loading properly. You'll need to work with your Infrastructure department if that's the case.

Also, watch your usage of SSL. If you're using SSL for the site you're loading this on, then this script won't load because it's coming over HTTP, not HTTPS. In general, it's always better to use the HTTPS version of external resources, as that should work whether your site is running on HTTPS or HTTP. Also, you can just make the URL protocol relative:

<script src="//maps.google.com/maps/api/js?sensor=false"></script>

Assuming it's not one of those annoying instances where the third-party uses an entirely different domain for SSL, it will then request either HTTP or HTTPS depending on what your site is using.