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 downlo
Solution 1:
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><metaname="viewport"content="initial-scale=1.0, user-scalable=no"><metacharset="utf-8"><title>Google Maps JavaScript API v3 Example: Circle Simple</title><styletype="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><scriptsrc="https://maps.googleapis.com/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;
functioninitialize() {
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><bodyonload="initialize()"><divid="map_canvas"></div></body></html>Solution 2:
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 recommend that you just change it to the following so it uses the stylesheet from Google's server:
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css" rel="stylesheet">
Post a Comment for "Why Doesn't The Google Maps Tutorial Work On My Pc?"