Question

我正在尝试在Adobe Muse网站上实现自定义GoogleMap。我不想使用简单的嵌入式地图，因为我希望地图具有特定的外观。因此我用Snazzy Maps设计它。

问题是地图仅在调整窗口大小或页面向下滚动（在移动设备上）后显示。

我试图完成谷歌地图文档告诉我们要做的所有事情，并且我已经阅读了很多其他人的问题，但它最终没有成功。

老实说：自从我开始处理这类事以来，我并不确切知道自己在做什么。

任何帮助将不胜感激！谢谢！

这就是我的代码目前的样子（注意：我确实有一个API密钥，我刚把它拿出来）：

<!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:info@mail.com"><b>info@mail.com</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>

Answer 1

它工作正常，可能是您正在使用的移动浏览器的问题。提到浏览器类型/版本。

Answer 2

更改google api参数中的缩放级别，目前您提到缩放：12

在调整大小或滚动之前，Google Maps API不会显示

2 个答案: