title: Google Maps Panning/Zooming not working in IFrame
body: <p>I have an IFrame embedded in a Flex program which has a google map in it with a bunch of javascript code (all the code can be found here: <a href="http://jsfiddle.net/rcucfjux/3" rel="nofollow">http://jsfiddle.net/rcucfjux/3</a>).</p>
  
  <p>When the frame loads, the initialize() function is called from Flex and the map and the map loads fine.  Then the user can double click on the map and a pair of polygons will be drawn, centered on the point the user clicks (this all works fine).  Then I have a button in Flex which calls the centerPoly() function.  This is supposed to center the polygon on the screen, but when the function is called, nothing happens.  Even if I just use map.setZoom(10), the zoom doesn't change. Relevant code is given below.</p>
  
  <pre><code>function centerPoly() {
      var bounds = new google.maps.LatLngBounds();
      bounds = polyshapeinzone.getBounds();
  //  map.setCenter(bounds.getCenter());
  //  map.setOptions(mapOptions);
      map.panTo(bounds.getCenter());
  
  
  }
  
  // Polygon getBounds extension - google-maps-extensions
  // https://github.com/tparkin/Google-Maps-Point-in-Polygon
  // http://code.google.com/p/google-maps-extensions/source/browse/google.maps.Polygon.getBounds.js
  if (!google.maps.Polygon.prototype.getBounds) {
    google.maps.Polygon.prototype.getBounds = function(latLng) {
    var bounds = new google.maps.LatLngBounds(),
    paths = this.getPaths(),
    path,
    p, i;
  
  for (p = 0; p &lt; paths.getLength(); p++) {
    path = paths.getAt(p);
    for (i = 0; i &lt; path.getLength(); i++) {
      bounds.extend(path.getAt(i));
    }
  }
  
  return bounds;
  };
  }
  
  
  function initialize() {
  
    var markers = [];
  
    var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(40.489829,-81.482353),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: false,
    zoomControl: true
   };
  
   var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
   // zoom: 12,
   //  center: new google.maps.LatLng(40.489829,-81.482353),
   //  mapTypeId: google.maps.MapTypeId.ROADMAP,
   //  disableDefaultUI: false,
   //  zoomControl: true
   // });
  
   map.setCenter(new google.maps.LatLng(40.489829,-81.482353));
   map.setZoom(12);
  
   var polyOptions = {
        strokeWeight: 0,
        fillOpacity: 0.45,
        editable: true,
        fillColor: 'blue'
      };
  
  // Create the search box and link it to the UI element.
  var input = /** @type {HTMLInputElement} */(
    document.getElementById('pac-input'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  
  var searchBox = new google.maps.places.SearchBox(
  /** @type {HTMLInputElement} */(input));
  
  // [START region_getplaces]
  // Listen for the event fired when the user selects an item from the
  // pick list. Retrieve the matching places for that item.
  google.maps.event.addListener(searchBox, 'places_changed', function() {
  var places = searchBox.getPlaces();
  
  if (places.length == 0) {
    return;
  }
  for (var i = 0, marker; marker = markers[i]; i++) {
    marker.setMap(null);
  }
  
  // For each place, get the icon, place name, and location.
  markers = [];
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0, place; place = places[i]; i++) {
    var image = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)
    };
  
    // Create a marker for each place.
    var marker = new google.maps.Marker({
      map: map,
      icon: image,
      title: place.name,
      position: place.geometry.location
    });
  
    markers.push(marker);
  
    bounds.extend(place.geometry.location);
  }
   map.fitBounds(bounds);
   map.setZoom(10);
  
  });
  // [END region_getplaces]
  
  // Bias the SearchBox results towards places that are within the bounds of the
  // current map's viewport.
  google.maps.event.addListener(map, 'bounds_changed', function() {
  var bounds = map.getBounds();
  searchBox.setBounds(bounds);
  });
  
  
  // Creates a drawing manager attached to the map that allows the user to draw
      // markers, lines, and shapes.
      drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: null,
        drawingControlOptions: {
                  position: google.maps.ControlPosition.TOP_CENTER,
                  drawingModes: []
        },
        markerOptions: {
          draggable: true
        },
        polygonOptions: polyOptions,
        map: map
      });
  
  
  
      google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) {});
  
      google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
  
          //overlayClickListener(e.overlay);
          if (e.type != google.maps.drawing.OverlayType.MARKER) {
              // Switch back to non-drawing mode after drawing a shape.
              drawingManager.setDrawingMode(null);
  
              // Add an event listener that selects the newly-drawn shape when the user
              // mouses down on it.
              var newShape = e.overlay;
              newShape.type = e.type;
  
              google.maps.event.addListener(newShape, 'click', function(e) {
                  if (e.vertex !== undefined) {
                      if (newShape.type === google.maps.drawing.OverlayType.POLYGON) {
                          var path = newShape.getPaths().getAt(e.path);
                          path.removeAt(e.vertex);
                          if (path.length &lt; 3) {
                              newShape.setMap(null);
                          }
                      } else {
                          setSelection(newShape);
                      }
                  } else {
                      setSelection(newShape);
                  }
  
  
                  google.maps.event.addListener(newShape.getPath(), 'set_at', function() {
                      getPolygonPath(newShape);
                  });
  
                  google.maps.event.addListener(newShape.getPath(), 'insert_at', function() {
                      getPolygonPath(newShape);
                  });
  
                  google.maps.event.addListener(newShape.getPath(), 'remove_at', function() {
                      getPolygonPath(newShape);
                  });
  
  
              });
              setSelection(newShape);
  
  
          }
      });
  
      // Clear the current selection when the drawing mode is changed, or when the
      // map is clicked.
      google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
      google.maps.event.addListener(map, 'click', clearSelection);  
  
  
      google.maps.event.addListener(map, 'dblclick', function (event) {
          map.set('disableDoubleClickZoom', true);
  
          if (polyshapeinzone != null) {
              if (confirm("You already have a zone defined on the map.  Are you sure you want to clear that zone and place a new one here?")) {
                  polyshapeoutzone.setMap(null);
                  polyshapeoutzone = null;
                  polyshapeinzone.setMap(null);
                  polyshapeinzone = null;
              } else {
                  return
              }
          } 
  
          var polyCoords = new Array();
          var latlngObj;
  
          var offset = 0.005;
  
          mouseLat = event.latLng.lat();
          mouseLong = event.latLng.lng();
  
          latlngObj = new google.maps.LatLng(mouseLat + (offset - 0.001), mouseLong - offset);
          polyCoords.push(latlngObj);
          latlngObj = new google.maps.LatLng(mouseLat + (offset - 0.001), mouseLong + offset);
          polyCoords.push(latlngObj);
          latlngObj = new google.maps.LatLng(mouseLat - (offset - 0.001), mouseLong + offset);
          polyCoords.push(latlngObj);
          latlngObj = new google.maps.LatLng(mouseLat - (offset - 0.001), mouseLong - offset);
          polyCoords.push(latlngObj);
  
          var polyshapeinzoneitm = new google.maps.Polygon({
              paths: polyCoords,
              editable: false,
              strokeColor: incolor,
              strokeOpacity: 0.8,
              strokeWeight: 3,
              fillColor: incolor,
              fillOpacity: 0.35,
              zIndex: 9999,
              polyLat: mouseLat,
              polyLng: mouseLong
          });
  
          polyshapeinzoneitm.setMap(map);
          polyshapeinzone = polyshapeinzoneitm;
          addListenersOnPolygon(polyshapeinzone);
  
  
      // Set the outside boundary
  
      polyCoords = [];
      offset = 0.01;
  
      latlngObj = new google.maps.LatLng(mouseLat + (offset - 0.001), mouseLong - offset);
      polyCoords.push(latlngObj);
      latlngObj = new google.maps.LatLng(mouseLat + (offset - 0.001), mouseLong + offset);
      polyCoords.push(latlngObj);
      latlngObj = new google.maps.LatLng(mouseLat - (offset - 0.001), mouseLong + offset);
      polyCoords.push(latlngObj);
      latlngObj = new google.maps.LatLng(mouseLat - (offset - 0.001), mouseLong - offset);
      polyCoords.push(latlngObj);
  
          var polyshapeoutzoneitm = new google.maps.Polygon({
              paths: polyCoords,
              editable: false,
              strokeColor: outcolor,
              strokeOpacity: 0.8,
              strokeWeight: 3,
              fillColor: outcolor,
              fillOpacity: 0.35
          });
  
          polyshapeoutzoneitm.setMap(map);
          polyshapeoutzone = polyshapeoutzoneitm;
          addListenersOnPolygon(polyshapeoutzone);
  
      });   
  
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  </code></pre>