Google maps not giving errors but not displaying

This is for a cherry framework project I’m doing and after working with the API Keys, im not recieving any errors on my console, but the map still refuses to show up. I’d appreciate any help in finding the error here. I’m just not seeing it.

<?php /* Static Name: Map */ ?>
<style type="text/css">
    /* Set a size for our map container, the Google Map will take up 100% of this container */
    #map {
        width: 100%;
        height: 391px;
    }
</style>
<script type="text/javascript">
    // When the window has finished loading create our google map below
    google.maps.event.addDomListener(window, 'load', init);

    function init() {

        // The latitude and longitude to center the map (always required)
        var myLatlng = new google.maps.LatLng(<?php echo of_get_option('latitude'); ?>, <?php echo of_get_option('longitude'); ?>);

        // Basic options for a simple Google Map
        // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
        var mapOptions = {
            // How zoomed in you want the map to start at (always required)
            zoom: <?php echo of_get_option('zoom'); ?>,

            scrollwheel: false,

            // The latitude and longitude to center the map (always required)
            center: myLatlng, // Santa Barbara

            // How you would like to style the map. 
            // This is where you would paste any style found on Snazzy Maps.
            styles: 
            [
    {
        "featureType": "water",
        "elementType": "all",
        "stylers": [
            {
                "hue": "#76aee3"
            },
            {
                "saturation": 38
            },
            {
                "lightness": -11
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "all",
        "stylers": [
            {
                "hue": "#8dc749"
            },
            {
                "saturation": -47
            },
            {
                "lightness": -17
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "poi.park",
        "elementType": "all",
        "stylers": [
            {
                "hue": "#c6e3a4"
            },
            {
                "saturation": 17
            },
            {
                "lightness": -2
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "all",
        "stylers": [
            {
                "hue": "#cccccc"
            },
            {
                "saturation": -100
            },
            {
                "lightness": 13
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "administrative.land_parcel",
        "elementType": "all",
        "stylers": [
            {
                "hue": "#5f5855"
            },
            {
                "saturation": 6
            },
            {
                "lightness": -31
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "all",
        "stylers": [
            {
                "hue": "#ffffff"
            },
            {
                "saturation": -100
            },
            {
                "lightness": 100
            },
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "all",
        "stylers": []
    }
]
        };

        // Create the Google Map using out element and options defined above
        var map = new google.maps.Map(document.getElementById('map'), mapOptions);

        var contentString = '<div id="content"><?php $desc = of_get_option("description"); echo str_replace(array("rn", "r", "n", "t", '  ', '    ', '    '), '', $desc); ?></div>';
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var image = '<?php echo get_stylesheet_directory_uri(); ?>/images/marker.png';

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            icon: image
        });

        // To add the marker to the map, call setMap();
        marker.setMap(map);

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
        });

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

Read more here: Google maps not giving errors but not displaying

Leave a Reply

Your email address will not be published. Required fields are marked *