CODEWITHSUNDEEP
javascripthtmlgoogle-mapstwitter-bootstrap
geniass
geniass

Reputation: 399

Google Maps V3 is just a grey box after an ajax query

I have only recently begun to play around with html, javascript, webapps etc and I decided to try write my own Prey standalone webserver.

I am using Twitter Bootstrap for the UI, and jQuery for javascript stuff. My reports page lists all the reports and allows the user to select one to view on the map. The page then gets the data as JSON from the server which all works fine. However when I call map.setCenter(new google.maps.LatLng(data['lat'], data['lng'])) the map just turns grey instead of moving to that location.

I have tried this in chrome and firefox, and I get the same problem. Strangely, there are no errors in the chrome console-debugger-thing nor in firebug. I can see maybe 10 similar issues under "Similar Questions"; however none of those solutions (eg. CSS) have helped.

Here's the website (it's a sandbox on dotCloud, so it might be very slow): http://prey-geniass.dotcloud.com/devices/l6wyd/reports.xml

Upvotes: 0

Views: 1436

Answers (2)

geniass
geniass

Reputation: 399

Ok, I just found the problem. It was actually server-side where I didn't mark the Response as JSON, so javascript was actually receiving a string, and I was trying to use it as a JSON object. For anyone using Flask, here is the code to do this: return Response(json.dumps(report), mimetype='text/json').

Now I don't really now which answer to mark as the correct one (both are technically correct because there were 2 different problems)

Upvotes: 0

Julian H. Lam
Julian H. Lam

Reputation: 26134

So I noticed you store the map object as window['map'] (funny how everybody seems to do that... makes debugging easier when I don't have to dive into the source :) ).

I tried to set the centre myself using a known set of coordinates:

map.setCenter(new google.maps.LatLng('51.0453246', '-114.0581012'));

This worked fine, so the actual code is working fine. I tested some cases for incorrect values... null and 0 would put me somewhere in the ocean, but undefined for both lat and lng would turn the map grey. Perhaps the values you are passing in are incorrect, and end up being undefined?

Looking at the second alert that comes, the relevant properties are latitude and longitude, although you seem to be passing in data['lat'] and data['lng']. Would this be the reason?

This should fix it:

//update map
marker = new google.maps.Marker({
    position: new google.maps.LatLng(data['latitude'], data['longitude']),
    title:"Last Known Position"
});
marker.setMap(map);
map.setCenter(new google.maps.LatLng(data['latitude'], data['longitude']))
// google.maps.event.trigger(map, 'resize');

Please note that I commented out your 'resize' trigger (which I assume you probably added in an effort to resolve this problem? I remember suggesting that to another user here :)). It is not required in your case.

Upvotes: 1

Related Questions