Google지도 API 스타일 지정 오류

Google지도 스타일을 지정하는 방법에 대해이 tutorial을 따르려고하지만 스타일이 작동하지 않아 화면에 회색 사각형이 표시됩니다 (내가 만든 div). 여기에 내가 사용하고있는 코드가 있습니다 :Google지도 API 스타일 지정 오류

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      #map_canvas { 
       width: 500px; 
       height: 500px; 
       background-color: #CCC; 
      } 
     </style> 
     <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
     <script> 
      function initialize() { 
       var styles = [ 
        { 
        featureType: 'road', 
        elementType: 'geometry', 
        stylers: [ 
         { color: '#000000' }, 
         { weight: 1.6 } 
        ] 
        }, { 
        featureType: 'road', 
        elementType: 'labels', 
        stylers: [ 
         { saturation: -100 }, 
         { invert_lightness: true } 
        ] 
        }, { 
        featureType: 'landscape', 
        elementType: 'geometry', 
        stylers: [ 
         { hue: '#ffff00' }, 
         { gamma: 1.4 }, 
         { saturation: 82 }, 
         { lightness: 96 } 
        ] 
        }, { 
        featureType: 'poi.school', 
        elementType: 'geometry', 
        stylers: [ 
         { hue: '#fff700' }, 
         { lightness: -15 }, 
         { saturation: 99 } 
        ] 
        } 
       ]; 
       var styledMap = new google.maps.styleMapType(styles,{name: "styled Map"}); 
       var map_canvas = document.getElementById('map_canvas'); 
       var map_options = { 
        center: new google.maps.LatLng(44.5403, -78.5463), 
        zoom: 8, 
        mapTypeControlOptions: { 
         mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style'] 
        } 
       } 
       var map = new google.maps.Map(map_canvas, map_options); 
       map.mapTypes.set('map_style', styledMap); 
       map.setMapTypeId('map_style'); 
      } 
      google.maps.event.addDomListener(window, 'load', initialize); 
     </script> 
    </head> 
    <body> 
     <div id="map_canvas"> 

     </div> 

    </body> 
</html>

아무도 도와 줄 수 있습니까?

출처

2013-04-27 Filipe Ferminiano

자바 스크립트 디버거를 사용해야합니다. 전에 사용 해본 적이 있습니까? 요즘에는 모든 브라우저에 개발자 도구가 제공됩니다. 내가 가장 좋아하는 것은 Chrome DevTools입니다.

당신이 열려있는 DevTools로 사용하여 코드를로드하는 경우, 당신이 오류가있는 줄에 중단 볼 수 있습니다 :

var styledMap = new google.maps.styleMapType(styles,{name: "styled Map"});

롤 그 라인에 다양한 이름 위에 마우스. google이 정의되어 있고 google.maps이 정의되어 있지만 google.maps.styleMapType은 undefined 인 것을 확인할 수 있습니다.

해당 줄을 자습서 또는 설명서와 비교하면 필요한 것은 StyledMapType이 아니라 styleMapType이됩니다.

지도를 수정하면지도가 작동합니다.

하지만이 수정 프로그램을 가져 와서 실행하지 마십시오. 개발자 도구로 시간을 보내고 개발자 도구에 익숙해집니다. 이렇게하면 나중에 디버깅 할 때 많은 시간을 절약 할 수 있습니다.

출처

2013-04-27 20:44:26

도움을 주셔서 감사합니다! 나는이 도구들을 몰랐다. –

내 기쁨. 개발자 도구로 작업하기 시작하면 개발자 도구를 좋아할 것입니다. 코드에서 진행되는 작업을 훨씬 쉽게 볼 수 있습니다. 따라서 그들이 제공하는 모든 것을 명확히 탐구하십시오. –

Google지도 API 스타일 지정 오류

답변

관련 문제