Google maps API Basic Example

问题

I've been unable to get the basic Google maps example working on my site. I have the following div on my page:

<div id="map_canvas" style="width:100%; height:100%"></div>

And the following in the head of my document:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function initialize() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }
    jQuery(document).ready(initialize);
</script>

It appears that the elements are getting loaded into my DOM, but there is no visible map on the page.

回答1:

As per Google Map not showing up, it appears that percentage sizes on the div (e.g. 100%) don't work properly. I had to explicitly specify a pixel height and width for the div.

回答2:

Use 100% only if you want to show google map on the whole screen..!!
Here is a sample which used 100% width height
http://www.rizeworkshop.com/basic-google-map-v3/

回答3:

You have jQuery enabled on your site? Otherwise, within your body-tag create a "onload=initialize();"-attribut so that the javascript will be executed.

As far as I know your inital-request needs an API key?

回答4:

the code looks ok and it's similar to the examples from the documentation so it should be working properly.

Have you tried printing some information on the screen from the initialize function? Check if the latlng, myoptions and map variables are created correctly.

If they are, there's a problem with calling the initialize function...

回答5:

I tested your code and iw works fine if i use <body onload="initialize()"> as da_didi suggested. Do you have an import directive for jquery.js?

来源：https://stackoverflow.com/questions/4431453/google-maps-api-basic-example

标签

google-maps

google-maps-api-3