CODEWITHSUNDEEP
javascripthtmlcssgoogle-maps
Samuel Shamiri
Samuel Shamiri

Reputation: 137

Adding a sidebar on Google maps that display's polygon attributes

when clicked on a polygon (Postcode area) the infowindow shows the attributes of that polygon. What I'm trying to do is display the polygon attribute into a sidebar instead of the popup window. here is my code http://jsfiddle.net/Shamiri/7eb3fyt2/ which has the polygon and infowindow, on the right is what I'm hoping to get.

<!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>

Upvotes: 0

Views: 444

Answers (2)

geocodezip
geocodezip

Reputation: 161334

  1. remove the extraneous infowindow configuration (the info about Uluru)

  2. replace the contents of your click listener with: 

    document.getElementById('over_map_right').innerHTML = '<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>';

Working code snippet:

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) {
    document.getElementById('over_map_right').innerHTML = '<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>';
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
 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;
 }
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<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>

Upvotes: 1

Khurram Ishaque
Khurram Ishaque

Reputation: 798

As far as I understand, only selected Suburb information would be displayed on sidebar. So, instead table cells, if a span or div with an ID attribute be placed. And use the same statements of getting data from event, and assign the value to innerHtml of the div or span.

E.g. document.getElementById('divIdOrSpanId').innerHTML = event.feature.getProperty('SUBURB');

Hopefully this would solve it for you.

Upvotes: 1

Related Questions