ReferenceError when loading google map

When loading the map in a page I get an [Error] ReferenceError: Can’t find variable: google global code (foundation.js, line 21)

I am not a code expert so if anyone could show me where the issue is it would be greatly appreciated. Thank you.

Here is the code:

JavaScript

function makeMap() {
    var snazzyMap = JSON.parse(wpGlobals.mapOptions);
    var map = new google.maps.Map(document.getElementById('map'), {
        center : new google.maps.LatLng(13.72638, 100.54029),
        zoom : 15,
        mapTypeId : google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        styles : snazzyMap
    });
    var marker = new google.maps.Marker({
        position : new google.maps.LatLng(13.72638, 100.54029)
    });
    marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', makeMap);

PHP

add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

function my_enqueue_scripts() {
    wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false', array(), null, true);
    wp_enqueue_script('script', get_stylesheet_directory_uri().'/js/foundation.js', array('google-maps'), null, true);
    wp_localize_script('script', 'wpGlobals', array(
        'mapOptions' = > file_get_contents(dirname(__FILE__).'/google_map_style.json')
        )
    );
}

JSON

[{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"color":"#b8d4a4"},{"visibility":"on"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"transit.station.rail","elementType":"labels.text","stylers":[{"visibility":"on"},{"gamma":"1"},{"lightness":"0"},{"saturation":"0"}]},{"featureType":"transit.station.rail","elementType":"labels.icon","stylers":[{"visibility":"on"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#8490c8"},{"visibility":"on"}]}]

CSS

#map {
    width: 580px;
    height: 250px;
}

HTML

<div id="map"></div>