0

気象レイヤー コードをカスタム Google マップ (API v3) に配置する場所を見つけるのに助けが必要です。どんな入力でも大歓迎です :)

カスタム Google マップを作成し、その上に 2 つのフュージョン テーブル レイヤーをシンプルなトグルで配置しました。開発者向けドキュメントと、このサイトで見つけたものから、次のコードを追加する必要があることがわかります。

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

しかし、追加しようとするたびに (現在 2 日) コードが壊れ、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>
4

1 に答える 1

0

その行の前など、マップが初期化される場所に配置します。

var styledMapType = new google.maps.StyledMapType({
于 2013-04-23T07:17:37.037 に答える