Google Map API - 'google' not defined - 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.

Did you inspect if are having any problems loading google api? Can you the link of google api script in your browser? Is this happening in your local machine or server? — Ricardo Pontual
– Ricardo Pontual, Commented Aug 4, 2015 at 14:04

Chris Pratt · Accepted Answer · 2015-08-04 14:07:20Z

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.

answered Aug 4, 2015 at 14:07

Chris Pratt

240k37 gold badges414 silver badges468 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paceman Over a year ago

"Also, watch your usage of SSL." - This was the problem. Thanks.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related