JQuery и Google Maps JS api не работят заедно

Наистина съм блокиран, опитвайки се да използвам както API на Google Карти, така и API на JQuery в един и същи блок. Страницата ми е jspx (Spring) и имам нужда от JQuery, за да мога да получа и анализирам данни от google fusion table.

Въпреки това, когато декларирам двете библиотеки заедно, map div няма да се зареди (ако заредя само Google Maps, цялото картографиране работи добре).

Ето съответния код:

<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>

Всички указания или идеи биха ми помогнали много, дори се опитах да извлека статистиката за лишаване чрез JQuery в отделен JS блок, но въпреки усилията ми функцията не беше извикана при зареждане на страницата.


jquery google-maps-api-3 spring-roo google-fusion-tables
person Stephen Leake    schedule 03.09.2012    source източник
comment
Проверете конзолата си за грешки и опитайте да вкарате това в цигулка ...   -  person adeneo    schedule 03.09.2012
comment
@adeneo Проверих за грешки в конзолата и се казва Uncaught ReferenceError: google не е дефиниран и сочи към реда google.maps.event.addDomListener(window, 'load', initialize).. Също така прокарах кода си през fiddle и каза, че целият ми javascript е валиден..   -  person Stephen Leake    schedule 03.09.2012
comment
Работещ jsfiddle ще ни позволи да видим защо получавате тази грешка. За какво е „‹jsp:text/›“ в маркерите за включване на API?   -  person geocodezip    schedule 03.09.2012
comment
Честно казано, не мога да си спомня защо го сложих там, но без него дори по-малко работи :l   -  person Stephen Leake    schedule 03.09.2012
comment
Промених реда на двете API извиквания, но сега получавам грешката Uncaught ReferenceError: $ не е дефинирано   -  person Stephen Leake    schedule 03.09.2012

Отговори (2)


arrow_upward
2
arrow_downward

Липсва ви затварящият етикет за първия скрипт, включващ:

<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>

should be:

<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)

person geocodezip    schedule 03.09.2012

arrow_upward
0
arrow_downward

Благодаря за насоките, момчета, но успях да сортирам конфликтите и проблемите, като създадох глава и вместо това декларирах 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>

Благодаря отново!

person Stephen Leake    schedule 04.09.2012