[How-Gmap?] Auto Zoom and Center Gmap with a set of Markers?

[coolboykl]

Hi Cagatay Civici/Prime Faces users

First of all, thanks for all the effort to deliver so far (In my humble opinion) the best JSF components.. very impressive..

I am new to PrimeFaces (I have search the forum prior post this question), using Google static Map Api, I am able to "pull" a map image by given the service a set of markers (to form polylines or polygons), the engine able to return me a Map that cover all the Markets I set, auto Center, and with right Zoom Level..

Here an example of using Google static Map API..

http://maps.google.com/maps/api/staticm ... ,101.65616

Wonder what is the best approach to achieve the above using GMap component?

Thanks in Advance..

Cheers
James

[bardu]

Hi James,

here you can find an example:

http://www.primefaces.org/labs/ui/gmapPolyline.jsf

I would also recommend to have a look at the Gmap section in the PF user guide which you can download from here:

http://www.primefaces.org/documentation.html

[coolboykl]

Hi Bardu

Thanks for reply, I do aware (And Yes, I have downloaded the Guide) the GMAP do support Polylines, however, to use the GMAP with Polylines, developers still needs to construct the component with Center and Zoom Level parameters, what I am asking , is that a way to construct a Gmap component without Center and Zoom Level parameters, but just given a list of Markers, and the GMAP will auto Center the map, set with right Zoom level to display all my Markets.

See my Html link on Google Static Map, I didn't specific the Center, nor did I specify the Zoom level..

Thanks
Coolboy

[coolboykl]

Any suggestion on how to resolve this issue?

Thanks in advance!!!

[bardu]

The current gmap implementation supports the Google Maps Javascript API and not the Google Static Maps API. As you might know the latter one renders an image rather than an interactive map.

While the feature you are after is quite compelling I guess you have to hack around the native Google map api you can retrieve like

Code: Select all

var gmap = yourWidgetVar.getMap();

You could also make a feature request at

http://code.google.com/p/primefaces/issues/entry

[fotisp]

Sorry to revive this old thread, by I would like to post a suggestion as a solution to this problem.

So create a custom resize function:

Code: Select all

    centerMap: function(mapId){

        var gmap = mapId.getMap();

        google.maps.event.addListener(gmap, 'resize',function(){

            console.log(gmap);
            console.log(gmap.markers);

            var bounds = new google.maps.LatLngBounds ();


            gmap.setZoom(0);
            gmap.setCenter(null);

            //  Go through each...
            for (var i = 0, LtLgLen = gmap.markers.length; i < LtLgLen; i++) {

              console.log(gmap.markers[i].position.lat());
              console.log(gmap.markers[i].position.lng());

              //  And increase the bounds to take this point
              bounds.extend (gmap.markers[i].position);

            }

            //  Fit these bounds to the map
            /** http://stackoverflow.com/questions/3873195/calling-map-fitbounds-multiple-times-in-google-maps-api-v3-0 */
            setTimeout( function() { gmap.fitBounds( bounds ); }, 1 );

        });

         //this fires a resize event
        /**  http://stackoverflow.com/questions/3437907/google-maps-api-resizing-generates-blank-white-space */
        google.maps.event.trigger(gmap, "resize");



    }

This will also work when including a p:gmap in a dialog. Instead of calling checkResize(), call your custom function.

Best,
Fotis