javascript - Google Maps wont work under Mobile Mode of Google Chrome

Question

The problem is that Google Map does not opening under Google Chrome of Android device (updated to last version).

Under the PC version of Google Chrome it works like a sharm.

The code is a standart map snippet to display a map's marker. So under the mobile Google Chrome I see a blank screen.

But it works when I turn on Google Chrome to the PC mode.

What do I missi to config Google Maps to work under Mobile Mode of Google Chrome?

function initMap() {
       map = new google.maps.Map(document.getElementById('map'), {
            zoom: initialZoom,
            center: locCompany,
            streetViewControl: false, 
            mapTypeId: google.maps.MapTypeId.HYBRID,
        });

        var marker = new google.maps.Marker({
            position: locCompany,
            map: map,

            icon: '@Url.Content("~/Images/logo.png")'
        });

          map.setZoom(initialZoom);
    }

Please, help!

标签： javascriptasp.net-mvcgoogle-mapsgoogle-chrome

Answer 1

Finally I could solve this issue.

I relocated

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

into end of body tag of Layout page.

And in the map page I put initMap function into header like

@section head{
    <style>
        #map {
            height: 70vh !important;
        } 
    </style>
    <script>
         function initMap() {

            map = new google.maps.Map(document.getElementById('map'), {
                zoom: initialZoom,
                center: locCompany,
                  streetViewControl: false,

                mapTypeId: google.maps.MapTypeId.HYBRID,
                gestureHandling: 'greedy',
                 zoomControlOptions: {
                        style: google.maps.ZoomControlStyle.SMALL,
                        position: google.maps.ControlPosition.RIGHT_TOP
                }
            });

            var marker = new google.maps.Marker({
                position: locCompany,
                map: map,
                icon: '@Url.Content("~/Images/logo.png")'
            });
            map.setZoom(initialZoom);
        }
    </script>
}