Config Options

All these config options can be set on individual mapInput elements using data attributes with the config name in kebab case. For example to customise the pinBackground, you can use the data-pin-background attribute.

To override global config options, you can do so before mapInput is initialized. For example, to change the default iconPrefix:

import {mapInput} from '@javaabu/js-map-selector';

mapInput.config.iconPrefix = 'zmdi';

mapInput.init();

Config Option	Type	Default	Description
iconPrefix	String	'fa'	Prefix to be used for icons when setting a pin icon
iconClass	String	'map-selector-icon'	Additional class added to pin icons
mapSelector	String	'.map-selector-map'	Selector for the element to display the map
latInput	String	'input.map-selector-lat'	Selector for latitude input
lngInput	String	'input.map-selector-lng'	Selector for longitude input
searchInput	String	'.map-selector-search'	Selector for the search input to be used within the map to set the location by search
lat	Number	null	The default latitude. Must be a valid latitude value. If latInput is available, will load the latitude from its value.
lng	Number	null	The default longitude. Must be a valid longitude value. If lngInput is available, will load the longitude from its value.
radius	Number	null	The radius of the circle when using the radius feature. If radiusInput is available, will load the radius from its value. To use this enableRadius must be true. The radius can be set in either meters or kilometers by using the radiusUnit config.
polygon	String	null	The path of the polygon as a WKT string when using the polygon feature. The wrapping POLYGON() string can be omitted if desired. Only supports polygons with a single path. All points in the path must be valid latitude and longitude values. Must have more than 2 points and the first and last points should be same. If polygonInput is available, will load the polygon from its value. To use this enablePolygon must be set to true.
clearBtn	String	'.map-selector-clear-btn'	Selector for the clear button that's used to clear the inputs
zoom	Integer	14	Map zoom level
disabled	Boolean	false	Whether to disable the map selector inputs. This will make all map elements (marker, circle, polygon) uneditable and will also hide the search input. This option can be useful when only displaying map elements without any inputs.
animate	Boolean	true	Whether to animate in the map pin. This will add the pinAnimationClass to the marker when the map is initially displayed and remove it after animation is ended.
pinAnimationClass	String	'map-selector-marker-drop'	The CSS class used to animate the marker.
enableMarker	Boolean	true	Whether the marker should be displayed.
pinImage	String	null	Url of the image to use for the marker. If using this option, pinIcon, pinScale, pinBackground, pinBorderColor and pinGlyphColor will not apply.
pinIcon	String	null	Icon to be displayed as the marker pin glyph
pinScale	Number	1.5	The size of the marker. Will not work with pinImage option.
pinClass	String	'map-selector-marker'	Additional CSS class added to the marker. Can be used to further style the marker.
pinBackground	String	null	Background color for the marker pin as a CSS color string.
pinBorderColor	String	null	Border color for the marker pin as a CSS color string.
pinGlyphColor	String	null	Background color for the marker pin as a CSS color string. The glyph is the circle that's displayed on the pin.
enableRadius	Boolean	false	Whether the radius input circle should be displayed.
radiusInput	String	'input.map-selector-radius'	Selector for the radius input.
radiusUnit	String	'm'	Which unit to use for radius. Can be either 'm' for meters or 'km' for kilometers.
radiusPrecision	Integer	0	How many decimal places should be used for the radius when setting the radiusInput value when the radius is updated upon editing the circle.
circleStrokeColor	String	'#FF9800'	Border color for the radius input circle as a CSS color string.
circleStrokeOpacity	Number	0.8	Opacity of the radius input circle border.
circleStrokeWeight	Integer	3	Thickness of the radius input circle border.
circleFillColor	String	'#FF9800'	Background color for the radius input circle as a CSS color string.
circleFillOpacity	Number	0.2	Opacity of the radius input circle background.
enablePolygon	Boolean	false	Whether the polygon should be displayed.
polygonRadius	Number	10	"Radius" (in meters) of the default square polygon when no polygon path is provided. This will create a square of length twice the size with the mid point at the provided lat and lng.
polygonInput	String	'.map-selector-polygon'	Selector for the polygon input.
polygonStrokeColor	String	'#FF5722'	Border color for the polygon as a CSS color string.
polygonStrokeOpacity	Number	0.8	Opacity of the polygon border.
polygonStrokeWeight	Integer	3	Thickness of the polygon border.
polygonFillColor	String	'#FF5722'	Background color of the polygon as a CSS color string.
polygonFillOpacity	Number	0.2	Opacity of the polygon background.
mapId	String	'DEMO_MAP_ID'	Id of the map if using a customized Google Map