I need help with Google Maps Polyline
I just downloaded this code ( just a simple map) and it works just fine .
I have signed up for a google API .
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
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:100%; height:100%"></div>
</body>
</html>
But this one does not work on from my computer ??
Any reason why , Please help
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Polyline Simple</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>
Debug(when it works fine ) :
[12:46:00.874] file:///C:/Users/Haile/Desktop/polyoverflow.html
[12:46:00.974] GET https://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&sensor=false [HTTP/1.1 200 OK 6738ms]
--
[12:46:07.779] GET https://maps.gstatic.com/intl/en_us/mapfiles/api-3/8/11/main.js [HTTP/1.1 304 Not Modified 667ms]
[12:46:08.622] Error in parsing value for 'background'. Declaration dropped. @ file:///C:/Users/Haile/Desktop/polyoverflow.html
[12:46:08.718] GET https://maps.gstatic.com/mapfiles/openhand_8_8.cur [HTTP/1.1 304 Not Modified 4200ms]
[12:46:08.744] GET https://maps.gstatic.com/mapfiles/transparent.png [HTTP/1.1 304 Not Modified 6536ms]
[12:46:08.776] GET https://maps.gstatic.com/mapfiles/undo_poly.png [HTTP/1.1 304 Not Modified 2389ms]
[12:46:08.792] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=7&y=3&z=3&s=&style=api%7Csmartmaps [HTTP/1.1 200 OK 3746ms]
[12:46:08.808] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=7&y=4&z=3&s=G&style=api%7Csmartmaps [HTTP/1.1 200 OK 8703ms]
[12:46:08.826] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=0&y=3&z=3&s=Gal&style=api%7Csmartmaps [HTTP/1.1 200 OK 7659ms]
[12:46:08.845] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=0&y=4&z=3&s=Gali&style=api%7Csmartmaps [HTTP/1.1 200 OK 8420ms]
[12:46:08.863] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=6&y=3&z=3&s=Galil&style=api%7Csmartmaps [HTTP/1.1 200 OK 16613ms]
[12:46:08.890] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=6&y=4&z=3&s=Galile&style=api%7Csmartmaps [HTTP/1.1 200 OK 12093ms]
[12:46:08.914] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=1&y=3&z=3&s=Galile&style=api%7Csmartmaps [HTTP/1.1 200 OK 19585ms]
[12:46:08.939] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=1&y=4&z=3&s=Galileo&style=api%7Csmartmaps [HTTP/1.1 200 OK 2753ms]
[12:46:08.963] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=5&y=3&z=3&s=Ga&style=api%7Csmartmaps [HTTP/1.1 200 OK 12625ms]
[12:46:08.988] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=5&y=4&z=3&s=Gal&style=api%7Csmartmaps [HTTP/1.1 200 OK 9987ms]
[12:46:09.014] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=2&y=3&z=3&s=G&style=api%7Csmartmaps [HTTP/1.1 200 OK 8728ms]
[12:46:09.047] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=2&y=4&z=3&s=Ga&style=api%7Csmartmaps [HTTP/1.1 200 OK 2984ms]
[12:46:09.078] GET https://maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo?1m6&1m2&1d-67.60159243714006&2d-180&2m2&1d67.60159243714006&2d180&2u3&4sen-US&5e4&6sr%40177000000&7b0&8e0&9b0&callback=_xdc_._q07umg&token=24170 [HTTP/1.1 200 OK 10083ms]
[12:46:09.294] GET https://maps.gstatic.com/mapfiles/google_white.png [HTTP/1.1 304 Not Modified 2013ms]
[12:46:09.329] GET https://maps.gstatic.com/mapfiles/mv/imgs8.png [HTTP/1.1 304 Not Modified 2413ms]
[12:46:09.367] GET https://maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003.png [HTTP/1.1 304 Not Modified 3958ms]
[12:46:09.404] GET https://maps.gstatic.com/mapfiles/rotate2.png [HTTP/1.1 304 Not Modified 2713ms]
[12:46:09.441] GET https://maps.gstatic.com/mapfiles/szc4.png [HTTP/1.1 304 Not Modified 7609ms]
[12:46:10.190] GET https://maps.googleapis.com/maps/gen_204?ev=api_viewport&cad=src:apiv3,ts:1336902369211 [HTTP/1.0 200 Connection established 25338ms]
[12:46:12.591] GET https://maps.googleapis.com/maps/gen_204?ev=api_ads&cad=src:apiv3,ads:0 [HTTP/1.1 204 No Content 2181ms]
[12:46:13.461] GET https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1sfile%3A%2F%2F%2FC%3A%2FUsers%2FHaile%2FDesktop%2Fpolyoverflow.html&4sAIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&5e1&callback=_xdc_._q8yv43&token=112869 [HTTP/1.0 200 Connection established 12274ms]
--
[12:46:20.489] GET https://maps.googleapis.com/maps/gen_204?ev=api_marker&cad=src:apiv3,m:2,d:0,s:0 [HTTP/1.1 204 No Content 660ms]
--
[12:46:29.340] GET https://csi.gstatic.com/csi?v=2&s=mapsapi3&action=apiboot&rt=jl.737,mc.784,mb.871,vt.20582,prt.20582,plt.20535,mt.20583&size=1366x246&maptype=r [HTTP/1.1 204 No Content 7383ms]
--
[12:46:38.478] GET https://maps.googleapis.com/maps/api/js/QuotaService.RecordEvent?1sfile%3A%2F%2F%2FC%3A%2FUsers%2FHaile%2FDesktop%2Fpolyoverflow.html&3sAIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&4e1&5e0&6u1&7s5x64nd&callback=_xdc_._9r0xgo&token=4472 [HTTP/1.1 200 OK 697ms]
You have included Google’s CSS. Take that out and define your own, similar to your working example. You may need
height:100%; width:100%though, instead of just setting the height.