Question

我使用谷歌地图制作了一个插件，在我的wordpress网站的管理部分完全正常。

当我使用短代码在我网站的前端显示插件时，地图无法正常工作/正在加载/运行。我的脚本工作正常，我没有控制台命令，我的initmap地图标记正在生成（我检查了源代码和检查chrome上的元素）。但我的地图根本不会显示。

任何帮助，为什么这不在wordpress的前端工作将不胜感激。（再次 - 代码在管理员设置中正常工作，但使用短代码显示在前端时，地图不显示）

<html>
                        <head>
                            <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
                            <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
                            <title>Specialist information</title>
                            <script src="https://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
                            <script type="text/javascript">
                                //<![CDATA[
                                console.log("Start Script");
                                geocoder = new google.maps.Geocoder();
                                geocode="false";
                                //function for retrieving coordinates
                                function getCoordinates (address, callback){
                                    var coordinates;
                                    geocoder.geocode({address:address}, function (results, status){
                                        coords_obj= results[0].geometry.location;
                                        coordinates = [coords_obj.k,coords_obj.D];
                                        callback(coordinates);
                                    })
                                }


                                var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
                                    new google.maps.Size(32, 32), new google.maps.Point(0, 0),
                                    new google.maps.Point(16, 32));
                                var center = null;
                                var map = null;
                                var currentPopup;
                                var bounds = new google.maps.LatLngBounds();
                                function addMarker(lat, lng, info) {
                                    var pt = new google.maps.LatLng(lat, lng);
                                    bounds.extend(pt);
                                    var marker = new google.maps.Marker({
                                        position: pt,
                                        icon: icon,
                                        map: map
                                    });
                                    var popup = new google.maps.InfoWindow({
                                        content: info,
                                        maxWidth: 500

                                    });
                                    google.maps.event.addListener(marker, "click", function() {
                                        if (currentPopup != null) {
                                            currentPopup.close();
                                            currentPopup = null;
                                        }
                                        popup.open(map, marker);
                                        currentPopup = popup;
                                    });
                                    google.maps.event.addListener(popup, "closeclick", function() {
                                        map.panTo(center);
                                        currentPopup = null;
                                    });
                                }
                                function initMap() {
                                    //retrives coordinates from address - not the best practice but it works for now
                                    getCoordinates('<?php echo $paddress ?>', function(coords){

                                        // centers map based on coordinates of the address
                                        map = new google.maps.Map(document.getElementById("map"), {
                                            center: new google.maps.LatLng(coords[0], coords[1]),
                                            zoom: 9,
                                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                                            mapTypeControl: false,
                                            mapTypeControlOptions: {
                                                style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                                            },
                                            navigationControl: true,
                                            navigationControlOptions: {
                                                style: google.maps.NavigationControlStyle.SMALL
                                            }
                                        });
                                        // paitents Address marker
                                        var pmarker = new google.maps.Marker({position:new google.maps.LatLng(coords[0], coords[1]), title:"Paitents Address!"});
                                        pmarker.setMap(map);
                                        // adds markers on map from database based on specialist and insurance by lat and long
                                        <?php
                                        $query = "SELECT * FROM $specialist WHERE $insurance=1 AND is_active=1";
                                        $result = mysql_query($query);
                                        while ($row = @mysql_fetch_assoc($result)){
                                        $name=$row['provider'];
                                        $lat=$row['lat'];
                                        $lon=$row['lon'];
                                        $address=$row['address'];
                                        $phone = $row['phone'];
                                        $fax = $row['fax'];
                                        echo ("addMarker($lat, $lon,'<p><b>$name</b><br/>$address<br/>Phone:$phone<br/>Fax:$fax<br/></p>');\n");
                                        }
                                        ?>
                                        center = bounds.getCenter();

                                    })
                                }
                                //]]>
                                console.log("End Script");
                            </script>
                        </head>
                        <body onload="initMap()">
                        <div id="map"></div>

Answer 1

请尝试将以下代码放入HTML：

<div id="mapDiv">   
    </div>

代码为javascript，需要JQuery库到append：

var googleMap = '<div id="map"></div>';

// Calls the initializeMap() function when the page loads
window.addEventListener('load', initializeMap);

// Vanilla JS way to listen for resizing of the window
// and adjust map bounds
window.addEventListener('resize', function(e) {
  // Make sure the map bounds get updated on page resize
  map.fitBounds(mapBounds);
});

// show Map
$("#mapDiv").append(googleMap);

对于上述内容，我可以成功获得Google地图展示。

Answer 2

事实证明，我需要为我的div设置一个高度和宽度属性，以便它显示在单词按的前端。

这让我想到了我的下一个问题，为什么地图会自动填充单词后端管理端的高度/宽度属性，而不是用户的前端端？

谷歌地图不会显示在前端

2 个答案: