j-Map

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

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)
important: the component element (or its CSS) must have defined width and height style attributes

Configuration:

key IMPORTANT Google API key
type (optional) has to contain a map type (roadmap (default), satellite, hybrid, terrain)
draggable (optional) for drag & drop marker (default: false)
click (optional) has to contain a function name and this method is evaluated when the user click on the marker
zoom (optional), default 13
icon (optional) has to contain a URL to a new icon marker
animation (optional) has to contain a animation type (bounce and drop)

Methods:

component.search(lat, lng) arguments must be numbers
component.search(text) arguments must be a string
component.reset() call resize event (useful for modals)
component.reset(lat, lng) arguments must be numbers

Use it with <ui-component name="map">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

example.html

<ui-component name="map" path="mygps" config="zoom:10;draggable:false;animation:bounce" style="width:300px;height:150px"></ui-component>

<script>
	var mygps = '48.727903,19.157763';
</script>