หน้าเว็บ

วันอังคารที่ 1 เมษายน พ.ศ. 2557

move marker position google map : jsf primefaces


1. require map api (for google map component)
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
2. include this script (PrimefacesMap.js)
/**
 * @author jittagorn pitakmetagoon
 * create 01/04/2014
 */
var PrimefacesMap = (function(pf, google) {

    // google map dependency
    var maps = google.maps;

    function isFunction(data) {
        return typeof data === 'function';
    }

    function isString(data) {
        return typeof data === 'string';
    }

    function forEach(array, callback, ctx) {
        var length = array.length;
        for (var i = 0; i < length; i++) {
            callback.call(ctx, array[i], i, array);
        }
    }

    function clearMarkers(obj) {
        obj.markers && forEach(obj.markers, function(marker) {
            marker.setMap(null);
        });

        obj.markers = [];
    }

    function createMarker(latitude, longitude) {
        return new maps.Marker({
            position: new maps.LatLng(latitude, longitude)
        });
    }

    /**
     * @constructor
     * @param {String} widgetVar
     */
    return function(widgetVar) {
        if (!isString(widgetVar)) {
            throw new Error('require widgetVar is String, define by attribute \'widgetVar\' of component <p:map/>.');
        }

        //marker move change callback listeners
        var callbacks = [];

        /**
         * @param {Function} callback
         */
        this.addMarkerMoveChangeListener = function(callback) {
            if (!isFunction(callback)) {
                throw new Error('require callback is Function.');
            }

            callbacks.push(callback);
        };

        /**
         * @returns {Object}
         */
        this.getMap = function() {
            var map = pf(widgetVar).getMap();
            if (!map) {
                throw new Error('\'widgetVar\' not attribute of <p:map/>');
            }

            return map;
        };

        /**
         * @param {Number} latitude 
         * @param {Number} longitude 
         */
        this.markerMoveTo = function(latitude, longitude) {
            var map = this.getMap();

            clearMarkers(map);
            var marker = createMarker(latitude, longitude);
            marker.setMap(map);
            map.markers.push(marker);

            forEach(callbacks, function(callback) {
                callback(latitude, longitude, map);
            });
        };

        /**
         * @param {Number} latitude 
         * @param {Number} longitude 
         */
        this.setCenter = function(latitude, longitude) {
            this.getMap().setCenter(new maps.LatLng(latitude, longitude));
        };
    };
})(window.PF, window.google);
3. new instance (require parameter widgetVar, define by attribute widgetVar on <p:map/> )
var widgetVar = 'googlemap';
var googlemap__ = new PrimefacesMap(widgetVar);

googlemap__.addMarkerMoveChangeListener(function(latitude, longigutde, map){

    // do something ...

});
4. bind method instance to onPointClick of component <p:map/>
<p:gmap ...
        ... 
        ... 
        model="#{myManagedbean.map}" 
        widgetVar="googlemap"
        onPointClick="googlemap__.markerMoveTo(event.latLng.lat(), event.latLng.lng())"  <!-- **** --->
        type="ROADMAP"/>

primefaces google map component : http://www.primefaces.org/showcase/ui/gmapHome.jsf

ไม่มีความคิดเห็น:

แสดงความคิดเห็น