PrimeFaces gmap组件中的fitBounds

Question

Is there a way to call fitBounds method in the google map object created by PrimeFaces gmap component ? I tried the code below, but get javascript error: TypeError: primefacesMap.fitBounds is not a function . It appears that fitBounds is overriden by a boolean property by PrimeFaces framework.

<h:head>
  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"/>
  <script type="text/javascript">
//<![CDATA[
  function initPrimefacesComponent(){
    var primefacesMap = gmtls.getMap();
    var bounds = new google.maps.LatLngBounds();
    var points = [
      new google.maps.LatLng(41.3, 2),
      new google.maps.LatLng(41.309, 2)
      ];
    // Extend bounds with each point
    for (var i = 0; i < points.length; i++) {
      bounds.extend(points[i]);
      new google.maps.Marker({position: points[i], map: primefacesMap});
    }
    // Apply fitBounds
    primefacesMap.fitBounds(bounds); 
  }
//]]>
  </script>
</h:head>

<h:body onload="initPrimefacesComponent();" >
  <p:gmap center="41.3, 2" zoom="15" type="ROADMAP"   widgetVar="gmtls"
    style="width:600px;height:400px" />  
</h:body>

Below is the code that works for google map object that is created without primefaces:

<h:head>
  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"/>
  <script type="text/javascript">
//<![CDATA[
  function initOriginalMap() {
    var mapOptions = {
      center: new google.maps.LatLng(41.3, 2),
      zoom: 15
    };
    var originalMap = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
    var bounds = new google.maps.LatLngBounds();
    var points = [
      new google.maps.LatLng(41.3, 2),
      new google.maps.LatLng(41.309, 2)
      ];

    // Extend bounds with each point
    for (var i = 0; i < points.length; i++) {
      bounds.extend(points[i]);
      new google.maps.Marker({position: points[i], map: originalMap});
    }

    // Apply fitBounds
    originalMap.fitBounds(bounds); 
  }
  google.maps.event.addDomListener(window, 'load', initOriginalMap);
//]]>
  </script>
</h:head>

<h:body >
  <div id="map-canvas" style="width:600px;height:400px"/>
</h:body>

Answer 1

To make fitBounds work in PrimeFaces I had to override again the fitBounds property of the map by original source:

//remember the property set by PrimeFaces
var tmp = map.fitBounds;

//replace the code by the one provided by google maps api
map.fitBounds = google.maps.Map.prototype.fitBounds;

//execute fitBounds function
this.fitBounds(bounds);

//restore PrimeFaces property (probably PrimeFaces use it somehow)
this.fitBounds = tmp;

Answer 2

I submitted a PR to have this fixed natively in PF 7.1+. The fitBounds method will now be right on the widget itself.

https://github.com/primefaces/primefaces/pull/5132