JQuery and Google Maps JS api not working together

Question

I am really stuck trying to use both the Google Maps API and the JQuery API in the same block.. My page is jspx (Spring) and I need the JQuery so that I can get and parse google fusion table data.

However, when I declare both libraries together the map div will not load (if I load Google Maps alone, all of the mapping works fine).

Here is the relevant code:

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

Any pointers or ideas would help me greatly, I even tried retrieving the deprivation stat via JQuery in a seperate JS block, however despite my efforts, the function was not called on page load.

Check your console for errors, and try to get this into a [fiddle](http://jsfiddle.net) ... — adeneo, Sep 03 '12 at 19:08
@adeneo I have checked for errors, in the console and it says "Uncaught ReferenceError: google is not defined" and points to the line "google.maps.event.addDomListener(window, 'load', initialize).. I also ran my code through fiddle and it said my javascript was all valid.. — Stephen Leake, Sep 03 '12 at 19:10
A working jsfiddle would let us see why you are getting that error. What is the '' in the api include tags for? — geocodezip, Sep 03 '12 at 19:25
I cant remember why i put it there to be honest, but without it, even less works :l — Stephen Leake, Sep 03 '12 at 19:26
I changed the order of the two api calls, however now I get the error "Uncaught ReferenceError: $ is not defined" — Stephen Leake, Sep 03 '12 at 19:30

geocodezip · Answer 1 · 2012-09-04T02:56:45.267

You are missing the closing tag for the first script include:

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

(either order should work, and should work without the version specification and the &key=MYKEY as well, just noticed that you were also missing the & before key=MYKEY as well)

score 0 · Accepted Answer · answered Sep 04 '12 at 10:14

Thanks for the guidance guys, but I managed to sort the conflicts and issues by creating a head and declaring the jQuery in the head file instead, and leaving the google src where it was.

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

 </script>
 </head>

thanks again!

JQuery and Google Maps JS api not working together

2 Answers2

Linked