javascript - Why doesn't the google maps tutorial work on my pc?

So I've downloaded a sample bit of code from the google developer website to play around with. The bit of code found below is exactly the same as the code found here. When I download the html and try to open it locally in chrome it doesn't show anything, it returns me a blank screen without any errors (firebug lite). I'm using a mac and I'm new at all this web dev stuff. Should I set up a localhost thing or am I pletely missing something? Any help is greatly appreciated.

  <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Google Maps JavaScript API v3 Example: Circle Simple</title>
        <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
        <script src=""></script>
        <script>

         var citymap = {};
         citymap['chicago'] = {
           center: new google.maps.LatLng(41.878113, -87.629798),
           population: 2842518
         };
         citymap['newyork'] = {
           center: new google.maps.LatLng(40.714352, -74.005973),
           population: 8143197
         };
         citymap['losangeles'] = {
           center: new google.maps.LatLng(34.052234, -118.243684),
           population: 3844829
         }
         var cityCircle;

         function initialize() {
           var mapOptions = {
             zoom: 4,
             center: new google.maps.LatLng(37.09024, -95.712891),
             mapTypeId: google.maps.MapTypeId.TERRAIN
           };

           var map = new google.maps.Map(document.getElementById("map_canvas"),
               mapOptions);

           for (var city in citymap) {
             // Construct the circle for each value in citymap. We scale population by 20.
             var populationOptions = {
               strokeColor: "#FF0000",
               strokeOpacity: 0.8,
               strokeWeight: 2,
               fillColor: "#FF0000",
               fillOpacity: 0.35,
               map: map,
               center: citymap[city].center,
               radius: citymap[city].population / 20
             };
             cityCircle = new google.maps.Circle(populationOptions);
           }
         }
        </script>
      </head>
      <body onload="initialize()">
        <div id="map_canvas"></div>
      </body>
    </html>

  <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Google Maps JavaScript API v3 Example: Circle Simple</title>
        <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
        <script src="https://maps.googleapis./maps/api/js?sensor=false"></script>
        <script>

         var citymap = {};
         citymap['chicago'] = {
           center: new google.maps.LatLng(41.878113, -87.629798),
           population: 2842518
         };
         citymap['newyork'] = {
           center: new google.maps.LatLng(40.714352, -74.005973),
           population: 8143197
         };
         citymap['losangeles'] = {
           center: new google.maps.LatLng(34.052234, -118.243684),
           population: 3844829
         }
         var cityCircle;

         function initialize() {
           var mapOptions = {
             zoom: 4,
             center: new google.maps.LatLng(37.09024, -95.712891),
             mapTypeId: google.maps.MapTypeId.TERRAIN
           };

           var map = new google.maps.Map(document.getElementById("map_canvas"),
               mapOptions);

           for (var city in citymap) {
             // Construct the circle for each value in citymap. We scale population by 20.
             var populationOptions = {
               strokeColor: "#FF0000",
               strokeOpacity: 0.8,
               strokeWeight: 2,
               fillColor: "#FF0000",
               fillOpacity: 0.35,
               map: map,
               center: citymap[city].center,
               radius: citymap[city].population / 20
             };
             cityCircle = new google.maps.Circle(populationOptions);
           }
         }
        </script>
      </head>
      <body onload="initialize()">
        <div id="map_canvas"></div>
      </body>
    </html>

Share Improve this question edited Dec 12, 2013 at 6:05 Kara 6,22616 gold badges53 silver badges58 bronze badges asked Aug 15, 2012 at 14:39 cantdutchthis 34.8k17 gold badges77 silver badges116 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

Since you saved the file directly from the demo site, you did not save the CSS file associated with it (/maps/documentation/javascript/examples/default.css). So your map has no width/height to it. If you save this file and reference it properly it should work. Alternatively, you can just add the bit of css to your html file:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Circle Simple</title>
    <style type="text/css">
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }

    #map_canvas {
      height: 100%;
    }

    @media print {
      html, body {
        height: auto;
      }

      #map_canvas {
        height: 650px;
      }
    }
    </style>
    <script src="https://maps.googleapis./maps/api/js?sensor=false"></script>
    <script>

      // Create an object containing LatLng, population.
      var citymap = {};
      citymap['chicago'] = {
        center: new google.maps.LatLng(41.878113, -87.629798),
        population: 2842518
      };
      citymap['newyork'] = {
        center: new google.maps.LatLng(40.714352, -74.005973),
        population: 8143197
      };
      citymap['losangeles'] = {
        center: new google.maps.LatLng(34.052234, -118.243684),
        population: 3844829
      }
      var cityCircle;

      function initialize() {
        var mapOptions = {
          zoom: 4,
          center: new google.maps.LatLng(37.09024, -95.712891),
          mapTypeId: google.maps.MapTypeId.TERRAIN
        };

        var map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);

        for (var city in citymap) {
          // Construct the circle for each value in citymap. We scale population by 20.
          var populationOptions = {
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map,
            center: citymap[city].center,
            radius: citymap[city].population / 20
          };
          cityCircle = new google.maps.Circle(populationOptions);
        }
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas"></div>
  </body>
</html>

The problem is that the link element's href attribute in the head of the document uses a relative URL pointing to a stylesheet on your local machine. Unless you've downloaded that stylesheet and put it at the location referenced in the link element's href attribute, it won't find it.

In this case though, I'd remend that you just change it to the following so it uses the stylesheet from Google's server:

<link href="https://google-developers.appspot./maps/documentation/javascript/examples/default.css" rel="stylesheet">

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Why doesn't the google maps tutorial work on my pc? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)