javascript - Google Maps API V3 - InfoBox の backgroundColor をドロップダウンリストで動的に変更する

Question

ドロップダウンリストを使用して InfoBox の backgroundColor を動的に変更しようとしています (この InfoBox を使用してマップラベルを作成します)。これには google.maps.event.addDomListener を使用しますが、値は返されません。私のコードは以下のとおりですが、エラーがどこにあるか知っている人はいますか?

ラベルを表示する JavaScript 内のコード:

function displaynameText(response) {
if (!response) {
  alert('no response');
  return;
}
if (response.isError()) {
  alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
  return;
} 
  if (map.getZoom() < 9) return;
  FTresponse = response;

  numRows = response.getDataTable().getNumberOfRows();
  numCols = response.getDataTable().getNumberOfColumns();

  for(i = 0; i < numRows; i++) {
      var name = response.getDataTable().getValue(i, 1);
      var nameStr = name.toString()
      while (nameStr.length < 5) { nameStr = '0' + nameStr; }
      var point = new google.maps.LatLng(
          parseFloat(response.getDataTable().getValue(i, 2)),
          parseFloat(response.getDataTable().getValue(i, 3)));

      labels.push(new InfoBox({
      content: nameStr
      ,boxStyle: {
         border: "1px solid black"
        ,textAlign: "center"
        ,backgroundColor: "#3333FF"
        ,fontSize: "8pt"
        ,width: "50px"
     }
      ,disableAutoPan: true
      ,pixelOffset: new google.maps.Size(-25, 0)
      ,position: point
      ,closeBoxURL: ""
      ,isHidden: false
      ,enableEventPropagation: true
      }));
      labels[labels.length-1].open(map);

       google.maps.event.addDomListener(document.getElementById('label'),
      'change', function() {
      var selectedLabel = this.value;
      InfoBox.set('backgroundColor', selectedLabel);
      });
  }

ドロップダウンリストの本文内のコード:

  <select id="label">
    <option value="#FFFFFF">White</option>
    <option value="#FF0000">Red</option>
  </select>

これは完全なコードです:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>USA</title>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>    
<!--Load the AJAX API-->
<script type="text/javascript" src="http://geoxml3.googlecode.com/svn/branches/polys/geoxml3.js"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<script type="text/javascript" src="http://www.google-analytics.com/urchin.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});
var map;
var labels = [];
var layer;
var tableid = '15Dce-frPm_D_5gTTG2gKwlWTElkgL7NC1RqDzuY';

function initialize() {
    geocoder = new google.maps.Geocoder();
    map = new google.maps.Map(document.getElementById('map_canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  layer = new google.maps.FusionTablesLayer();
  var countylayerOptions = {
  styles: [{
  where: "POP10 < 10000",
  polygonOptions: {
    fillColor: "#E06464",
    fillOpacity: 0.7,
    strokeColor: "#333333",
    strokeOpacity: 1.0,
    strokeWeight: 1
    }
  }, 

  {
  where: "POP10 > 10000 and POP10 < 25000",
  polygonOptions: {
    fillColor: "#E3D72B",
    fillOpacity: 0.7,
    strokeColor: "#333333",
    strokeOpacity: 1.0,
    strokeWeight: 1
    }
  }, 
  {
  where: "POP10 > 25000 and POP10 < 50000",
  polygonOptions: {
    fillColor: "#D01A4A",
    fillOpacity: 0.7,
    strokeColor: "#333333",
    strokeOpacity: 1.0,
    strokeWeight: 1
    }
  }, 
  {
  where: "POP10 > 50000 and POP10 < 100000",
  polygonOptions: {
    fillColor: "#14505C",
    fillOpacity: 0.7,
    strokeColor: "#333333",
    strokeOpacity: 1.0,
    strokeWeight: 1
    }
  }, 
  {
  where: "POP10 > 100000",
  polygonOptions: {
    fillColor: "#14505C",
    fillOpacity: 0.7,
    strokeColor: "#333333",
    strokeOpacity: 1.0,
    strokeWeight: 1
    }
  }],

  map: map,

  query: {
          select: 'Merge of Tigerline Shape Files 2012 and Gaz_places_national_2010',
          from: '15Dce-frPm_D_5gTTG2gKwlWTElkgL7NC1RqDzuY'
         }
       }

  layer.setOptions(countylayerOptions);
  layer.setMap(map);


  createMarkerforLabels();

  google.maps.event.addListener(map, "idle", function() {
    displaynames();
  });
  google.maps.event.addListener(map, "zoom_changed", function() {
    if (map.getZoom() < 9) {
      for (var i=0; i<labels.length; i++) {
        labels[i].setMap(null);
      }
    }
  });


    google.maps.event.addListener(layer, 'click', function(e) { 
    //update the content of the InfoWindow
    e.infoWindowHtml = '<h3 style="font-family: Arial; font-size: 13px; color: #FFFFFF; background-color: #0099FF; text-align: center; font-style: italic">' + 'Incorporated and census designated places' 
    + '<h1 style="font-family: Arial; font-size: 12px; color: #333333; background-color: #E2E2E2; text-align: left ">  Population: &nbsp;' + e.row['POP10'].value + "<br />";
  });
}

function createMarkerforLabels() {
    var address = document.getElementById("address").value;
    geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
            position: results[0].geometry.location
        });
        if (results[0].geometry.viewport) 
          map.fitBounds(results[0].geometry.viewport);
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

function displaynames() {
  //set the query using the current bounds
  var queryStr = "SELECT geometry, name, INTPTLAT, INTPTLON FROM "+ tableid + " WHERE ST_INTERSECTS(geometry, RECTANGLE(LATLNG"+map.getBounds().getSouthWest()+",LATLNG"+map.getBounds().getNorthEast()+"))";   
  var queryText = encodeURIComponent(queryStr);
  var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

  //set the callback function
  query.send(displaynameText);
}

var infowindow = new google.maps.InfoWindow();

function displaynameText(response) {
if (!response) {
  alert('no response');
  return;
}
if (response.isError()) {
  alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
  return;
} 
  if (map.getZoom() < 9) return;
  FTresponse = response;

  numRows = response.getDataTable().getNumberOfRows();
  numCols = response.getDataTable().getNumberOfColumns();

  for(i = 0; i < numRows; i++) {
      var name = response.getDataTable().getValue(i, 1);
      var nameStr = name.toString()
      while (nameStr.length < 5) { nameStr = '0' + nameStr; }
      var point = new google.maps.LatLng(
          parseFloat(response.getDataTable().getValue(i, 2)),
          parseFloat(response.getDataTable().getValue(i, 3)));

      labels.push(new InfoBox({
      content: nameStr
      ,boxStyle: {
         border: "1px solid black"
        ,textAlign: "center"
        ,backgroundColor:"white"
        ,fontSize: "8pt"
        ,width: "50px"
     }
      ,disableAutoPan: true
      ,pixelOffset: new google.maps.Size(-25, 0)
      ,position: point
      ,closeBoxURL: ""
      ,isHidden: false
      ,enableEventPropagation: true
      }));
      labels[labels.length-1].open(map);

      google.maps.event.addDomListener(document.getElementById('label'),
      'change', function() {
      var selectedLabel = this.value;
      InfoBox.set('backgroundColor', selectedLabel);
      });
  }
}
</script>

<body onload="initialize();">
<form> 
<div id="panel" style="position:absolute; left:50%; top:0px; width:900px; height:30px; z-index:2; margin-left: -450px; visibility: hidden;"><input id="address" type="text" value="USA" ></input></div>
<div id="map_canvas" style="position:absolute; left:50%; top:30px; width:900px; height:700px; z-index:1; margin-left: -450px;"></div>
<div> <label>Label:</label>
      <select id="label">
        <option value="#FFFFFF">White</option>
        <option value="#FF0000">Red</option>
      </select>
</div>
</body>
</html>

score 1 · Accepted Answer

のインスタンスの背景を設定する必要がありますInfoBox。

多くの InfoBox があるため、すべての InfoBox を反復処理する必要がない別のアプローチをお勧めします。

ドロップダウンを次のように変更します。

<select id="label">
        <option value="white">White</option>
        <option value="red">Red</option>
      </select>

変更リスナーを次のように変更します。

  google.maps.event.addDomListener(document.getElementById('label'),
  'change', function() {
  map.getDiv().className=this.value
  });

さらに、少しの CSS が必要です。

#map_canvas.red  .infobox{background:red !important}

change-function はの className を設定し#map_canvas、赤 (またはその他の) 背景がすべての InfoBox インスタンスに適用されます。

javascript - Google Maps API V3 - InfoBox の backgroundColor をドロップダウン リストで動的に変更する

1 に答える 1

Related

Reference

javascript - Google Maps API V3 - InfoBox の backgroundColor をドロップダウンリストで動的に変更する