jquery-locationpicker-plugin
jquery-locationpicker-plugin copied to clipboard
Move marker and don't pan the map to new position
Hi I'm using the library but I needed to move the marker on the map but prevent the map from centering in the new marker position, so I did some changes to the code and came with this workaround:
Added new option to defaults called 'centerMarker'
$.fn.locationpicker.defaults = { location: {latitude: 40.7324319, longitude: -73.82480777777776}, locationName: "", radius: 500, zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP, styles: [], mapOptions: {}, scrollwheel: true, inputBinding: { latitudeInput: null, longitudeInput: null, radiusInput: null, locationNameInput: null }, enableAutocomplete: false, enableAutocompleteBlur: false, autocompleteOptions: null, addressFormat: 'postal_code', enableReverseGeocode: true, draggable: true, onchanged: function(currentLocation, radius, isMarkerDropped) {}, onlocationnotfound: function(locationName) {}, oninitialized: function (component) {}, // must be undefined to use the default gMaps marker markerIcon: undefined, markerDraggable: true, markerVisible : true, centerMarker: true }
Validate the new setting on setPosition
setPosition: function(gMapContext, location, callback) { gMapContext.location = location; gMapContext.marker.setPosition(location); if (gMapContext.settings.centerMarker) gMapContext.map.panTo(location); this.drawCircle(gMapContext, location, gMapContext.radius, {}); if (gMapContext.settings.enableReverseGeocode) { this.updateLocationName(gMapContext, callback); } else { if (callback) { callback.call(this, gMapContext); } } }
Send the new setting when creating the locationpicker
$('#us313').locationpicker({ location: { latitude: $('#place_latitude12').val(), longitude: $('#place_longitude12').val() }, radius: 0, zoom:16, mapOptions: { disableDefaultUI: true }, markerInCenter:false, scrollwheel:false, centerMarker: false, draggable:false, inputBinding: { latitudeInput: $('#place_latitude12'), longitudeInput: $('#place_longitude12'), locationNameInput: $('#us313-address') }, enableAutocomplete: true, markerIcon: '../images/map-marker-2-xl.png', onchanged: function(currentLocation, radius, isMarkerDropped) { if(isMarkerDropped) { if(validateBounds()) alert('hola'); else alert('adios'); } } });
What do you think? Is this the best way of doing it? I've already test it and its working fine for me