Google maps change on click

by oterox

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB6YAqeEFMu0ohvdr8h2Z6jhJW17pQSeII&amp;sensor=false"></script>
<div class="panel">

  <a href="#" class="button" data-area="coords_area_1">Area 1</a>
  
  <a href="#" class="button" data-area="coords_area_2">Area 2</a>

<a href="#" class="button" data-area="coords_area_3">Area 3</a>

</div>

<div id="map-canvas"></div>

CSS

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
.panel {
  float:left;
}
#map-canvas { float:right; height: 100%; width: 800px; }
a.button {
  display: block;
  padding: 20px;
}

JavaScript

jQuery(document).ready(function() {

    google.maps.Polygon.prototype.my_getBounds=function(){
        var bounds = new google.maps.LatLngBounds()
        this.getPath().forEach(function(element,index){bounds.extend(element)})
        return bounds
    }

    jQuery(document).on("click", ".button", function(e) {
        e.preventDefault();
        var area = jQuery(this).attr("data-area");			
        
        //This works:
        //area_polygon.setPaths(coords_area_1);
        
        //This doesn't work
        area_polygon.setPaths(coords_area_1);
        
        //TODO: center map for each area
        map.setCenter(area_polygon.my_getBounds().getCenter());
        
        
    });
    
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
				zoom: 13,
				center: {lat: 37.19609918569187, lng: -3.6258735364372114},
				zoomControl: true,
				scaleControl: true
			});

			
			var coords_area_1 = [
				{lat: 37.19203500647849, lng:  -3.657157001652763},{lat: 37.1932603278994, lng:  -3.6543991068303967},{lat: 37.19435428501329, lng:  -3.652339170306959},{lat: 37.19435428501329, lng:  -3.652339170306959},{lat: 37.19572170911559, lng:  -3.6499359110296155},{lat: 37.19727687914047, lng:  -3.6481569516993204},{lat: 37.19843914621118, lng:  -3.6455820310450235},{lat: 37.20028506301394, lng:  -3.6442087400293985},{lat: 37.20144728376866, lng:  -3.6424062955713907},{lat: 37.20308803554539, lng:  -3.6402605283594767},{lat: 37.201652379691275, lng:  -3.638458083901469},{lat: 37.20124218728875, lng:  -3.6369989621973673},{lat: 37.20055852833089, lng:  -3.635110687050883},{lat: 37.201652379691275, lng:  -3.633308242592875},{lat: 37.20240439330627, lng:  -3.6320207822657267},{lat: 37.203566581428404, lng:  -3.631334136757914},{lat: 37.203908398058644, lng:  -3.6304758298731485},{lat: 37.20479711405221, lng:  -3.6295316922999064},{lat: 37.20589090398586, lng:  -3.6285017240381876},{lat: 37.20158401444565, lng:  -3.6248110044336954},{lat:...