plotting Google Map from ASP.Net

问题:

I am trying to plot map from ASP.NET project and I have found a good tutorial here . http://www.codeproject.com/Articles/175557/Plot-Path-using-Google-Maps-JavaScript-API

The project compiles fine abut I still can not load the map .

From a previous post andrew has pointed out using my own css which DID work for me .

Need help with it . Source code is available on the site :).

debug 1 :

[12:38:04.463] GET https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/8/11/%7Bcommon,map,util,poly,marker%7D.js [HTTP/1.0 200 Connection established 8766ms]     --     [12:38:13.234] GET http://localhost:1790/GPSPath/ [HTTP/1.1 200 OK 82ms]     [12:38:13.340] GET http://code.google.com/apis/maps/documentation/javascript/examples/default.css [HTTP/1.0 301 Moved Permanently 1052ms]     [12:38:13.356] GET https://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&sensor=false [HTTP/1.1 200 OK 8076ms]     [12:38:14.396] GET https://developers.google.com/maps/documentation/javascript/examples/default.css?csw=1 [HTTP/1.1 301 Moved Permanently 1214ms]     [12:38:15.615] GET https://developers.google.com/maps/documentation/javascript/examples/default.css [HTTP/1.1 200 OK 1478ms]     --     [12:38:21.473] GET https://maps.gstatic.com/intl/en_us/mapfiles/api-3/8/11/main.js [HTTP/1.1 304 Not Modified 3708ms]     --     [12:38:31.415] GET https://maps.gstatic.com/cat_js/intl/en_us/mapfiles/api-3/8/11/%7Bcommon,map,util,poly,marker%7D.js [HTTP/1.1 200 OK] 

debug 2 :

[13:07:12.368] GET https://maps.gstatic.com/intl/en_us/mapfiles/api-3/8/11/main.js [HTTP/1.1 304 Not Modified 711ms] [13:07:15.316] Error in parsing value for 'background'.  Declaration dropped. @ http://localhost:1790/GPSPath/ [13:07:15.413] GET https://maps.gstatic.com/mapfiles/openhand_8_8.cur [HTTP/1.1 304 Not Modified 669ms] [13:07:15.433] GET https://maps.gstatic.com/mapfiles/transparent.png [HTTP/1.1 304 Not Modified 610ms] [13:07:15.466] GET https://maps.gstatic.com/mapfiles/undo_poly.png [HTTP/1.1 304 Not Modified 615ms] [13:07:15.481] GET https://mts1.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=351&y=819&z=11&s=&style=api%7Csmartmaps [HTTP/1.1 200 OK 28558ms] [13:07:15.497] GET https://mts0.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=350&y=819&z=11&s=Galil&style=api%7Csmartmaps [HTTP/1.1 200 OK 28599ms] [13:07:15.513] GET https://mts0.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=352&y=819&z=11&s=Gal&style=api%7Csmartmaps [HTTP/1.1 200 OK] [13:07:15.532] GET https://mts1.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=349&y=819&z=11&s=Ga&style=api%7Csmartmaps [HTTP/1.1 200 OK 617ms] [13:07:15.550] GET https://mts1.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=353&y=819&z=11&s=Galile&style=api%7Csmartmaps [HTTP/1.1 200 OK] [13:07:15.568] GET https://mts0.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=348&y=819&z=11&s=Galileo&style=api%7Csmartmaps [HTTP/1.1 200 OK 2062ms] [13:07:15.586] GET https://mts0.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=354&y=819&z=11&s=G&style=api%7Csmartmaps [HTTP/1.1 200 OK 23675ms] [13:07:15.605] GET https://maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo?1m6&1m2&1d33.779004&2d-119.58592199999998&2m2&1d33.779005&2d-116.77204799999998&2u11&4sen-US&5e0&6sm%40177000000&7b0&8e0&9b0&callback=_xdc_._b2m4dv&token=102820 [HTTP/1.1 200 OK 613ms] [13:07:15.735] GET https://maps.gstatic.com/mapfiles/markers2/marker_sprite.png [HTTP/1.1 304 Not Modified 548ms] [13:07:15.771] GET https://maps.gstatic.com/mapfiles/google_white.png [HTTP/1.1 304 Not Modified 492ms] [13:07:15.793] GET https://maps.gstatic.com/mapfiles/mv/imgs8.png [HTTP/1.1 304 Not Modified 537ms] [13:07:15.817] GET https://maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003.png [HTTP/1.1 304 Not Modified 488ms] [13:07:15.840] GET https://maps.gstatic.com/mapfiles/rotate2.png [HTTP/1.1 304 Not Modified 524ms] [13:07:15.867] GET https://maps.gstatic.com/mapfiles/szc4.png [HTTP/1.1 304 Not Modified 8593ms] [13:07:16.718] GET https://maps.googleapis.com/maps/gen_204?ev=api_viewport&cad=src:apiv3,ts:1336903635713 [HTTP/1.1 204 No Content 25149ms] [13:07:17.045] GET https://maps.googleapis.com/maps/gen_204?imp=v3rmi [HTTP/1.1 204 No Content 1797ms] [13:07:18.123] GET https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1shttp%3A%2F%2Flocalhost%3A1790%2FGPSPath%2F&4sAIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&5e1&callback=_xdc_._7q1ogj&token=110396 [HTTP/1.1 200 OK 1516ms] [13:07:19.267] GET https://maps.googleapis.com/maps/gen_204?ev=api_ads&cad=src:apiv3,ads:0 [HTTP/1.1 204 No Content 529ms] -- [13:07:26.354] GET https://maps.googleapis.com/maps/gen_204?ev=api_marker&cad=src:apiv3,m:3,d:0,s:0 [HTTP/1.1 204 No Content 7027ms] 

