Why Google Maps doesn't shown?

Question

I got a blue screen when load Google Maps API. Could you answer if there is any problem with these?

Alert message result: http://img829.imageshack.us/img829/9279/soru1k.jpg

Initialize function:

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> function yukle() { var locations = $.parseJSON({$json}); alert(locations[0]); var latlng = new google.maps.LatLng(locations[0][1], locations[0][2]); var myOptions = { zoom: 7, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script>

HTML:

<div id="map_canvas" style="width:620px; height:470px"></div>

CSS:

 <style type="text/css"> #map_canvas { height: 100%; } </style>

The result is a blue screen on map: http://imageshack.us/photo/my-images/546/soru3.jpg/

Did you seriously take a screenshot of your code? Please copy/paste your code here. — Nasreddine
– Nasreddine, Commented Oct 24, 2011 at 12:14

Oliver · Accepted Answer · 2011-10-24 12:16:15Z

Assuming your page has the element map_canvas, this should work fine. Try posting some HTML and more of your code.

Also, try turning off css styles for your page. your css will also style the google map things on your page, so if, for instance, all the div on your page are solid blue it might affect the google map elements.

EDIT:

With the screenshot you've given, its pretty clear the map is rendering correctly. There is something wrong with the line:

var latlng = new google.maps.LatLng(locations[0][1], locations[0][2]);

In particular, the latlng isn't correctly being made, or the coordinates are wrong. It's likely that your map is focused on a patch of sea slightly west of Nigeria (lat:0,lng:0). Try zooming the map out and looking around.

i'm added CSS and HTML code. it's pretty simple, i think there is a problem with location.
i'm alerting coordinates and it's true. and tried zoom out zoom in but problem is going on.
That's kind of strange then. May I suggest using console.log, and using the Chrome console or the firefox firebug extension, instead of using alert (to get data about what your code is doing.) do console.log(latlng) and examine the item that google has given you to see if it seems correct. Try replacing new google.maps.LatLng(locations[0][1], locations [0][2]) with new google.maps.LatLng(51,0) and see if the screen is still blue.

duncan · Accepted Answer · 2011-10-24 13:11:29Z

Javascript arrays are zero indexed. I think

var latlng = new google.maps.LatLng(locations[0][1], locations[0][2]);

Should be

var latlng = new google.maps.LatLng(locations[0][0], locations[0][1]);

Collectives™ on Stack Overflow

Why Google Maps doesn't shown?

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related