Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
333 views
in Technique[技术] by (71.8m points)

javascript - Google map does not appear

I'm following the introductory tutorial for Google Maps, but for some reason the map is not appearing on my webpage. The relevant HTML/CSS/JS is:

<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>

    <script type="text/javascript"
        src="http://maps.googleapis.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);
      }

    </script>
</head>

<body onload="initialize()">
  <div id="map_canvas" style="width: 400px; height: 400px"></div>
</body>

</html>

The map does not appear within the map_canvas div.

Update

I've changed the page so that it doesn't use JQuery to load the map. It now uses exactly the same JS as in the tutorial, but still the map does not appear.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

There are 3 problems with your code:

(1) add the following lines before <script type="text/javascript">function initialize() {

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script> 

This is in the post of your answer, but it is not in your file http://www.iol.ie/~murtaghd/map/map.htm.

(2) You need to call initalize() (again: it is in your post, but not in the code):

<body onload="initialize();">

(3) Set the size of the canvas to get the map displayed (again: it is in your post, but not in the code). Afterwards you can change the size as you like.

<div id="map_canvas" style="width:500px; height:300px"></div>

You can see the site running on jsfiddle.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...