123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195 |
- /* ------------------------------------------------------------------------------
- *
- * # Location pickers
- *
- * Demo JS code for picker_location.html page
- *
- * ---------------------------------------------------------------------------- */
- // Setup module
- // ------------------------------
- var LocationPicker = function() {
- //
- // Setup module components
- //
- // Location picker
- var _componentLocation = function() {
- if (!$().locationpicker) {
- console.warn('Warning - location.js is not loaded.');
- return;
- }
- // Basic functionality
- $('.locationpicker-default').locationpicker({
- radius: 150,
- scrollwheel: false,
- zoom: 10
- });
- // Manipulating from callback
- $('.locationpicker-manipulate').locationpicker({
- location: {
- latitude: 46.15242437752303,
- longitude: 2.7470703125
- },
- radius: 300,
- onchanged: function(currentLocation, radius, isMarkerDropped) {
- var mapContext = $(this).locationpicker('map');
- mapContext.map.setZoom(20);
- }
- });
- // Binding UI with the widget
- $('#us2').locationpicker({
- location: {latitude: 44.1219256, longitude: 15.2357175},
- radius: 300,
- scrollwheel: false,
- inputBinding: {
- latitudeInput: $('#us2-lat'),
- longitudeInput: $('#us2-lon'),
- radiusInput: $('#us2-radius'),
- locationNameInput: $('#us2-address')
- }
- });
- // Subscribing for events
- $('#us3').locationpicker({
- location: {latitude: 47.494293, longitude: 19.054151899999965},
- radius: 300,
- scrollwheel: false,
- inputBinding: {
- latitudeInput: $('#us3-lat'),
- longitudeInput: $('#us3-lon'),
- radiusInput: $('#us3-radius'),
- locationNameInput: $('#us3-address')
- },
- enableAutocomplete: true,
- onchanged: function(currentLocation, radius, isMarkerDropped) {
- alert("Location changed. New location (" + currentLocation.latitude + ", " + currentLocation.longitude + ")");
- }
- });
- };
- // Typeahead address picker
- var _componentAddressTypeahead = function() {
- if (typeof AddressPicker == 'undefined' || !$().typeahead) {
- console.warn('Warning - typeahead_addresspicker.js and/or typeahead.bundle.min.js is not loaded.');
- return;
- }
- // Instantiate the addressPicker suggestion engine (based on bloodhound)
- var addressPicker = new AddressPicker({
- map: {
- id: '#map',
- scrollwheel: false,
- zoom: 10,
- center: new google.maps.LatLng(53.5510846, 9.99368179999999)
- },
- reverseGeocoding: true,
- autocompleteService: {
- types: ['(cities)'],
- componentRestrictions: {
- country: 'DE'
- }
- }
- });
- // Instantiate the typeahead UI
- $('#address').typeahead(null, {
- displayKey: 'description',
- limit: 20,
- source: addressPicker.ttAdapter()
- });
- // Bind event
- addressPicker.bindDefaultTypeaheadEvent($('#address'));
- // When address is selected
- $(addressPicker).on('addresspicker:selected', function (event, result) {
- Prism.highlightAll();
- html = ["Address: " + result.address()]
- html.push("Latitude: " + result.lat())
- html.push("Longitude: " + result.lng())
- html.push("Long names:")
- result.addressTypes().forEach(function(type) {
- html.push(" " + type + ": " + result.nameForType(type))
- });
- html.push("Short names:")
- result.addressTypes().forEach(function(type) {
- html.push(" " + type + ": " + result.nameForType(type, true))
- });
- $('#response code').html( html.join('\n'));
- });
- };
- // Autocomplete address picker
- var _componentAddressAutocomplete = function() {
- if (!$().addresspicker ) {
- console.warn('Warning - typeahead_addresspicker.js is not loaded.');
- return;
- }
-
- // Initialization
- var addresspickerMap = $('#addresspicker_map').addresspicker({
- regionBias: 'fr',
- updateCallback: showCallback,
- mapOptions: {
- zoom: 10,
- center: new google.maps.LatLng(48.856614, 2.3522219000000177),
- scrollwheel: false,
- mapTypeId: google.maps.MapTypeId.ROADMAP
- },
- elements: {
- map: '#map2'
- }
- });
- // Add markers
- var gmarker = addresspickerMap.addresspicker('marker');
- gmarker.setVisible(true);
- addresspickerMap.addresspicker('updatePosition');
- // Reverse Geocode after Marker Drag
- $('#reverseGeocode').on('change', function(){
- $('#addresspicker_map').addresspicker('option', 'reverseGeocode', ($(this).val() === 'true'));
- });
- // Callback
- function showCallback(geocodeResult, parsedGeocodeResult){
- $('#response2 code').text(JSON.stringify(parsedGeocodeResult, null, 4));
- Prism.highlightAll();
- }
- // Update zoom field
- var map = $('#addresspicker_map').addresspicker('map');
- google.maps.event.addListener(map, 'idle', function(){
- $('#zoom').val(map.getZoom());
- });
- };
- //
- // Return objects assigned to module
- //
- return {
- init: function() {
- _componentLocation();
- _componentAddressTypeahead();
- _componentAddressAutocomplete();
- }
- }
- }();
- // Initialize module
- // ------------------------------
- document.addEventListener('DOMContentLoaded', function() {
- LocationPicker.init();
- });
|