Debug (without https and with my own css )

[13:26:45.411] GET http://localhost:1790/GPSPath/ [HTTP/1.1 200 OK 33ms] [13:26:45.469] GET http://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&sensor=false [HTTP/1.0 200 OK 1507ms] [13:26:47.017] GET http://maps.gstatic.com/intl/en_us/mapfiles/api-3/8/11/main.js [HTTP/1.0 304 Not Modified 3130ms] [13:26:50.331] Error in parsing value for 'background'.  Declaration dropped. @ http://localhost:1790/GPSPath/ [13:26:50.403] GET http://maps.gstatic.com/mapfiles/openhand_8_8.cur [HTTP/1.0 304 Not Modified 1410ms] [13:26:50.417] GET http://maps.gstatic.com/mapfiles/transparent.png [HTTP/1.0 304 Not Modified 1408ms] [13:26:50.444] GET http://maps.gstatic.com/mapfiles/undo_poly.png [HTTP/1.0 304 Not Modified 1391ms] [13:26:50.456] GET http://mt1.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=351&y=819&z=11&s=&style=api%7Csmartmaps [HTTP/1.0 200 OK 4922ms] [13:26:50.469] GET http://mt0.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=350&y=819&z=11&s=Galil&style=api%7Csmartmaps [HTTP/1.0 200 OK 2159ms] [13:26:50.482] GET http://mt0.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=352&y=819&z=11&s=Gal&style=api%7Csmartmaps [HTTP/1.0 200 OK 6249ms] [13:26:50.496] GET http://mt1.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=349&y=819&z=11&s=Ga&style=api%7Csmartmaps [HTTP/1.0 200 OK 2783ms] [13:26:50.510] GET http://mt1.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=353&y=819&z=11&s=Galile&style=api%7Csmartmaps [HTTP/1.0 200 OK 5163ms] [13:26:50.525] GET http://mt0.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=348&y=819&z=11&s=Galileo&style=api%7Csmartmaps [HTTP/1.0 200 OK 4399ms] [13:26:50.541] GET http://mt0.googleapis.com/vt?lyrs=m@177000000&src=apiv3&hl=en-US&x=354&y=819&z=11&s=G&style=api%7Csmartmaps [HTTP/1.0 200 OK 4457ms] [13:26:50.557] GET http://maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo?1m6&1m2&1d33.779004&2d-119.58592199999998&2m2&1d33.779005&2d-116.77204799999998&2u11&4sen-US&5e0&6sm%40177000000&7b0&8e0&9b0&callback=_xdc_._3ozhak&token=76645 [HTTP/1.0 200 OK 2786ms] [13:26:50.677] GET http://maps.gstatic.com/mapfiles/markers2/marker_sprite.png [HTTP/1.0 304 Not Modified 4145ms] [13:26:50.697] GET http://maps.gstatic.com/mapfiles/google_white.png [HTTP/1.0 304 Not Modified 5866ms] [13:26:50.718] GET http://maps.gstatic.com/mapfiles/mv/imgs8.png [HTTP/1.0 304 Not Modified 6548ms] [13:26:50.751] GET http://maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003.png [HTTP/1.0 304 Not Modified 8332ms] [13:26:50.774] GET http://maps.gstatic.com/mapfiles/rotate2.png [HTTP/1.0 304 Not Modified 8333ms] [13:26:50.803] GET http://maps.gstatic.com/mapfiles/szc4.png [HTTP/1.0 304 Not Modified 9155ms] [13:26:51.679] GET http://maps.googleapis.com/maps/gen_204?ev=api_viewport&cad=src:apiv3,ts:1336904810659 [HTTP/1.0 204 No Content 1528ms] [13:26:54.287] GET http://maps.googleapis.com/maps/gen_204?imp=v3rmi [HTTP/1.0 204 No Content 2254ms] [13:26:54.317] GET http://maps.googleapis.com/maps/gen_204?ev=api_ads&cad=src:apiv3,ads:0 [HTTP/1.0 204 No Content 2221ms] [13:26:55.187] GET http://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1shttp%3A%2F%2Flocalhost%3A1790%2FGPSPath%2F&4sAIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&5e1&callback=_xdc_._r427nf&token=99497 [13:26:57.673] GET http://csi.gstatic.com/csi?v=2&s=mapsapi3&action=apiboot&rt=jl.3192,mc.3219,mb.3306,vt.9667,prt.9667,plt.9640,mt.9668&size=1366x0&maptype=m [HTTP/1.0 204 No Content 1729ms] [13:27:01.374] GET http://maps.googleapis.com/maps/gen_204?ev=api_marker&cad=src:apiv3,m:3,d:0,s:0 [HTTP/1.0 204 No Content 1703ms] -- [13:27:20.192] GET http://maps.googleapis.com/maps/api/js/QuotaService.RecordEvent?1shttp%3A%2F%2Flocalhost%3A1790%2FGPSPath%2F&3sAIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&4e1&5e0&6u1&7s5ymgop&callback=_xdc_._ux5mz6&token=23247 [HTTP/1.0 200 OK 1736ms] 

