自定义标记不出现 - Google Maps JavaScript答案

【问题标题】：Custom Markers does not appear - Google Maps JavaScript自定义标记不出现 - Google Maps JavaScript
【发布时间】：2018-02-04 16:12:05
【问题描述】：

您好，我正在尝试使用 KML 图标创建自定义标记，谷歌地图工作正常，但不显示自定义标记。我目前正在使用从 Google Map API 文档中学到的知识，我在哪里出错了？

这是我的代码。

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBSTRDm6eRdkpoVOB2VJVJgTCNgmcuDcq0&callback=initMap">
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script type="text/javascript">
        function initmap() {
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 16,
                center: new google.maps.LatLng(14.529133, 121.021747),
                mapTypeId: 'roadmap'
            });

            var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
            var testIcon = 'http://maps.google.com/mapfiles/kml/paddle/';

            var icons = {

                evac: {
                    icon: iconBase + 'ranger_station.png'
                },

                warehouse: {
                    icon: iconBase + 'truckpng'
                }
            };

            var features = [
                {
                    position: new google.maps.LatLng(14.529133, 121.021747),
                    type: 'evac'
                }
            ];

            features.forEach(function(feature) {
                var marker = new google.maps.Marker({
                    position: feature.position,
                    icon: icons[feature.type].icon,
                    map: map
                });
            });
        }
    </script>
    </head>

    <body onload="initmap()">
    <div id="map_canvas" style="width: 1100px; height: 1000px"></div>
    </body>

【问题讨论】：

The posted code works for me (fiddle)
是的，它在小提琴上工作得很好，但我不知道为什么它没有出现在索引页面上。
您多次包含谷歌地图 API。（我在 javascript 控制台中收到此警告：You have included the Google Maps API multiple times on this page. This may cause unexpected errors.）
在我的小提琴中？还是在您的代码中？你在truckpng 中有错字。如果它在您的代码中，您将需要提供一个 minimal reproducible example 来实际显示您的问题。
贴出的代码中没有id="map"的div...

标签： javascript php google-maps google-maps-api-3

【解决方案1】：

回调函数initmap与脚本initMap调用的回调函数不一样，地图ID引用错误。

<html>
    <head>
        <title>Google maps - KML Icons</title>
        <script>
            function initMap() {
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                    zoom: 16,
                    center: new google.maps.LatLng(14.529133, 121.021747),
                    mapTypeId: 'roadmap'
                });

                var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
                var testIcon = 'http://maps.google.com/mapfiles/kml/paddle/';

                var icons = {
                    evac: {
                        icon: iconBase + 'ranger_station.png'
                    },
                    warehouse: {
                        icon: iconBase + 'truckpng'
                    }
                };

                var features = [
                    {
                        position: new google.maps.LatLng(14.529133, 121.021747),
                        type: 'evac'
                    }
                ];

                features.forEach(function(feature) {
                    var marker = new google.maps.Marker({
                        position: feature.position,
                        icon: icons[feature.type].icon,
                        map: map
                    });
                });
            }
        </script>
        <script async defer src='//maps.googleapis.com/maps/api/js?key=AIzaSyBSTRDm6eRdkpoVOB2VJVJgTCNgmcuDcq0&callback=initMap'></script>
    </head>

    <body>
        <div id='map_canvas' style='width: 1100px; height: 1000px'></div>
    </body>
</html>

【讨论】：

你对 initmap 函数进行了两次调用 - 一个在主体上有效，另一个作为脚本标签中的回调无效