JQuery 和 Google Maps JS api 不能一起工作答案

【问题标题】：JQuery and Google Maps JS api not working togetherJQuery 和 Google Maps JS api 不能一起工作
【发布时间】：2012-09-03 18:57:38
【问题描述】：

我真的很难在同一块中同时使用 Google Maps API 和 JQuery API。我的页面是 jspx (Spring)，我需要 JQuery 以便获取和解析 google 融合表数据。

但是，当我将两个库一起声明时，地图 div 将不会加载（如果我单独加载 Google 地图，则所有地图都可以正常工作）。

以下是相关代码：

<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"/>
                    <script src="http://maps.googleapis.com/maps/api/js?v=3key=MYKEY&amp;sensor=false" type="text/javascript">
                        <jsp:text/>
                    </script>
                    <script type="text/javascript">
        //<![CDATA[ 
            var map;

function initialize() {
         var mapDiv = document.getElementById('map_canvas');
         var geocoder = new google.maps.Geocoder();
         retrieveDeprivationFigure();
          if (geocoder) {
             geocoder.geocode({ 'address': '${property.postcode}' }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {

                var latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng())
                var mapOptions = {
                    zoom: 15,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                  };

                map = new google.maps.Map(document.getElementById('map_canvas'),
                        mapOptions); 
}

        function retrieveDeprivationFigure(){
                var postcode = '${property.postcode}'.split(' ').join('');
                var url = "https://www.googleapis.com/fusiontables/v1/query?sql=SELECT LSOA FROM XXXXXXXX WHERE Postcode='"+ postcode +"'&key=AIzaSyBQaHw1aSWtIjQzAiriBPC3hvm7Bs1R35U&jsonCallback=?";
                var localIMDS;
                console.log("this far");
                $.getJSON(url,
                        function retrieveIMDS(){
                    console.log(url);

                });
         };

  google.maps.event.addDomListener(window, 'load', initialize);   
         // ]]>
</script>

任何指针或想法都会对我有很大帮助，我什至尝试在单独的 JS 块中通过 JQuery 检索剥夺统计信息，但是尽管我努力了，但在页面加载时并未调用该函数。

【问题讨论】：

检查您的控制台是否有错误，并尝试将其放入fiddle ...
@adeneo 我在控制台中检查了错误，它显示“未捕获的 ReferenceError：google 未定义”并指向“google.maps.event.addDomListener(window, 'load' ，初始化）..我还通过小提琴运行我的代码，它说我的javascript都是有效的..
一个正常工作的 jsfiddle 会让我们知道为什么你会得到这个错误。 api 中的“”包含标签是什么？
老实说，我不记得为什么我把它放在那里了，但是没有它，工作就更少了：l
我更改了两个 api 调用的顺序，但是现在我收到错误“Uncaught ReferenceError: $ is not defined”

标签： jquery google-maps-api-3 spring-roo google-fusion-tables

【解决方案1】：

您缺少第一个脚本的结束标记包括：

<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"/>
<script src="http://maps.googleapis.com/maps/api/js?v=3key=MYKEY&amp;sensor=false" type="text/javascript">
                    <jsp:text/>
                </script>

应该是：

<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript" ></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>

（任何一个命令都应该可以工作，并且应该在没有版本规范和 &key=MYKEY 的情况下也可以工作，只是注意到您在 key=MYKEY 之前也缺少 &）

【讨论】：

【解决方案2】：

感谢各位的指导，但我设法通过创建一个头并在头文件中声明 jQuery 并将 google src 留在原处来解决冲突和问题。

 <head>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
 <script type="text/javascript">

 </script>
 </head>

再次感谢！

【讨论】：