Google Maps API 给了我 net::ERR_ABORTED 400答案

【问题标题】：Google Maps API gives me net::ERR_ABORTED 400Google Maps API 给了我 net::ERR_ABORTED 400
【发布时间】：2019-05-25 20:23:54
【问题描述】：

我一直在尝试使用 google maps api (Maps Javascript API)。首先我制作了一个简单的html文件并制作了一个简单的地图，它工作。然后我用标记和折线做了一个更复杂的，它起作用了。

完成此操作后，我决定将其移动到我的 Web 应用程序中，问题是我的应用程序使用 xhtml，而不是 html。它仍然应该工作。但事实并非如此。

我已经阅读了很多论坛，但我似乎无法找到解决问题的方法。这是我在 html 文件中尝试的简单地图代码：

<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>My Test</title>
    <style>
        #map {
        height: 100%;
        }

        html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        function initialize() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8
            });
        }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MYAPI&callback=initialize">
    </script>
</body>

这是相同的信息，但在我的 .xhtml 文件中：（我的 xhtml 位于模板之上，这就是它没有任何头部信息的原因。）

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:p="http://primefaces.org/ui">
<p:dialog  header="#{msg['MAP']}" footer="#{msg['TOURSYS.FOOTER.TITLE']} | #{msg['TOURSYS.FOOTER.VERSION']} | #{msg['TOURSYS.FOOTER.LAST.MODIFICATION.DATE']}" widgetVar="mapDialog" modal="true"  height="auto" width="auto">
    <h:form id="mapForm">
        <html>
            <style>
                #map {
                    height: 100%;
                }

                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                }
            </style>
            <body>
                <div id="map"></div>

                <script>
                    function initialize() {
                        map = new google.maps.Map(document.getElementById('map'), {
                            center: {lat: -34.397, lng: 150.644},
                            zoom: 8
                        });
                    }

                </script>

                <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYAPI&amp;callback=initialize;"/>

            </body>
        </html>      
    </h:form>           
</p:dialog>

我的谷歌控制台弹出以下错误：

获取https://maps.googleapis.com/maps/api/js?key=MYAPI&callback=initialize;净::ERR_ABORTED 400

我的应用程序正在使用 Primefaces 6.2.7 的 maven 项目中运行

【问题讨论】：

标签： xml google-maps google-maps-api-3 xhtml

【解决方案1】：

您的 JS 调用的 src 中包含一个分号 (;)。

您的来电：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYAPI&amp;callback=initialize;"/>

应该是这样的：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MYAPI&amp;callback=initialize"/>

在这个小提琴上试试： http://jsfiddle.net/f74p69gz/

【讨论】：