为什么Google地图没有显示？

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/

Answer 1

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.

Answer 2

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