Databases
StackOverflow2013
Postsdbo
POWhy doesn't the google maps tutorial work on my pc?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy doesn't the google maps tutorial work on my pc?
    text
    copied!<p>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 <a href="https://google-developers.appspot.com/maps/documentation/javascript/examples/circle-simple" rel="nofollow">here</a>. 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 completely missing something? Any help is greatly appreciated. </p> <pre><code> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Google Maps JavaScript API v3 Example: Circle Simple&lt;/title&gt; &lt;link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"&gt; &lt;script src="https://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; &lt;script&gt; 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); } } &lt;/script&gt; &lt;/head&gt; &lt;body onload="initialize()"&gt; &lt;div id="map_canvas"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload