Question

这个确切的代码适用于以前的项目，但它现在不起作用。

地图没有显示，但是我在chrome检查工具中看到了JS显示。地图的div元素就是那样，只是没有可见的地图。我正在使用AFC，并且有三重检查拼写等。

以下代码：

<!--place google map here-->
                <div id="view1">
                    <?php
                        $location = get_field('store_location');

                        if( ! empty($location) ):
                        ?>
                            <div id="map" style="width: 100%; height: 350px;"></div>
                            <script src='http://maps.googleapis.com/maps/api/js?sensor=false' type='text/javascript'></script>

                            <script type="text/javascript">
                              //<![CDATA[
                                function load() {
                                var lat = <?php echo $location['lat']; ?>;
                                var lng = <?php echo $location['lng']; ?>;
                            // coordinates to latLng
                                var latlng = new google.maps.LatLng(lat, lng);
                            // map Options
                                var myOptions = {
                                zoom: 9,
                                center: latlng,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                               };
                            //draw a map
                                var map = new google.maps.Map(document.getElementById("map"), myOptions);
                                var marker = new google.maps.Marker({
                                position: map.getCenter(),
                                map: map
                               });
                            }
                            // call the function
                               load();
                            //]]>
                            </script>
                    <?php endif; ?> 

                </div>

看到有什么问题吗？

Answer 1

问题与flexbox和bootstrap有关。使用flexbox在整个网站上获得相同的列高，但这似乎打破了这张AFC谷歌地图。将地图放在bootstrap列之外，问题已解决。

Google地图未显示 - localhost

1 个答案: