0
при щелчке по полигону (область почтового индекса) в инфо-окне отображаются атрибуты этого многоугольника. То, что я пытаюсь сделать, - показать атрибут polygon в боковой панели вместо всплывающего окна. вот мой код http://jsfiddle.net/Shamiri/7eb3fyt2/, у которого есть многоугольник и infowindow, справа - это то, что я надеюсь получить.Добавление боковой панели на картах Google, отображающих атрибуты многоугольника
<!DOCTYPE html>
<html>
<head>
<title>SA POSTCODES</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100%; }
#wrapper { position: relative; }
#over_map_left { position: relative; background-color: transparent; top: 10px; left: 10px; z- index: 99; background: white; }
#over_map_right { position: absolute; background-color: transparent; top: 50px; right: 10px; z-index: 99; background: white; padding: 10px }
table {
width:100%; }
table#t01 tr:nth-child(even) {
background-color: #eee;}
table#t01 tr:nth-child(odd) {
background-color:#fff;}
table#t01 th {
background-color: black;
color: white;}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 6,
center: {lat: -28, lng: 137.883},
mapTypeId: google.maps.MapTypeId.ROADMAP });
var infowindow = new google.maps.InfoWindow({
maxWidth: 800 });
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Load GeoJSON.
map.data.loadGeoJson('https://dl.dropbox.com/s/hgh6g4y34ne02xj/sampleData2.json');
// Color each layer gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
var color = 'gray';
if (feature.getProperty('isColorful')) {
color = feature.getProperty('color');
}
return /** @type {google.maps.Data.StyleOptions} */({
fillColor: color,
strokeColor: color,
strokeWeight: 1
});
});
// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
event.feature.setProperty('isColorful', true);
});
map.data.addListener('mouseover', function(event) {
map.data.revertStyle();
map.data.overrideStyle(event.feature, {strokeWeight: 8});
});
map.data.addListener('mouseout', function(event) {
map.data.revertStyle();
});
map.data.addListener('click', function(event) {
infowindow.setContent(event.feature.getProperty('POSTCODE')+"<br>"+ '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + event.feature.getProperty('SUBURB'));
infowindow.setPosition(event.latLng);
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
infowindow.open(map);
});
map.data.addListener('click', function(event) {
infowindow.setContent('<h1 id="firstHeading" class="firstHeading"> SUBURB INFO </h1>'+ '<p> Suburb name:' +event.feature.getProperty('SUBURB') + '</p> <b> POSTCODE:' + event.feature.getProperty('POSTCODE') + '<p> Unemployment:' +event.feature.getProperty('SHAPE.LEN')+'</p>');
infowindow.setPosition(event.latLng);
infowindow.setOptions({pixelOffset: new google.maps.Size(0,-34)});
infowindow.open(map);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="over_map_right">
<h2>SUBURB Information</h2>
<table id="t01">
<tr>
<th>Suburb</th>
<th>Postcode</th>
<th>Unemployment</th>
</tr>
<tr>
<td>Suburb1</td>
<td>postcode1</td>
<td>Unemployment1</td>
</tr>
<tr>
<td>Suburb2</td>
<td>postcode2</td>
<td>Unemployment2</td>
</tr>
</table>
</div>
</body>
</html>
Спасибо, это работает отлично. –