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>