Reputation: 21

Google Maps API not showing until resized or scrolled

I'm trying to implement a custom GoogleMap on my Adobe Muse site. I don't want to use the simple embedded map since I want the map to have a specific look. Therefore I styled it using Snazzy Maps.

The problem is that the map only shows up after the window is resized or the page is scrolled down (on mobile).

I tried to do everything the Google Maps documentation tells us to do and I've read a lot of other peoples problems, but it didn't work out in the end.

To be honest: I don't know exactly what I am doing since I just started to work with those kind of things.

Any help would be much appreciated! Thanks!

That's what my code looks like at the moment (note: I do have an API Key, I just took it out):

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
<style> 
#map {
    height: 389px;
}
</style> 
  </head>

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

    <script>
        var map
        function initMap() {
        var company = {lat: 49.7929423, lng: 9.930044800000019};


        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 49.7929423, lng: 9.930044800000019},            
            zoom: 12,
            mapTypeControl: false,
            streetViewControl: false,
            fullScreenControl: false,
            scrollwheel: false,
            styles: [
                {
                    "featureType": "administrative",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#444444"
                        }
                    ]
                },
                {
                    "featureType": "landscape",
                    "elementType": "all",
                    "stylers": [
                        {
                            "saturation": "-0"
                        },
                        {
                            "lightness": "0"
                        }
                    ]
                },
                {
                    "featureType": "landscape",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "visibility": "on"
                        }
                    ]
                },
                {
                    "featureType": "landscape",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#f2f2f2"
                        }
                    ]
                },
                {
                    "featureType": "landscape",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "gamma": "1.40"
                        },
                        {
                            "weight": "1"
                        },
                        {
                            "color": "#dcdcdc"
                        },
                        {
                            "visibility": "on"
                        }
                    ]
                },
                {
                    "featureType": "landscape.man_made",
                    "elementType": "all",
                    "stylers": [
                        {
                            "saturation": "-60"
                        }
                    ]
                },
                {
                    "featureType": "landscape.man_made",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "gamma": "1.0"
                        }
                    ]
                },
                {
                    "featureType": "landscape.natural",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "gamma": "1.00"
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "all",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "poi.park",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "visibility": "simplified"
                        }
                    ]
                },
                {
                    "featureType": "poi.place_of_worship",
                    "elementType": "all",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "poi.place_of_worship",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "visibility": "on"
                        }
                    ]
                },
                {
                    "featureType": "poi.place_of_worship",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#dcdcdc"
                        }
                    ]
                },
                {
                    "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": "water",
                    "elementType": "all",
                    "stylers": [
                        {
                            "color": "#8ecde8"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "labels",
                    "stylers": [
                        {
                            "visibility": "on"
                        },
                        {
                            "color": "#ffffff"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "labels.text",
                    "stylers": [
                        {
                            "visibility": "on"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "visibility": "on"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "labels.text.stroke",
                    "stylers": [
                        {
                            "visibility": "on"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "labels.icon",
                    "stylers": [
                        {
                            "visibility": "on"
                        }
                    ]
                }
            ]
        });


       var contentString = '<div id="content">'+
            '<div id="siteNotice">'+
            '</div>'+
            '<h1 id="firstHeading" class="firstHeading"><b>LOREM IPSUM</b></h1>'+
            '<div id="bodyContent">'+
            '<p>Street 12 <br>'+
            '12345 City <br>'+
            'country <br><br></p>'+
            '<p>Telefon: +12345 / 67890</p>'+
            '<p>E-Mail: <a href="mailto:[email protected]"><b>[email protected]</b></a></p><br>'+
            '<a href="https://www.google.de/maps/dir//New+York+City,+New+York,+USA/@43.8418941,-49.971677,4z/data=!4m8!4m7!1m0!1m5!1m1!1s0x89c24fa5d33f083b:0xc80b8f06e177fe62!2m2!1d-74.0059413!2d40.7127837" target="_blank"><b>Directions</b>'+
            '</div>'+
            '</div>';


        var infowindow = new google.maps.InfoWindow({
            content: contentString,
            maxWidth: 400
        });


        var image = {
            url: 'http://www.example.com/marker-me.png',
            scaledSize : new google.maps.Size(46, 60),
            }; 


       var marker = new google.maps.Marker({
           animation: google.maps.Animation.DROP,          
           position: company,
           map: map,
           icon: image,
           title: 'company'
        });
          marker.addListener('click', function() {
          infowindow.open(map, marker);
        });

        var center;
        function calculateCenter() {
          center = map.getCenter();
        }
        google.maps.event.addDomListener(map, 'idle', function() {
          calculateCenter();
        });
        google.maps.event.addDomListener(window, 'resize', function() {
          map.setCenter(center);
        });

       }

  </script>

<script src="https://maps.googleapis.com/maps/api/js?key=xxx&callback=initMap" async defer>
</script>
  </body>
</html>

Upvotes: 1