Debug From Firebug

I do not get the "__VIEWSTATE"div in the one that works Okay ? Could this be the reason ??

<form name="form1" method="post" action="default.aspx" id="form1"> <div> <input name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE1NTM1MjUzMzUPZBYCAgEPFgIeBFRleHQFsQ48c2NyaXB0IHR5cGU9J3RleHQvamF2YXNjcmlwdCc+DQoNCiAgICAgICAgICAgIHZhciBwb2x5Ow0KICAgICAgICAgICAgdmFyIG1hcDsNCg0KICAgICAgICAgICAgZnVuY3Rpb24gaW5pdGlhbGl6ZSgpIHsNCiAgICAgICAgICAgICAgICANCiAgICAgICAgICAgICAgICB2YXIgY21sb2MgPSBuZXcgZ29vZ2xlLm1hcHMuTGF0TG5nKDMzLjc3OTAwNSwgLTExOC4xNzg5ODUpOw0KICAgICAgICAgICAgICAgIHZhciBteU9wdGlvbnMgPSB7DQogICAgICAgICAgICAgICAgICAgIHpvb206IDExLA0KICAgICAgICAgICAgICAgICAgICBjZW50ZXI6IGNtbG9jLA0KICAgICAgICAgICAgICAgICAgICBtYXBUeXBlSWQ6IGdvb2dsZS5tYXBzLk1hcFR5cGVJZC5ST0FETUFQDQogICAgICAgICAgICAgICAgfTsNCg0KICAgICAgICAgICAgICAgIG1hcCA9IG5ldyBnb29nbGUubWFwcy5NYXAoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21hcF9jYW52YXMnKSwgbXlPcHRpb25zKTsNCg0KDQogICAgICAgICAgICAgICAgdmFyIHBvbHlPcHRpb25zID0gew0KICAgICAgICAgICAgICAgICAgICBzdHJva2VDb2xvcjogJ2JsdWUnLA0KICAgICAgICAgICAgICAgICAgICBzdHJva2VPcGFjaXR5OiAwLjUsDQogICAgICAgICAgICAgICAgICAgIHN0cm9rZVdlaWdodDogMw0KICAgICAgICAgICAgICAgIH0NCiAgICAgICAgICAgICAgICBwb2x5ID0gbmV3IGdvb2dsZS5tYXBzLlBvbHlsaW5lKHBvbHlPcHRpb25zKTsNCiAgICAgICAgICAgICAgICBwb2x5LnNldE1hcChtYXApOw0KDQogICAgICAgICAgICAgICAgdmFyIHBhdGggPSBwb2x5LmdldFBhdGgoKTsNCg0KICAgICAgICAgICAgICAgDQoNCiAgICAgICAgICAgICAgICBwYXRoLnB1c2gobmV3IGdvb2dsZS5tYXBzLkxhdExuZygzMy43NzkwMDUsIC0xMTguMTc4OTg1KSk7DQoNCiAgICAgICAgICAgICAgICB2YXIgbWFya2VyMCA9IG5ldyBnb29nbGUubWFwcy5NYXJrZXIoew0KICAgICAgICAgICAgICAgICAgICBwb3NpdGlvbjogbmV3IGdvb2dsZS5tYXBzLkxhdExuZygzMy43NzkwMDUsIC0xMTguMTc4OTg1KSwNCiAgICAgICAgICAgICAgICAgICAgdGl0bGU6ICcjJyArIHBhdGguZ2V0TGVuZ3RoKCksDQogICAgICAgICAgICAgICAgICAgIG1hcDogbWFwDQogICAgICAgICAgICAgICAgfSk7DQoNCiAgICAgICAgICAgICAgICBwYXRoLnB1c2gobmV3IGdvb2dsZS5tYXBzLkxhdExuZygzMy44NzkwMDUsIC0xMTguMDk4OTg1KSk7DQoNCiAgICAgICAgICAgICAgICB2YXIgbWFya2VyMSA9IG5ldyBnb29nbGUubWFwcy5NYXJrZXIoew0KICAgICAgICAgICAgICAgICAgICBwb3NpdGlvbjogbmV3IGdvb2dsZS5tYXBzLkxhdExuZygzMy44NzkwMDUsIC0xMTguMDk4OTg1KSwNCiAgICAgICAgICAgICAgICAgICAgdGl0bGU6ICcjJyArIHBhdGguZ2V0TGVuZ3RoKCksDQogICAgICAgICAgICAgICAgICAgIG1hcDogbWFwDQogICAgICAgICAgICAgICAgfSk7DQoNCiAgICAgICAgICAgICAgICBwYXRoLnB1c2gobmV3IGdvb2dsZS5tYXBzLkxhdExuZygzMy45NzkwMDUsIC0xMTguMjE4OTg1KSk7DQoNCiAgICAgICAgICAgICAgICB2YXIgbWFya2VyMiA9IG5ldyBnb29nbGUubWFwcy5NYXJrZXIoew0KICAgICAgICAgICAgICAgICAgICBwb3NpdGlvbjogbmV3IGdvb2dsZS5tYXBzLkxhdExuZygzMy45NzkwMDUsIC0xMTguMjE4OTg1KSwNCiAgICAgICAgICAgICAgICAgICAgdGl0bGU6ICcjJyArIHBhdGguZ2V0TGVuZ3RoKCksDQogICAgICAgICAgICAgICAgICAgIG1hcDogbWFwDQogICAgICAgICAgICAgICAgfSk7DQoNCiAgICAgICAgICAgICAgICAgICAgfQ0KICAgICAgICAgICAgICAgIDwvc2NyaXB0PmRkie8SLlkqGTTBQBDxeXJTGLNO6B5kIpNtL0F7eqM9j8U=" type="hidden"> </div> 

--- Code truncated ---

回答1:

It appears the answer may well be the same as before.

GET https://developers.google.com/maps/documentation/javascript/examples/default.css  

indicates that you are loading Google's CSS. Don't do that. Use your own (as before).

Note that if you want the map canvas to cover the entire page (that is, {height:100%}) you must ensure that every element which contains that <div> also has its height defined. This includes at least <body> and <html> but also every other element which contains the map.

In the case of ASP pages, there is a <form> element which also needs to be defined.

GET http://localhost:1790/GPSPath/ indicates you're using HTTP, but references to the API and stylesheet use HTTPS. Are you loading the API with HTTPS? There should be no need to do that if your own page doesn't use it.

文章来源: plotting Google Map from ASP.Net