Web Component: j-MapMarker


  • Info
  • HTML
  • JS
  • CSS
  • Meta
Questions? Write us

j-MapMarker (BETA)

  • easy usage
  • path="target.property" can contain GPS 48.727903,19.157763 or text Viestova 28, Banská Bystrica, Slovakia
  • two way binding works with GPS (so the component returns GPS coordinates into the model when the text is used instead of GPS)

Google API:

  • allow geometry services

Configuration:

  • key {String} IMPORTANT Google API key
  • type {String} needs to contain a map type (roadmap (default), satellite, hybrid, terrain)
  • draggable {Boolean} for drag & drop marker (default: false)
  • zoom {Number}, default 13
  • autocomplete {Boolean} enables auto-complete API (default: false and input must be attached by mapmarker/autocomplete method)
  • icon needs to contain a URL to a new icon marker
  • animation needs to contain a animation type (bounce and drop)
  • darkmode {Boolean} enables dark mode (default: false)
  • parent {String} jQuery selector which will be used as height container (default: auto)
  • height {Number} height of the map (default: undefined)
  • heightlg {Number} height of the map (default: undefined)
  • heightmd {Number} height of the map (default: undefined)
  • heightsm {Number} height of the map (default: undefined)
  • heightxs {Number} height of the map (default: undefined)
  • margin {Number} top/bottom margin of the map (default: 0)
  • marginlg {Number} top/bottom margin of the map (default: undefined)
  • marginmd {Number} top/bottom margin of the map (default: undefined)
  • marginsm {Number} top/bottom margin of the map (default: undefined)
  • marginxs {Number} top/bottom margin of the map (default: undefined)
  • markerwidth {Number} marker width, default 40
  • markerheight {Number} marker height, default: 50
  • markeroffsetx {Number} marker X offset, default 1
  • markeroffsety {Number} marker Y offset, default: 0
  • infox {Number} label offset Y, default: 0
  • infoy {Number} label offset X, default: 0
  • labelopacity {Number} marker label opacity, default: 0.75
  • markercluster {Boolean} enables marker clusterer (default: true)
  • onposition {String} a path to function(component, visible_markers) - evaluated when the position on the map is changed
  • onready {String} a path to function(component) - evaluated when the map is ready to use

Methods:

  • component.autocomplete(input) input for autocomplete
  • component.clear() Removes all markers
  • component.add(opt) Adds marker
    • opt.icon URL address to icon
    • opt.gps {String} GPS position
    • opt.center {Boolean} centers the map to this position
    • opt.tooltip {String} tooltip for the marker
    • opt.callback {Function(opt)} triggered when the marker is added
    • opt.onclick {Function(opt)} triggered when the user clicks on the marker
    • opt.onposition {Function(opt)} triggered when the user changes the position of the map
    • IMPORTANT: opt will be extendend by adding methods: opt.remove(), opt.setIcon(url), opt.setPosition(gps), opt.setVisible(boolean) and properties: opt.element, opt.marker, opt.map and opt.zoom

Author

Real-time preview

Refresh previewDownload HTMLSource-Code on GitHub