CODEWITHSUNDEEP
phpjavascriptgoogle-maps
MAB
MAB

Reputation: 273

Why Google Maps doesn't shown?

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/

Upvotes: 1

Views: 556

Answers (2)

duncan
duncan

Reputation: 31930

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

Upvotes: 0

Oliver
Oliver

Reputation: 11617

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.

Upvotes: 3

Related Questions