Google Map API - 'google' not defined - MVC5 javascript

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://ift.tt/NF9SGx"></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.

via Chebli Mohamed