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

Unable to load google map while using jquery

本文关键字：加载 谷歌地图 jquery 使用      更新时间：2023-09-26

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

如何在同一页面中同时使用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>

用于包含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>。

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

此处为示例。

Everything Works Fine您刚刚错过了jquery脚本的Closed标记，即</script>。关闭脚本，它工作正常。

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

将此添加到您的代码中。

相关文章：