Appearance
Javascript API
With the Javascript API, you are able to modify the data without any EE tags. You can add markers, cirlces etc but also you`re able to modify the Map style etc.
In the methods where you work with the markers, you have to enter a key
that belongs to the marker. This key is the latlng or the address you entered or a self chosen key
Maps ready function
This will execute after the (all) Maps is fully loaded
REINOS_MAPS.ready(function(){
//your logic code
});
refresh
mapID : the ID
of the map (eg reinos_map_1
)
Refresh the map, so its update all data
REINOS_MAPS.api('refresh', {
mapID : '',
});
setZoom
mapID : the ID
of the map (eg reinos_map_1
)
zoomLevel : zoom level between 0-21
depending on the tile settings
Set the zoom level of the map
REINOS_MAPS.api('setZoom', {
mapID : '' ,
zoom : ''
});
zoomOut
mapID : the ID
of the map (eg reinos_map_1
)
REINOS_MAPS.api('zoomOut', {
mapID : '' ,
});
zoomIn
mapID : the ID
of the map (eg reinos_map_1
)
REINOS_MAPS.api('zoomIn', {
mapID : '' ,
});
fitMap
mapID : the ID
of the map (eg reinos_map_1
)
type : markers
circles
rectangles
polygons
polylines
Fit the map based on the markers, circles, rectangles, polygons or polylines
omit the type, will result in fit the map based on all types
REINOS_MAPS.api('fitMap', {
mapID : '',
type : ''
});
center
mapID : the ID
of the map (eg reinos_map_1
)
lat : the lng
coordinate
lng: the lat
coordinate
Center the map based on coordinates
REINOS_MAPS.api('center', {
mapID : '',
lat : '',
lng: ''
});
getMap
mapID : the ID
of the map (eg reinos_map_1
)
Get a map instance
REINOS_MAPS.api('getMap', {
mapID : ''
});
removeMap
mapID : the ID
of the map (eg reinos_map_1
)
Remove a map instance
REINOS_MAPS.api('removeMap', {
mapID : ''
});
updateMap
mapID : the ID
of the map (eg reinos_map_1
)
options: a object with map options
Update a map
REINOS_MAPS.api('updateMap', {
mapID : '',
options: {
width: '200px',
height: '400px',
center: '<lat>,<lng>',
zoom: '10',
scroll_wheel: true,
zoom_control: true,
zoom_control_position: 'topleft',
scale_control: true',
scale_control_position: 'topleft',
overlay_html: '',
}
});
addMarker
mapID : the ID
of the map (eg reinos_map_1
)
lat : latitude coordinate
lng : longitude coordinate
tooltip : tooltip object popup : popup object
Add a new marker to a map
REINOS_MAPS.api('addMarker', {
mapID : '',
lat : '',
lng : '',
tooltip : {
content: ''
},
popup : {
popupContent : ''
}
});
removeMarker
mapID : the ID
of the map (eg reinos_map_1
)
key : the key of the marker
Remove Marker
REINOS_MAPS.api('removeMarker', {
mapID : '',
key: ''
});
removeMarkers
mapID : the ID
of the map (eg reinos_map_1
)
Remove all Marker
REINOS_MAPS.api('removeMarker', {
mapID : ''
});
hideMarker
mapID : the ID
of the map (eg reinos_map_1
)
key : the key of the marker
Hide Marker
REINOS_MAPS.api('', {
mapID : '',
key: ''
});
hideMarkers
mapID : the ID
of the map (eg reinos_map_1
)
Hide all Marker
REINOS_MAPS.api('', {
mapID : ''
});
showMarker
mapID : the ID
of the map (eg reinos_map_1
)
key : the key of the marker
This method will show a marker which is removed or hided from the map.
REINOS_MAPS.api('showMarker', {
mapID : '',
key: ''
});
showMarkers
mapID : the ID
of the map (eg reinos_map_1
)
This method will show all marker which is removed or hided from the map.
REINOS_MAPS.api('showMarker', {
mapID : ''
});
getMarker
mapID : the ID
of the map (eg reinos_map_1
)
key: The marker key
Get a marker
REINOS_MAPS.api('getMarker', {
mapID : '',
key: ''
});
getMarkers
mapID : the ID
of the map (eg reinos_map_1
)
Get all the markers for a specific map
REINOS_MAPS.api('', {
mapID : ''
});
getAllMarkers
Get all map markers
REINOS_MAPS.api('getAllMarkers');
markerClick
mapID : the ID
of the map (eg reinos_map_1
)
key : the key of the marker
callback : a callback function
Trigger an onClick event on a marker
REINOS_MAPS.api('markerClick', {
mapID : '',
key : '',
callback: function(){}
});
openMarkerPopup
mapID : the ID
of the map (eg reinos_map_1
)
key : the key of the marker
Open a marker popup
REINOS_MAPS.api('openMarkerPopup', {
mapID : ''
key : ''
});
closeMarkerPopup
mapID : the ID
of the map (eg reinos_map_1
)
key : the key of the marker
Close a marker popup
REINOS_MAPS.api('closeMarkerPopup', {
mapID : ''
key : ''
});
toggleMarkerPopup
mapID : the ID
of the map (eg reinos_map_1
)
key : the key of the marker
Toggle a marker popup
REINOS_MAPS.api('toggleMarkerPopup', {
mapID : ''
key : ''
});
addCircle
mapID : the ID
of the map (eg reinos_map_1
)
lat: Lat coordinate
lng: lng coordinate
color: The stroke color
weight: Weight of the stroke
opacity: Stroke opacity
fillColor: the fill color
fillOpacity: the opacity of the fill
radius: Radius in meters,
Add a circle
REINOS_MAPS.api('addCircle', {
mapID : '',
lat: '',
lng: '',
color: '',
weight: '',
opacity: '',
fillColor: '',
fillOpacity: '',
radius: ''
});
getCircle
mapID : the ID
of the map (eg reinos_map_1
)
key: the key of the circle
Get a circle
REINOS_MAPS.api('getCircle', {
mapID : '',
key: ''
});
removeCircle
mapID : the ID
of the map (eg reinos_map_1
)
key: the key of the circle
Remove a circle
REINOS_MAPS.api('removeCircle', {
mapID : '',
key: ''
});
addRectangle
mapID : the ID
of the map (eg reinos_map_1
)
latlngs: an array of latlng array color: The stroke color
weight: Weight of the stroke
opacity: Stroke opacity
fillColor: the fill color
fillOpacity: the opacity of the fill
Add a Rectangle
REINOS_MAPS.api('addRectangle', {
mapID : '',
bounds: '',
color: '',
weight: '',
opacity: '',
fillColor: '',
fillOpacity: '',
radius: ''
});
getRectangle
mapID : the ID
of the map (eg reinos_map_1
)
key: the key of the Rectangle
Get a rectangle
REINOS_MAPS.api('Get a rectangle', {
mapID : '',
key: ''
});
removeRectangle
mapID : the ID
of the map (eg reinos_map_1
)
key: the key of the Rectangle
Remove a Rectangle
REINOS_MAPS.api('removeRectangle', {
mapID : '',
key: ''
});
addPolygon
mapID : the ID
of the map (eg reinos_map_1
)
latlngs: array of latLng array color: The stroke color
weight: Weight of the stroke
opacity: Stroke opacity
fillColor: the fill color
fillOpacity: the opacity of the fill
Add a Polygon
REINOS_MAPS.api('addPolygon', {
mapID : '',
path: '',
color: '',
weight: '',
opacity: '',
fillColor: '',
fillOpacity: '',
});
getPolygon
mapID : the ID
of the map (eg reinos_map_1
)
key: the key of the Polygon
Get a Polygon
REINOS_MAPS.api('getPolygon', {
mapID : '',
key: ''
});
removePolygon
mapID : the ID
of the map (eg reinos_map_1
)
key: the key of the Polygon
Remove a Polygon
REINOS_MAPS.api('removePolygon', {
mapID : '',
key: ''
});
addPolyline
mapID : the ID
of the map (eg reinos_map_1
)
latlngs: array of latLng array color: The stroke color
weight: Weight of the stroke
opacity: Stroke opacity
Add a Polyline
REINOS_MAPS.api('addPolyline', {
mapID : '',
latlngs: '',
color: '',
weight: '',
opacity: ''
});
getPolyline
mapID : the ID
of the map (eg reinos_map_1
)
key: the key of the Polyline
Get a Polyline
REINOS_MAPS.api('getPolyline', {
mapID : '',
key: ''
});
removePolyline
mapID : the ID
of the map (eg reinos_map_1
)
key: the key of the Polyline
Remove a Polyline
REINOS_MAPS.api('removePolyline', {
mapID : '',
key: ''
});
geolocation
callback : a callback function
Geolocate to the current location
REINOS_MAPS.api('geolocation', {
callback : function(position){}
});
geocode
address : addres to geocode, multiple addresses seperated by a pipline '|'
latlng : latlng to reverse geocode, multiple latlngs seperated by a pipline '|'
ip : ip to geocode, multiple ips seperated by a pipline '|'
callback : function that will be triggered when the results are loaded
Geocode (using the caching function of Maps)
REINOS_MAPS.api('geocode', {
address: '',
latlng : '',
ip : '',
callback : function(result, type){}
}});
geocode result
in the callback the result of your request looks like
{
"success":true,
"objects":[
{
"latitude":52.21115700000001,
"lat":52.21115700000001,
"longitude":5.9699231,
"lng":5.9699231,
"latlng":"52.211157,5.9699231",
"bounds":[
{
"south":52.172528,
"west":5.8925689,
"north":52.25032119999999,
"east":6.0582248
}
],
"street_name":null,
"street_number":null,
"city":"Apeldoorn",
"locality":"Apeldoorn",
"zipcode":null,
"admin_levels":[
{
"level":1,
"name":"Gelderland",
"code":"GE"
},
{
"level":2,
"name":"Apeldoorn",
"code":"Apeldoorn"
}
],
"city_district":null,
"sub_locality":null,
"country":"Netherlands",
"country_code":"NL",
"timezone":null,
"default_title":"Apeldoorn, Netherlands",
"address":"Apeldoorn, Netherlands"
}
]
}
Default callback
As third param you can specify a callback. this is for every method the same.
REINOS_MAPS.api('addMarker', {
address: 'new york',
mapID: 'reinos_maps_1'
}}, function(){
//this is the default callback function
});
Events
For the following methods {maps:add_circle}
{maps:add_geojson}
{maps:add_kml}
{maps:add_marker}
{maps:add_polygon}
{maps:add_polylines}
{maps:add_rectangle}
there are 2 events that would be called and where you can hook into.
[type].ready
This event is called when all data is loaded and placed on the map.
<script>
REINOS_MAPS.on('markers.ready', function(){
//your logic
});
</script>
[type].beforeReady
This event is called when before the data is loaded and placed on the map.
<script>
REINOS_MAPS.on('markers.beforeReady', function(){
//your logic
});
</script>