無法在使用jquery時加載谷歌地圖

-3

如果我不在頭標記中包含jquery.min.js，則地圖加載成功。如果我包含它給我initMap：沒有這樣的方法錯誤。 如果我顛倒包含的順序：先映射然後jQuery，initMap方法永遠不會被回調，並且map不會被載入。如果我在document.ready中調用initMap，它會給我ReferenceError：google沒有定義。無法在使用jquery時加載谷歌地圖

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

來源

2016-05-09 Hamzah Jamal

在jQuery準備好之後嘗試加載google map api。

Example here。

來源

2016-05-09 03:49:49

一切正常，你就錯過了jQuery腳本即</script>的結束標記。關閉腳本，它工作正常。

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

將此添加到您的代碼中。

來源

2016-05-09 04:11:50

您正在使用包括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>。

來源

2016-05-09 04:13:35 geocodezip

無法在使用jquery時加載谷歌地圖

回答

相關問題