© Kademi 2022
jQuery OrgFinder v1.0.0
Configuration
Name | Type | Description |
---|---|---|
initLatLng | Array<Number> | Initialized latitude and longitude of map |
initZoomLevel | Number | Initialized zoom level of map |
initQuery | String | Initialized search query |
googleAPIKey | String | Google API key |
searchUrl | String | Search URL. Must be link to signup page of a group or /organisations/ (if you use this plugin in Kademi admin console) |
template | String | Template string for orgFinder. Form search must has 'org-finder-search' class and textbox must be named 'q'. Items list wrapper must has 'org-finder-list' class. Map div must has class 'org-finder-map' |
onReady | Function | Callback will be called when orgFinder is ready. Arguments: 'formSearch', 'itemsWrapper', 'mapDiv' |
onSelect | Function | Callback will be called when click on marker on map or item in org list panel. Arguments: 'orgData', 'item', 'marker', 'infoWindow' |
onSearch | Function | Callback will be called when when search a keyword. Arguments: 'query' |
renderItemContent | Function | Method for rendering content of an item in organization list. If you don't want to show this organization, just return null or empty. Arguments: 'orgData' |
renderMarkerContent | Function | Method for rendering content for InfoWindow of a marker on Google Map. If you don't want to show this organization, just return null or empty. Arguments: 'orgData' |
Default Configuration
{ initLatLng: [], initZoomLevel: 15, initQuery: null, googleAPIKey: null, searchUrl: null, template: '<form role="form" class="form-horizontal form-search org-finder-search" action="" style="margin-bottom: 15px;">' + ' <div class="input-group input-group-lg">' + ' <input type="text" name="q" class="form-control" placeholder="Enter keyword to search..." value="" />' + ' <span class="input-group-btn">' + ' <button class="btn btn-default" type="submit">Search</button>' + ' </span>' + ' </div>' + '</form>' + '<div class="row" style="margin-bottom: 40px;">' + ' <div class="col-md-4">' + ' <div class="panel panel-default">' + ' <div class="panel-heading">List stores</div>' + ' <div class="list-group org-finder-list" style="overflow-y: auto;"></div>' + ' </div>' + ' </div>' + ' <div class="col-md-8">' + ' <div class="embed-responsive embed-responsive-16by9">' + ' <div class="embed-responsive-item org-finder-map"></div>' + ' </div>' + ' </div>' + '</div>' , onReady: function (formSearch, itemsWrapper, mapDiv) { }, onSelect: function (orgData, item, marker, infoWindow) { }, onSearch: function (query) { }, renderItemContent: function (orgData) { var itemContent = ''; itemContent += '<h4 class="list-group-item-heading">' + (orgData.orgTypeDisplayName || orgData.title ) + '</h4>'; if (orgData.phone) { itemContent += '<p class="list-group-item-text"><strong>Phone:</strong> ' + orgData.phone + '</p>'; } if (orgData.email) { itemContent += '<p class=list-group-item-text"><strong>Email:</strong> <a href="mailto:' + orgData.email + '">' + orgData.email + '</a></p>'; } if (orgData.address) { itemContent += '<p class="list-group-item-text"><strong>Address:</strong> ' + orgData.address + '</p>'; } if (orgData.addressLine2) { itemContent += '<p class=list-group-item-text"><strong>Address Line 2:</strong> ' + orgData.addressLine2 + '</p>'; } if (orgData.addressState) { itemContent += '<p class="list-group-item-text"><strong>State:</strong> ' + orgData.addressState + '</p>'; } if (orgData.country) { itemContent += '<p class="list-group-item-text"><strong>Country:</strong> ' + orgData.country + '</p>'; } if (orgData.postcode) { itemContent += '<p class="list-group-item-text"><strong>Postcode:</strong> ' + orgData.postcode + '</p>'; } return '<div class="list-group-item">' + itemContent + '</div>'; }, renderMarkerContent: function (orgData) { var markerContent = ''; markerContent += '<h1>' + (orgData.orgTypeDisplayName || orgData.title ) + '</h1>'; if (orgData.phone) { markerContent += '<div><strong>Phone:</strong> ' + orgData.phone + '</div>'; } if (orgData.email) { markerContent += '<div><strong>Email:</strong> <a href="mailto:' + orgData.email + '">' + orgData.email + '</a></div>'; } if (orgData.address) { markerContent += '<div><strong>Address:</strong> ' + orgData.address + '</div>'; } if (orgData.addressLine2) { markerContent += '<div><strong>Address Line 2:</strong> ' + orgData.addressLine2 + '</div>'; } if (orgData.addressState) { markerContent += '<div><strong>State:</strong> ' + orgData.addressState + '</div>'; } if (orgData.country) { markerContent += '<div><strong>Country:</strong> ' + orgData.country + '</div>'; } if (orgData.postcode) { markerContent += '<div><strong>Postcode:</strong> ' + orgData.postcode + '</div>'; } return '<div>' + markerContent + '</div>'; } }
Hide comments