Trying to embed map using the Google Maps API (Not showing up/Gray area)

Question

I'm trying to embed a map with a custom marker (as can be shown in the script below) onto my site that I've just created. I'm sure that the API key that I've used is the same one that I have in my API console. The issue seems to be that an inline style of overflow: hidden and position: relative seem to be assigned even though I've tried overwriting them by using !important (which I shouldn't be doing) and adding inline styles (which I also shouldn't be doing).

The website I'm working on just in case anyone would like to check the console is www.jfupholstery.org

Has anyone come across this issue and figured a way around it?

This is the script I'm using in my header

<script type="text/javascript">
            // When the window has finished loading create our google map below
            google.maps.event.addDomListener(window, 'load', init);
            google.maps.event.trigger("#map", 'resize');

            //Initializing Map
            function init() {
                // 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: 12,
                    gestureHandling: 'cooperative',
                    // The latitude and longitude to center the map (always required)
                    center: new google.maps.LatLng(35.904899, 14.431764), // Malta


                    styles: [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
                };

                var mapElement = document.getElementById('map');

                // Create the Google Map using our element and options defined above
                var map = new google.maps.Map(mapElement, mapOptions);

                // Let's also add a marker while we're at it
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(35.904899, 14.431764),
                    map: map,
                    icon: "<?php echo get_template_directory_uri(); ?>/assets/images/Location.svg"
                });

            }
      </script>

Welcome to the Treehouse Community

Looking to learn something new?

Justin Farrugia

Justin Farrugia

Trying to embed map using the Google Maps API (Not showing up/Gray area)