2013-04-23 7 views
0

날씨지도 코드를 사용자 정의 Google지도 (API v3)에 넣을 위치를 찾는 데 도움이 필요합니다. 모든 입력을 크게 높이 평가할 수 있습니다.이 사용자 정의지도에 Weather Layer를 추가 할 위치는 어디입니까?

맞춤 Google지도를 만들었습니다. 우리는 간단한 토글 (toggle)을 가진 2 개의 Fusion Table 레이어를 가지고 있습니다. 이 사이트에 여기에서 찾을 것을 개발자 문서에서, 그리고, 나는 코드의이 비트 추가해야 볼 수 있습니다

var weatherLayer = new google.maps.weather.WeatherLayer({ 
temperatureUnits: google.maps.weather.TemperatureUnit.FAHRENHEIT 
}); 
weatherLayer.setMap(map); 

을하지만 난 때마다 나는,이를 배치하는 위치에 관해서는 완전히 우둔입니다 코드를 추가하고 F12 콘솔 창에 모든 종류의 오류가있는 빈 페이지가 표시됩니다.

어디에서 추가해야할까요? 어떻게 토글에 추가 할 수 있습니까? 여기에 우리가 일하고있는 것이 있습니다 :

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=weather"></script> 
    <script src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
    var map; 

    var layer1; 
    var tableid = ''; 

    var layer2; 
    var tableid2 = 'xxxxx'; 

    var layer3; 
    var tableid3 = 'xxxxx'; 

    function initialize() { 
     map = new google.maps.Map(document.getElementById('map_canvas'), { 
     center: new google.maps.LatLng(31.499, -111.202), 
     zoom: 10, 
    mapTypeControl: true, 
     mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
     position: google.maps.ControlPosition.TOP_CENTER 
    }, 
    panControl: true, 
    panControlOptions: { 
     position: google.maps.ControlPosition.TOP_LEFT 
    }, 
    zoomControl: true, 
    zoomControlOptions: { 
     style: google.maps.ZoomControlStyle.LARGE, 
     position: google.maps.ControlPosition.LEFT_CENTER 
    }, 
    scaleControl: true, 
    scaleControlOptions: { 
     position: google.maps.ControlPosition.BOTTOM_LEFT 
    }, 
    streetViewControl: false, 
    streetViewControlOptions: { 
     position: google.maps.ControlPosition.LEFT_TOP 
    } 
    }); 

    var styledMapType = new google.maps.StyledMapType({ 
    map: map, 
    name: 'Styled Map' 
    }); 

    map.mapTypes.set('map-style', styledMapType); 
    map.setMapTypeId('map-style'); 

    layer1 = new google.maps.FusionTablesLayer({ 
    query: { 
     select: '', 
     from: tableid 
    }, 
    map: map 
    }); 

    layer2 = new google.maps.FusionTablesLayer({ 
    query: { 
     select: 'LOC', 
     from: tableid2 
    }, 
    map: map 
    }); 

    layer3 = new google.maps.FusionTablesLayer({ 
    query: { 
     select: 'geometry', 
     from: tableid3 
    }, 
suppressInfoWindows:true, 
    map: map 
    }); 
} 


function changeMap(layerNum) { 
    if (layerNum == 2) { 
    update(layer2); 
    } 
    if (layerNum == 3) { 
    update(layer3); 
    } 
} 

function update(layer) { 
    var layerMap = layer.getMap(); 
    if (layerMap) { 
    layer.setMap(null); 
    } else { 
    layer.setMap(map); 
    } 
} 

</script> 

<style type="text/css"> 
    #toggle_box { 
     position: absolute; 
     top: 7px; 
     right: 7px; 
     padding: 3px; 
     border: 1px solid #707735; 
     background: #DED9C6; 
     font-family: 'Coda', cursive; 
    } 
    body { 
     margin: 0px; 
     padding: 0px; 
     font-family: 'Coda', cursive; 
     } 
    #map_canvas { 
     position: absolute; 
     right: 0; 
     top: 0; 
     width: 100%; 
     height: 100%; 
     font-family: 'Coda', cursive; 
    } 
    </style> 
</head> 
<body onload="initialize();"> 
<div id="map_canvas"></div> 
<div id="toggle_box"><input type="checkbox" value="2" onclick="changeMap(this.value)" checked="checked" />REFERENCE POINTS 
<input type="checkbox" value="3" onclick="changeMap(this.value)" checked="checked" />AZ COUNTIES</div> 
    </body> 
    </html> 

답변

0

지도가 초기화 된 곳으로 배치하십시오. 그 전에 :

var styledMapType = new google.maps.StyledMapType({