2012-05-11 2 views
1

가 난 그냥이 코드 (단순한 맵) 다운로드가 잘 작동 Google지도 폴리 라인Google지도 V3 폴리 로딩

도움이 필요 실패합니다. 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> 

하지만 내 컴퓨터에서 작동하지 않습니다이 하나 ??

(잘 작동하는 경우),

<!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> 

디버그를 도와주세요 어떤 이유 : 당신은 구글의 CSS를 포함했다

[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/[email protected],[email protected]&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/[email protected],[email protected]&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/[email protected],[email protected]&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/[email protected],[email protected]&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/[email protected],[email protected]&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/[email protected],[email protected]&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/[email protected],[email protected]&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/[email protected],[email protected]&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/[email protected],[email protected]&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/[email protected],[email protected]&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/[email protected],[email protected]&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/[email protected],[email protected]&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] 

답변

4

. 그것을 취해서 자신의 실례와 비슷하게 정의하십시오. 높이를 설정하는 대신 height:100%; width:100%이 필요할 수 있습니다.

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); 
 
} 
 
initialize();
html { height: 100% ; width: 100%} 
 
     body { height: 100%; width:100%; margin: 0; padding: 0 } 
 
     #map_canvas { height: 100%; width:100% }
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y"></script> 
 
<div id="map_canvas"></div>

+0

생명 보호기! 빠르고 효율적인 응답을 위해 Andrew에게 많은 감사드립니다. – haile

+0

Andrew님께 고맙습니다. http://stackoverflow.com/questions/10570085/plestting-google-map-from-asp-net – haile

+0

콘텐츠를 다양한 창과 외부 리소스 (http : //)로 재배치했습니다. jsfiddle.net/d9TMF/61/ – Michael