Question

如果我在head标记中不包含jquery.min.js，则成功映射加载。如果我包含它给我 initMap：没有这样的方法错误。 如果我颠倒包含的顺序：首先映射然后jquery，initMap方法永远不会被回调并且map不会被加载。如果我在document.ready中调用initMap，它会给我ReferenceError：google未定义。

如何在同一页面中使用Maps和jquery。

<!DOCTYPE html>
<html>
<head>
<title>maps test</title>
<style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
}
</style>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"/>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEn8E0rL_XdVl2WDLAwgjpM62AM2QoRXI&v=3.exp&sensor=false&libraries=places&callback=initMap"
    async defer></script>       

</head>

<body>${message}<br>
    <input id="location" type="text" value="Enter your location"/><br>  
     <select id="activity" value=" activity">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select> 
    <div id="map"></div>    
    <script>
        var map;
    var autocomplete;
    var globalData;
    $(document).ready(function(){
            initMap();
    });
        function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
        initialize();
    }
    function initialize() {
              autocomplete = new google.maps.places.Autocomplete(
                  /** @type {HTMLInputElement} */(document.getElementById('location')),
                  { types: ['geocode'] });
              google.maps.event.addListener(autocomplete, 'place_changed', loadMarkers);
        }
    function loadMarkers(){
        var place = autocomplete.getPlace();
        var loc = place.geometry.location;
        var address = place.address_components;
        $.ajax({
          type: "POST",
          dataType: "json",
          data: {loc : loc, address : address},
          url: '/getmarkers.do',
          success: function(data) {
            globalData = data;
                // get array of latlng
            // create marker

          }
        });
    }
    </script>

</body>
</html>

Answer 1

您用于包含JQuery的脚本标记不正确：

这：

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"/>
 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEn8E0rL_XdVl2WDLAwgjpM62AM2QoRXI&v=3.exp&sensor=false&libraries=places&callback=initMap"
async defer></script>

应该是（注意/>更改为></script>：

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEn8E0rL_XdVl2WDLAwgjpM62AM2QoRXI&v=3.exp&sensor=false&libraries=places&callback=initMap"
async defer></script>

脚本代码必须为<script></script>。

Answer 2

在google map api准备就绪后尝试加载jQuery。

Example here

Answer 3

一切正常你只是错过了 jquery脚本 的结束标记，即</script>。关闭脚本，它工作正常。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"/></script>

将此添加到您的代码中。

使用jquery时无法加载谷歌地图

3 个答案: