Google 地图不会在前端显示

Question

我使用 google 地图制作了一个插件，它在我的 wordpress 网站的管理部分中运行得非常好。

当我制作短代码以在我的网站前端显示插件时，地图不是 working/loading/running 什么都没有。我的脚本工作正常，我没有控制台命令并且正在生成我的 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 设置高度和宽度属性以便它显示在 word press 的前端。

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

Google 地图不会在前端显示

Google maps wont display in front end

wordpress

google-maps