title: list linking to a polygon (building) in google maps from JSON file
body: <p>I cobbled together a campus map for our local college loading buildings outlines from a json file. The building themselves are clickable with info windows. Now I am trying to get a side nav with a list of the buildings to be able to click on it and load the correct building info/outline. Can you point me in the right direction? I've seen examples of this using the markers/infowindows and side lists but never with a clickable polygons. </p>
  
  <pre><code> var $ul = $('#buildings');
   function myList() {
      //request the JSON data and parse into the select element
      $.getJSON('campus1.json', function(data){
      $.each(data.places, function(i, item){ 
          $ul.append('&lt;li&gt;&lt;a href="#" rel="' + i + '"&gt;' + item.title + '&lt;/a&gt;&lt;/li&gt;');
        })
  
      });
  }
  //create building list
  myList();
  
  var map;
  var infowindow = new google.maps.InfoWindow();
  function initialize() {
    map = new google.maps.Map(document.getElementById('map_canvas'), {
      //zoom: 4,
      //center: {lat: -28, lng: 137.883}
      zoom: 17,
      center: {lat: 48.490802, lng: -123.416497},
      mapTypeControlOptions:{
                  mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
                  }
    });
  
  // array of styles
          var styles = [
                {
                  "featureType": "poi.school",
                  "elementType": "labels",
                  "stylers": [
                    { "visibility": "off" }
                  ]
                },{
                  "featureType": "poi.business",
                  "elementType": "labels",
                  "stylers": [
                    { "visibility": "off" }
                  ]
                },{
                  "featureType": "landscape.man_made",
                  "elementType": "labels.text",
                  "stylers": [
                    { "visibility": "off" }
                  ]
                },{
                  "featureType": "landscape.man_made",
                  "elementType": "geometry",
                  "stylers": [
                    { "visibility": "off" }
                  ]
                }
              ];
      // new styledMapType object, passing the array of styles and the name to be displayed on the map type control.
      var styledMap = new google.maps.StyledMapType(styles,{name: "Styled Map"});
      map.mapTypes.set('map_style', styledMap);
      map.setMapTypeId('map_style');
  
    // Load GeoJSON.
    map.data.loadGeoJson('campus4.json');
  
    // [START snippet]
    // Color each letter 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: 2
      });
    });
  
    // When the user clicks, creates building info box.
    map.data.addListener('click', function(event) {
      //event.feature.setProperty('isColorful', true);
      var title = event.feature.getProperty("title");
      var abrev  = event.feature.getProperty("abrevs");
      var desc   = event.feature.getProperty("desc2");
      var image  = event.feature.getProperty("picture");
      var ids    = event.feature.getProperty("id");
      infowindow.setContent("&lt;div style='width:450px; text-align: center;'&gt;&lt;h3 id='"+ids+"'&gt;"+title+"&lt;/h3&gt;&lt;p&gt;&lt;strong&gt;Abrev:&lt;/strong&gt; " +abrev+ "&lt;/p&gt;&lt;img src=\"" +image+ "\" /&gt;&lt;p&gt;" +desc+ "&lt;/p&gt;&lt;/div&gt;");
      //infowindow.setPosition(event.feature.getGeometry().get());
      if (event){
          point = event.latLng;
      }
      infowindow.setPosition(point);
      //infowindow.setOptions({pixelOffset: new google.maps.Size(0,-30)});
      infowindow.open(map);
    });
  
    // When the user hovers, tempt them to click by outlining the Buildings.
    // Call revertStyle() to remove all overrides. This will use the style rules
    // defined in the function passed to setStyle()
    map.data.addListener('mouseover', function(event) {
          map.data.revertStyle();
          map.data.overrideStyle(event.feature, {strokeWeight: 8});
    });//mouse over listener
  
    map.data.addListener('mouseout', function(event) {
      map.data.revertStyle();
    });//mouse over listener
    // [END snippet]
  } &lt;!-- end of initialize function --&gt;
  
  google.maps.event.addDomListener(window, 'load', initialize); 
  </code></pre>
  
  <p>currently this code loads 2 different json files of the same data, although slightly different formatting. Is it possible to link to polygon object and activate it with the google maps api?</p>
  
  <p>sorry forgot to give example of json files i am using. currently using A as main one but pulling for B for list, working draft, eventually going to pull from one file ideally. Reason I used json file was to make it easy for non-IT people to edit etc, who maintain it at the college. This is just sample data thrown in, not real coordinates, and not really a javascript experienced. </p>
  
  <p><strong>A Example</strong></p>
  
  <pre><code>{
      "type": "FeatureCollection",
      "features":[{ {
          "type": "Feature",
          "properties": {
              "name": "Carpentry Classroom",
              "abrevs": "ICC",
              "letter": "Carpentry Classroom",
              "id": "icc",
              "desc2": "need info",
              "picture": "",
              "description": "the second letter o"
          },
          "geometry": {
              "type": "Polygon",
              "coordinates": [[[-120.418600913561,
              4649213741465642],
              [-120.4184934907869,
              46.49215116618643],
              [-120.4185235814502,
              46.49224517610932],
              [-120.4186311820468,
              46.49223142763702],
              [-120.418600913561,
              46.49213741465642]]]
          }
      }
      }]
  }
  </code></pre>
  
  <p><strong>B Example</strong></p>
  
  <pre><code>{
      "places" : [{
              "title" : "Campus Centre",
              "abrev" : "Campus Centre",
              "description" : "description tex.",
              "image": "http://example.com/campus-centre.jpg",
              "alt": "CampusCentre",
              "lat" : 46.491031,
              "lng" : -120.418565
          }
  ]}
  </code></pre>