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
ไม่มีความคิดเห็น:
แสดงความคิดเห็น