META-INF.resources.primefaces.gmap.gmap.js Maven / Gradle / Ivy
/**
* __PrimeFaces Google Maps Widget__
*
* GMap is a map component integrated with Google Maps API V3.
*
* @typedef {(google.maps.Marker | google.maps.Circle | google.maps.Polyline | google.maps.Polygon | google.maps.Rectangle) & PrimeFaces.widget.GMap.IdProviding} PrimeFaces.widget.GMap.Overlay
* An overlay shape that extends the shapes and markers as defined by the maps API. Adds an ID property for identifying
* the shape or marker.
*
* @typedef PrimeFaces.widget.GMap.OnPointClickCallback Javascript callback to execute when a point on map is clicked.
* See also {@link GMapCfg.onPointClick}.
* @param {google.maps.MapMouseEvent | google.maps.IconMouseEvent} PrimeFaces.widget.GMap.OnPointClickCallback.event The
* mouse or click event that occurred.
*
* @interface {PrimeFaces.widget.GMap.IdProviding} IdProviding Interface for objects that provide an ID that uniquely
* identifies the object.
* @prop {string} IdProviding.id The ID that uniquely identifies this object.
*
* @prop {google.maps.Map} map The current google maps instance.
* @prop {PrimeFaces.widget.GMap.Overlay} selectedOverlay The currently selected and active overlay shape.
* @prop {google.maps.LatLngBounds} viewport The spherical portion of the earth's surface that is currently shown in the map
* viewport.
*
* @interface {PrimeFaces.widget.GMapCfg} cfg The configuration for the {@link GMap| GMap widget}.
* You can access this configuration via {@link PrimeFaces.widget.BaseWidget.cfg|BaseWidget.cfg}. Please note that this
* configuration is usually meant to be read-only and should not be modified.
* @extends {PrimeFaces.widget.DeferredWidgetCfg} cfg
* @extends {google.maps.MapOptions} cfg
*
* @prop {(google.maps.Circle & PrimeFaces.widget.GMap.IdProviding)[]} cfg.circles List of overlay circular shapes added
* to this map.
* @prop {boolean} cfg.fitBounds Defines if center and zoom should be calculated automatically to contain all markers on
* the map.
* @prop {google.maps.InfoWindow} cfg.infoWindow The current info window instance, if any info window was created yet.
* @prop {string} cfg.infoWindowContent HTML string with the contents of the info window, as fetched from the server.
* @prop {(google.maps.Marker & PrimeFaces.widget.GMap.IdProviding)[]} cfg.markers A list of markers to display on the
* map.
* @prop {PrimeFaces.widget.GMap.OnPointClickCallback} cfg.onPointClick Javascript callback to execute when a point on
* map is clicked.
* @prop {(google.maps.Polygon & PrimeFaces.widget.GMap.IdProviding)[]} cfg.polygons List of overlay polygonal shapes
* added to this map.
* @prop {(google.maps.Polyline & PrimeFaces.widget.GMap.IdProviding)[]} cfg.polylines List of overlay polyline shapes
* added to this map.
* @prop {(google.maps.Rectangle & PrimeFaces.widget.GMap.IdProviding)[]} cfg.rectangles List of overlay rectangular
* shapes added to this map.
*/
PrimeFaces.widget.GMap = PrimeFaces.widget.DeferredWidget.extend({
/**
* @override
* @inheritdoc
* @param {PrimeFaces.PartialWidgetCfg} cfg
*/
init: function(cfg) {
this._super(cfg);
this.renderDeferred();
},
/**
* @include
* @override
* @protected
* @inheritdoc
*/
_render: function() {
this.map = new google.maps.Map(document.getElementById(this.id), this.cfg);
this.cfg.fitBounds = !(this.cfg.fitBounds === false);
this.viewport = this.map.getBounds();
//conf markers
if(this.cfg.markers) {
this.configureMarkers();
}
//add polylines
if(this.cfg.polylines) {
this.configurePolylines();
}
//add polygons
if(this.cfg.polygons) {
this.configurePolygons();
}
//add circles
if(this.cfg.circles) {
this.configureCircles();
}
//add rectangles
if(this.cfg.rectangles) {
this.configureRectangles();
}
//general map events
this.configureEventListeners();
//fit auto bounds
if(this.cfg.fitBounds && this.viewport)
this.map.fitBounds(this.viewport);
//bind infowindow domready for dynamic content.
if(this.cfg.infoWindow){
var _self = this;
google.maps.event.addListener(this.cfg.infoWindow, 'domready', function() {
_self.loadWindow(_self.cfg.infoWindowContent);
});
}
},
/**
* Returns the current google maps instance.
* @return {google.maps.Map} The current map instance.
*/
getMap: function() {
return this.map;
},
/**
* The info window that can be displayed to provide detailed information when a marker is selected.
* @return {google.maps.InfoWindow | undefined} The current info window instance, if any exists.
*/
getInfoWindow: function() {
return this.cfg.infoWindow;
},
/**
* Writes the given HTML content into the info window.
* @private
* @param {string} content HTML content for the info window.
*/
loadWindow: function(content){
this.jq.find(PrimeFaces.escapeClientId(this.getInfoWindow().id + '_content')).html(content||'');
},
/**
* Loads the contents of the info window from the server and open the info window.
* @private
* @param {XMLDocument} responseXML The XML that was returned by the AJAX request made to fetch the contents of the
* info window.
* @return {boolean} `true` if the info window load was initiated successfully, or `false` otherwise.
*/
openWindow: function(responseXML) {
var infoWindow = this.getInfoWindow();
var $this = this;
PrimeFaces.ajax.Response.handle(responseXML, null, null, {
widget: infoWindow,
handle: function(content) {
$this.cfg.infoWindowContent = content;
infoWindow.setContent('' + content + '');
infoWindow.open($this.getMap(), $this.selectedOverlay);
}
});
return true;
},
/**
* Adds and sets up all configured markers for the gmap.
* @private
*/
configureMarkers: function() {
var _self = this;
for(var i=0; i < this.cfg.markers.length; i++) {
var marker = this.cfg.markers[i];
marker.setMap(this.map);
//extend viewport
if(this.cfg.fitBounds)
this.extendView(marker);
//overlay select
google.maps.event.addListener(marker, 'click', function(event) {
_self.fireOverlaySelectEvent(event, this, 1);
});
google.maps.event.addListener(marker, 'dblclick', function(event) {
_self.fireOverlaySelectEvent(event, this, 2);
});
//marker drag
google.maps.event.addListener(marker, 'dragend', function(event) {
_self.fireMarkerDragEvent(event, this);
});
}
},
/**
* Calls the behavior for when a marker was dragged.
* @private
* @param {google.maps.MapMouseEvent | google.maps.IconMouseEvent} event Event that occurred.
* @param {google.maps.MarkerOptions} marker The marker that was dragged.
*/
fireMarkerDragEvent: function(event, marker) {
if(this.hasBehavior('markerDrag')) {
var ext = {
params: [
{name: this.id + '_markerId', value: marker.id},
{name: this.id + '_lat', value: event.latLng.lat()},
{name: this.id + '_lng', value: event.latLng.lng()}
]
};
this.callBehavior('markerDrag', ext);
}
},
/**
* Finds the geocode for the given address and calls the server-side `geocode` behavior, if such a behavior exists.
* Use ` © 2015 - 2024 Weber Informatics LLC | Privacy Policy