Google maps API Basic Example_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-30 03:09 出处：网络

I\'ve been unable to get the basic Google maps example working on my site.I have the following div on开发者_StackOverflow中文版 my page:

I've been unable to get the basic Google maps example working on my site. I have the following div on开发者_StackOverflow中文版 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.

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.

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/

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?

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...

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?