Maps

Introduction

Always have trouble with the integration of Mapping tools like Google Maps etc on your site? Always struggling to get it work? Well, those days are gone with the Maps module for ExpressionEngine. You can now easily create Maps, markers, polygon, routes and more.

Maps was build to make a mapping tool that can be used for free, no extra cost from API services

Features

There is a lot possible with the default Maps module, see the example page page for the 50+ examples

Maps Modules

For the Maps modules there are a couple of modules that extend the Maps with extra functionality

Installation

Prerequisites

Make sure your system meets the minimum requirements:

Installation Instructions

Update instructions

License field

This module is using a license field to check if the license for the module is valid or not. On addons.reinos.nl you can check your license and your valid domains.

Control panel overview

In the Module CP you can enter then your license Control panel overview

When you enter a wrong license, the module will not work and it shows you an warning Control panel overview

On a local environment, like *.dev *.local *.localhost the license will be valid for the testing and building new sites.

Important notes

Examples

Examples can be found here

Migration from Gmaps

The Maps module add some new things but also dropped some functions compared to the Gmaps module.

The following functions are removed

The following functions are changed

API Keys

By default the free services from OpenSteetmap is used for the Tiles and Geocoding.

For some Providers and Tiles, you need a API key. In the CP there will be a description how to obtains such API Key.

CP Overview

On the CP page you can modify a couple of things.

Settings

Control panel overview

Geocoding providers

Here you can select what Geocoding service you want to use. By default openstreetmap Map Providers

Tile Providers

Here you can select the Tile to use as overlay what result in a viewable map. By default openstreetmap Map Tiles

Logs

Maps will log important errors to the main Log.

Cache

Control all you cached addresses. Be careful with this cached data, delete it only when you have to (due the geocoding limits of Google).

Map Cache

Init tag

This tag will ensure that all Javascript is loaded correctly. Just place this in the <head> of your page.

The tag

{exp:maps:init
   lang="en_US"
}

Tag Parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above

lang

the language code. e.g. en-US or nl-NL or nl-BE, Default to your current browser language

lang=""

catch_output_js

Catch the JS output so later on you can use the {exp:maps:output_js} tag to ouput all the js code

catch_output_js="no"

load_jquery

Load the jquery library or not. Default to yes

load_jquery="yes"

Geocoder

{exp:maps:geocoder
   address="heerde"
}

Tag Parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

address

multiple addresses, eg. addresses seperated with a pipline '|'

address="" [REQUIRED] if latlng or ip is empty

latlng

multiple latitude longlitude, seperated with a pipline '|'

latlng="" [REQUIRED] if address or ip is empty

ip

multiple ips, seperated with a pipline '|' (Magic const: CURRENT_IP and SERVER_IP)

ip="" [REQUIRED] if address or latlng is empty

Variables

Below are the variable and accessible withing the {result}{/result} tag

Result tag pair

{result}
    {latitude}
{/result}

latitude

{latitude}

longitude

{longitude}

bounds

{bounds}
    {south}
    {west}
    {north}
    {east}
{/bounds}

street_name

{street_name}

street_number

{street_number}

city

{city}

zipcode

{zipcode}

city_district

{city_district}

country

{country}

country_code

{country_code}

timezone

{timezone}

Map

This is the main tag for all your mapping stuff

The tag

{exp:maps:map}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

tiles

use a tile that is enabled in the CP. Use more then one to enable the tile selector as seen below in the screenshots

Tile selector closed

Tile selector open

Default is openstreetmap

tiles="openstreetmap"

tile_control_position

The position of the control (one of the map corners). Possible values are topleft, topright, bottomleft or bottomright

tile_control_position="topright"

google_maps:style

if you enable the Google Tile, you also have the possibility to style the map. See https://developers.google.com/maps/documentation/javascript/styling

Because this is just Json, you can also use Snazzy for this https://snazzymaps.com/

As you enter json in the parameter, its better to use the alternative parameter.

{google_maps:style}
    [
        {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
        {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
        {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
        {
          featureType: 'administrative.locality',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'poi',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'geometry',
          stylers: [{color: '#263c3f'}]
        },
        {
          featureType: 'poi.park',
          elementType: 'labels.text.fill',
          stylers: [{color: '#6b9a76'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry',
          stylers: [{color: '#38414e'}]
        },
        {
          featureType: 'road',
          elementType: 'geometry.stroke',
          stylers: [{color: '#212a37'}]
        },
        {
          featureType: 'road',
          elementType: 'labels.text.fill',
          stylers: [{color: '#9ca5b3'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry',
          stylers: [{color: '#746855'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'geometry.stroke',
          stylers: [{color: '#1f2835'}]
        },
        {
          featureType: 'road.highway',
          elementType: 'labels.text.fill',
          stylers: [{color: '#f3d19c'}]
        },
        {
          featureType: 'transit',
          elementType: 'geometry',
          stylers: [{color: '#2f3948'}]
        },
        {
          featureType: 'transit.station',
          elementType: 'labels.text.fill',
          stylers: [{color: '#d59563'}]
        },
        {
          featureType: 'water',
          elementType: 'geometry',
          stylers: [{color: '#17263c'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.fill',
          stylers: [{color: '#515c6d'}]
        },
        {
          featureType: 'water',
          elementType: 'labels.text.stroke',
          stylers: [{color: '#17263c'}]
        }
      ]
{/google_maps:style} [OPTIONAL]

center:address

Center the map based on an address

center:address=""

center:latlng

Center the map based on an latlng

center:address=""

zoom

the zoom level.

zoom="15" [OPTIONAL]

zoom:max

the max zoom level.

zoom:max="19" [OPTIONAL]

fit_map:markers

Fit the map based on the markers

fit_map:markers="yes" [OPTIONAL]

fit_map:circles

Fit the map based on the circles

fit_map:circles="no" [OPTIONAL]

fit_map:rectangles

Fit the map based on the rectangles

fit_map:rectangles="no" [OPTIONAL]

fit_map:polylines

Fit the map based on the polylines

fit_map:polylines="no" [OPTIONAL]

fit_map:polygons

Fit the map based on the polygons

fit_map:polygons="no" [OPTIONAL]

You can combine multiple fit_map calls e.g. fit_map:circles="yes" fit_map:polygons="yes"

marker_cluster:enabled

enable clustering for the makers

marker_cluster:enabled="no" [OPTIONAL]

marker_cluster:show_coverage_on_hover

When you mouse over a cluster it shows the bounds of its markers.

marker_cluster:show_coverage_on_hover="no" [OPTIONAL]

marker_cluster:zoom_to_bounds_on_click

When you click a cluster we zoom to its bounds.

marker_cluster:zoom_to_bounds_on_click="yes" [OPTIONAL]

marker_cluster:spiderfy_on_max_zoom

When you click a cluster at the bottom zoom level we spiderfy it so you can see all of its markers.

marker_cluster:spiderfy_on_max_zoom="yes" [OPTIONAL]

marker_cluster:remove_outside_visible_bounds

Clusters and markers too far from the viewport are removed from the map for performance.

marker_cluster:remove_outside_visible_bounds="yes" [OPTIONAL]

div_class

the div CLASS name.

div_class="ee_gmap" [OPTIONAL]

width

the width of the map

width="400px" [OPTIONAL]

height

the height of the map

height="400px" [OPTIONAL]

overlay:html

Show a overlay on the map Overlay

overlay:html="<p><b>Maps Overlay</b></p>This is a Google Like overlay<p><p>Just like the Iframe</p>"  [OPTIONAL]

overlay:position

Set the position of the overlay.
values: left right

overlay:position="right" [OPTIONAL]

focus_current_location

Focus on the users current location. (SSL is needed)

focus_current_location="no" [OPTIONAL]

scroll_wheel

possible to scroll the map with the scrollwheel.

scroll_wheel="yes" [OPTIONAL]

zoom_control

place the zoom control on the map.

zoom_control="yes" [OPTIONAL]

zoom_control_position

Set the position for the control. Possible values are topleft, topright, bottomleft or bottomright

zoom_control_position="topleft" [OPTIONAL]

scale_control

place the scale control on the map.

scale_control="yes" [OPTIONAL]

gesture_handling

Prevents users from getting trapped on the map when scrolling a long page.

gesture_handling="yes" [OPTIONAL]

Tag Variable

Below are the Tag Variables. Those Variables can be used in the tag described above

map_id

The map ID of the current map

{exp:maps:map}
   {map_id}
{/exp:maps:map}

Map Circle

The add circle tag for use inside the {exp:maps:map} tag

The tag

{exp:maps:map}
    {maps:add_circle}
{/exp:maps:map}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

address

The address for the circle

address=""

latlng

The latlng for the circle

latlng=""

stroke:enable

Enable the stroke

stroke:enable="yes" [OPTIONAL]

stroke:color

set the stroke color.

stroke:color="#000000" [OPTIONAL]

stroke:opacity

set the stroke opacity.

stroke:opacity="1" [OPTIONAL]

stroke:weight

set the stroke weight.

stroke:weight="1" [OPTIONAL]

fill:enable

enable to fill the circle

fill:enable="yes" [OPTIONAL]

fill:color

set the fill color.

fill:color="#000000" [OPTIONAL]

fill:opacity

set the fill opacity.

fill:opacity="0.4" [OPTIONAL]

radius

set the radius in meters.

radius="1000" [OPTIONAL]

tooltip:content

set the tooltip for the marker.

tooltip:content="[location]" [OPTIONAL]

tooltip:direction

Direction where to open the tooltip. Possible values are: right, left, top, bottom, center, auto.

auto will dynamically switch between right and left according to the tooltip position on the map.

tooltip:direction="auto" [OPTIONAL]

tooltip:permanent

Whether to open the tooltip permanently or only on mouseover.

tooltip:permanent="no" [OPTIONAL]

tooltip:sticky

If yes, the tooltip will follow the mouse instead of being fixed at the marker center.

tooltip:sticky="no" [OPTIONAL]

class

Set a class for the circle object

radius="maps_circle" [OPTIONAL]

keys

To get the marker via the api, you have to enter the key for you marker. By default the keys are generated for you based on the address, number and latlng. To extend this with your own keys, you can use this param.
use a colon (:) to give a locations multiple keys

keys="key1_for_the_first_marker:key2_for_the_first_marker"

Map KML

The add KML tag for use inside the {exp:maps:map} tag

The tag

{maps:add_kml}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

url

The url where the KML file is located

url=""

Map Markers

The add marker tag for use inside the {exp:maps:map} tag

The tag

{exp:maps:map}
    {maps:add_marker}
{/exp:maps:map}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

address

The address for the marker

address=""

latlng

The latlng for the marker

latlng=""

reverse_geocode_latlng

Geocode also latlng coordinates to get the best result

reverse_geocode_latlng="no"

animation

enable the animation for the marker, this will drop your marker.

Coming soon

animation="no" [OPTIONAL]

tooltip:content

set the tooltip for the marker.

tooltip:content="[location]" [OPTIONAL]

tooltip:direction

Direction where to open the tooltip. Possible values are: right, left, top, bottom, center, auto.

auto will dynamically switch between right and left according to the tooltip position on the map.

tooltip:direction="auto" [OPTIONAL]

tooltip:permanent

Whether to open the tooltip permanently or only on mouseover.

tooltip:permanent="no" [OPTIONAL]

tooltip:sticky

If yes, the tooltip will follow the mouse instead of being fixed at the marker center.

tooltip:sticky="no" [OPTIONAL]

icon:url

set icon path for a the marker.

icon:url="" [OPTIONAL]

icon:offset

Specify the offset in pixel where the icon must show

icon:offset="0,0" [OPTIONAL]

icon:size

Set the size for an icon.

icon:size="" [OPTIONAL]

icon:class_name

Set the class for the marker html

icon:class_name="maps_marker" [OPTIONAL]

glyph_icon

With Glyph icons you can add Glyph icons to your marker Glyph icon

glyph_icon:prefix

Set the prefix. For example, this would be fa for FontAwesome

glyph_icon:prefix="" [OPTIONAL]

glyph_icon:name

Set the name of the icon

glyph_icon:name="" [OPTIONAL]

glyph_icon:class_name

If you need to add an extra class to the marker.

glyph_icon:class_name="" [OPTIONAL]

glyph_icon:color

Set the color of the Glyph icon

glyph_icon:color="#fff" [OPTIONAL]

The content for the popup (infowindow) e.g: <h1>Yeah [location]</h1>

Variables : [location] [route_to_url] [route_from_url] [map_url] [elevation] [address] [street_name] [street_number] [city] [country] [country_code] [zipcode]
Note[elevation] is only accessible when you set the get_elevation="yes" param
Note using the latlng and omit the reverse_geocode_latlng param to set to yes, you wont get any geocoding vars

popup:content="" [OPTIONAL]

Specify the offset in pixel where the popup must show

popup:offset="0,0" [OPTIONAL]

Open the popup on hover

popup:open_on_hover="no" [OPTIONAL]

Open the popup by default
values: yes no

popup:open_by_default="yes" [OPTIONAL]

keys

To get the marker via the api, you have to enter the key for you marker. By default the keys are generated for you based on the address, number and latlng. To extend this with your own keys, you can use this param.
use a colon (:) to give a locations multiple keys

keys="key1_for_the_first_marker:key2_for_the_first_marker"

get_elevation

Get the elevation so you can use the [elevation] variable in the Popups (only availble with the maps_service module installed)

get_elevation="no"

reverse_geocoding_latlng

Reverse geocoding, so latlng coordinates are geocoded to get the best known location.

reverse_geocoding_latlng="no"

Map Polygon

The add polygon tag for use inside the {exp:maps:map} tag

The tag

{maps:add_polygon
   address="den-helder|zwolle|deventer|gorssel|arnhem|klarenbeek|apeldoorn"
}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

addresses

The address for the polygon. Because this param need 2 address to create the polygon, use a pipline to seperate.

addresses=""

latlngs

The latlng for the marker. Because this param need 2 latlng to create the rectangle, use a pipline to seperate.

latlngs=""

json

a json string with Polygon.

json="[
  [
    [
      [-105.00432014465332, 39.74732195489861],
      [-105.00715255737305, 39.74620006835170],
      [-105.00921249389647, 39.74468219277038],
      [-105.01067161560059, 39.74362625960105],
      [-105.01195907592773, 39.74290029616054],
      [-105.00989913940431, 39.74078835902781],
      [-105.00758171081543, 39.74059036160317],
      [-105.00346183776855, 39.74059036160317],
      [-105.00097274780272, 39.74059036160317],
      [-105.00062942504881, 39.74072235994946],
      [-105.00020027160645, 39.74191033368865],
      [-105.00071525573731, 39.74276830198601],
      [-105.00097274780272, 39.74369225589818],
      [-105.00097274780272, 39.74461619742136],
      [-105.00123023986816, 39.74534214278395],
      [-105.00183105468751, 39.74613407445653],
      [-105.00432014465332, 39.74732195489861]
    ],[
      [-105.00361204147337, 39.74354376414072],
      [-105.00301122665405, 39.74278480127163],
      [-105.00221729278564, 39.74316428375108],
      [-105.00283956527711, 39.74390674342741],
      [-105.00361204147337, 39.74354376414072]
    ]
  ],[
    [
      [-105.00942707061768, 39.73989736613708],
      [-105.00942707061768, 39.73910536278566],
      [-105.00685214996338, 39.73923736397631],
      [-105.00384807586671, 39.73910536278566],
      [-105.00174522399902, 39.73903936209552],
      [-105.00041484832764, 39.73910536278566],
      [-105.00041484832764, 39.73979836621592],
      [-105.00535011291504, 39.73986436617916],
      [-105.00942707061768, 39.73989736613708]
    ]
  ]
]"

stroke:enable

Enable the stroke

stroke:enable="yes"

stroke:color

set the stroke color.

stroke:color="#000000" [OPTIONAL]

stroke:opacity

set the stroke opacity..

stroke:opacity="1" [OPTIONAL]

stroke:weight

Set the stroke weight

stroke:weight="6" [OPTIONAL]

fill:enable

Enable the fill option

fill:enable="yes"

fill:opacity

set the fill opacity.

fill:opacity="1" [OPTIONAL]

fill:color

set the fill color

fill:color="#000000" [OPTIONAL]

tooltip:content

set the tooltip for the marker.

tooltip:content="[location]" [OPTIONAL]

tooltip:direction

Direction where to open the tooltip. Possible values are: right, left, top, bottom, center, auto.

auto will dynamically switch between right and left according to the tooltip position on the map.

tooltip:direction="auto" [OPTIONAL]

tooltip:permanent

Whether to open the tooltip permanently or only on mouseover.

tooltip:permanent="no" [OPTIONAL]

tooltip:sticky

If yes, the tooltip will follow the mouse instead of being fixed at the marker center.

tooltip:sticky="no" [OPTIONAL]

keys

To get the marker via the api, you have to enter the key for you marker. By default the keys are generated for you based on the address, number and latlng. To extend this with your own keys, you can use this param.
use a colon (:) to give a locations multiple keys

keys="key1_for_the_first_marker:key2_for_the_first_marker"

Map polyline

The add polyline tag for use inside the {exp:maps:map} tag

The tag

{maps:add_polyline
   address="den-helder|zwolle|deventer|gorssel|arnhem|klarenbeek|apeldoorn"
}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

address

The address

address="" [REQUIRED] if latlng is empty

latlng

Lat Lng points

latlng="" [REQUIRED] if address is empty

stroke:enable

Enable the stroke

stroke:enable="yes" [OPTIONAL]

stroke:color

set the stroke color.

stroke:color="#000000" [OPTIONAL]

stroke:opacity

set the stroke opacity..

stroke:opacity="1" [OPTIONAL]

stroke:weight

Set the stroke weight

stroke:weight="6" [OPTIONAL]

tooltip:content

set the tooltip for the marker.

tooltip:content="[location]" [OPTIONAL]

tooltip:direction

Direction where to open the tooltip. Possible values are: right, left, top, bottom, center, auto.

auto will dynamically switch between right and left according to the tooltip position on the map.

tooltip:direction="auto" [OPTIONAL]

tooltip:permanent

Whether to open the tooltip permanently or only on mouseover.

tooltip:permanent="no" [OPTIONAL]

tooltip:sticky

If yes, the tooltip will follow the mouse instead of being fixed at the marker center.

tooltip:sticky="no" [OPTIONAL]

keys

To get the marker via the api, you have to enter the key for you marker. By default the keys are generated for you based on the address, number and latlng. To extend this with your own keys, you can use this param.
use a colon (:) to give a locations multiple keys

keys="key1_for_the_first_marker:key2_for_the_first_marker"

Map Rectangle

The add recatangle tag for use inside the {exp:maps:map} tag

The tag

{maps:add_rectangle}

Tag parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above.

addresses

The address for the marker. Because this param need 2 address to create the rectangle, use a pipline to seperate.

addresses=""

latlngs

The latlng for the marker. Because this param need 2 latlng to create the rectangle, use a pipline to seperate.

latlngs=""

stroke:enable

enable the stroke.

stroke:enable="yes" [OPTIONAL]

stroke:color

set the stroke color.

stroke:color="#000000" [OPTIONAL]

stroke:opacity

set the stroke opacity.

stroke:opacity="1" [OPTIONAL]

stroke:weight

set the stroke weight.

stroke:weight="1" [OPTIONAL]

fill:enable

enable the fill

fill:enable="yes" [OPTIONAL]

fill:color

set the fill color.

fill:color="#000000" [OPTIONAL]

fill:opacity

set the fill opacity

fill:opacity="1" [OPTIONAL]

tooltip:content

set the tooltip for the marker.

tooltip:content="[location]" [OPTIONAL]

tooltip:direction

Direction where to open the tooltip. Possible values are: right, left, top, bottom, center, auto.

auto will dynamically switch between right and left according to the tooltip position on the map.

tooltip:direction="auto" [OPTIONAL]

tooltip:permanent

Whether to open the tooltip permanently or only on mouseover.

tooltip:permanent="no" [OPTIONAL]

tooltip:sticky

If yes, the tooltip will follow the mouse instead of being fixed at the marker center.

tooltip:sticky="no" [OPTIONAL]

keys

To get the marker via the api, you have to enter the key for you marker. By default the keys are generated for you based on the address, number and latlng. To extend this with your own keys, you can use this param.
use a colon (:) to give a locations multiple keys

keys="key1_for_the_first_marker:key2_for_the_first_marker"

Geocoder API

The Geocoder from Maps can also be used outside the area of the JS Maps. For example if you only need to geocode an address using Javascript, or in an other PHP app on your site.

API Methods

Address

domain.com/maps_api/address

LatLng

domain.com/maps_api/latlng

IP

domain.com/maps_api/ip

Post value

input

Example PHP

//set POST variables
$url = 'http://domain.com/maps_api/address';
$fields = array(
            'input' => urlencode('apeldoorn')
        );

//url-ify the data for the POST
$fields_string = '';
foreach($fields as $key=>$value) { $fields_string .= $key.'='.$value.'&'; }
rtrim($fields_string, '&');

//open connection
$ch = curl_init();

//set the url, number of POST vars, POST data
curl_setopt($ch,CURLOPT_URL, $url);
curl_setopt($ch,CURLOPT_POST, count($fields));
curl_setopt($ch,CURLOPT_POSTFIELDS, $fields_string);

//execute post
$result = curl_exec($ch);

print_r(json_decode($result));

//close connection
curl_close($ch);

Examle Javascript (jQuery)

jQuery.post('domain.com/maps_api/address', {input:'amsterdam'}, function(result){
   console.log(jQuery.parseJSON(result));
});

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

EE_MAPS.ready(function(){
//your logic code
});

refresh

mapID : the ID of the map (eg ee_map_1)

Refresh the map, so its update all data

EE_MAPS.api('refresh', {
  mapID : '', 
});

setZoom

mapID : the ID of the map (eg ee_map_1)
zoomLevel : zoom level between 0-21 depending on the tile settings

Set the zoom level of the map

EE_MAPS.api('setZoom', {
  mapID : '' , 
  zoom : ''
});

fitMap

mapID : the ID of the map (eg ee_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

EE_MAPS.api('fitMap', {
  mapID : '', 
  type : '' 
});

center

mapID : the ID of the map (eg ee_map_1)
lat : the lng coordinate
lng: the lat coordinate

Center the map based on coordinates

EE_MAPS.api('center', {
  mapID : '', 
  lat : '',
  lng: '' 
});

getMap

mapID : the ID of the map (eg ee_map_1)

Get a map instance

EE_MAPS.api('getMap', {
  mapID : ''
});

removeMap

mapID : the ID of the map (eg ee_map_1)

Remove a map instance

EE_MAPS.api('removeMap', {
  mapID : ''
});

updateMap

mapID : the ID of the map (eg ee_map_1)
options: a object with map options

Update a map

EE_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 ee_map_1)
lat : latitude coordinate
lng : longitude coordinate
tooltip : tooltip object popup : popup object

Add a new marker to a map

EE_MAPS.api('addMarker', {
  mapID : '',
  lat : '',
  lng : '',
  tooltip : {
      content: ''
  },
  popup : {
    popupContent : ''
  }
});

removeMarker

mapID : the ID of the map (eg ee_map_1)
key : the key of the marker

Remove Marker

EE_MAPS.api('removeMarker', {
  mapID : '',
  key: ''
});

removeMarkers

mapID : the ID of the map (eg ee_map_1)

Remove all Marker

EE_MAPS.api('removeMarker', {
  mapID : ''
});

hideMarker

mapID : the ID of the map (eg ee_map_1)
key : the key of the marker

Hide Marker

EE_MAPS.api('', {
  mapID : '',
  key: ''
});

hideMarkers

mapID : the ID of the map (eg ee_map_1)

Hide all Marker

EE_MAPS.api('', {
  mapID : ''
});

showMarker

mapID : the ID of the map (eg ee_map_1)
key : the key of the marker

This method will show a marker which is removed or hided from the map.

EE_MAPS.api('showMarker', {
  mapID : '',
  key: ''
});

showMarkers

mapID : the ID of the map (eg ee_map_1)

This method will show all marker which is removed or hided from the map.

EE_MAPS.api('showMarker', {
  mapID : ''
});

getMarker

mapID : the ID of the map (eg ee_map_1)
key: The marker key

Get a marker

EE_MAPS.api('getMarker', {
  mapID : '',
  key: ''
});

getMarkers

mapID : the ID of the map (eg ee_map_1)

Get all the markers for a specific map

EE_MAPS.api('', {
  mapID : ''
});

getAllMarkers

Get all map markers

EE_MAPS.api('getAllMarkers');

markerClick

mapID : the ID of the map (eg ee_map_1)
key : the key of the marker
callback : a callback function

Trigger an onClick event on a marker

EE_MAPS.api('markerClick', {
  mapID : '', 
  key : '',
  callback: function(){} 
});

openMarkerPopup

mapID : the ID of the map (eg ee_map_1)
key : the key of the marker

Open a marker popup

EE_MAPS.api('openMarkerPopup', {
   mapID : ''
   key : ''
});

closeMarkerPopup

mapID : the ID of the map (eg ee_map_1)
key : the key of the marker

Close a marker popup

EE_MAPS.api('closeMarkerPopup', {
   mapID : ''
   key : ''
});

toggleMarkerPopup

mapID : the ID of the map (eg ee_map_1)
key : the key of the marker

Toggle a marker popup

EE_MAPS.api('toggleMarkerPopup', {
   mapID : ''
   key : ''
});

addCircle

mapID : the ID of the map (eg ee_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

EE_MAPS.api('addCircle', {
   mapID : '',
   lat: '',
   lng: '',
   color: '',
   weight: '',
   opacity: '',
   fillColor: '',
   fillOpacity: '',
   radius: ''
});

getCircle

mapID : the ID of the map (eg ee_map_1)
key: the key of the circle

Get a circle

EE_MAPS.api('getCircle', {
   mapID : '',
   key: ''
});

removeCircle

mapID : the ID of the map (eg ee_map_1)
key: the key of the circle

Remove a circle

EE_MAPS.api('removeCircle', {
   mapID : '',
   key: ''
});

addRectangle

mapID : the ID of the map (eg ee_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

EE_MAPS.api('addRectangle', {
   mapID : '',
   bounds: '',
   color: '',
   weight: '',
   opacity: '',
   fillColor: '',
   fillOpacity: '',
   radius: ''
});

getRectangle

mapID : the ID of the map (eg ee_map_1)
key: the key of the Rectangle

Get a rectangle

EE_MAPS.api('Get a rectangle', {
   mapID : '',
   key: ''
});

removeRectangle

mapID : the ID of the map (eg ee_map_1)
key: the key of the Rectangle

Remove a Rectangle

EE_MAPS.api('removeRectangle', {
   mapID : '',
   key: ''
});

addPolygon

mapID : the ID of the map (eg ee_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

EE_MAPS.api('addPolygon', {
   mapID : '',
   path: '',
   color: '',
   weight: '',
   opacity: '',
   fillColor: '',
   fillOpacity: '',
});

getPolygon

mapID : the ID of the map (eg ee_map_1)
key: the key of the Polygon

Get a Polygon

EE_MAPS.api('getPolygon', {
   mapID : '',
   key: ''
});

removePolygon

mapID : the ID of the map (eg ee_map_1)
key: the key of the Polygon

Remove a Polygon

EE_MAPS.api('removePolygon', {
   mapID : '',
   key: ''
});

addPolyline

mapID : the ID of the map (eg ee_map_1)
latlngs: array of latLng array color: The stroke color
weight: Weight of the stroke
opacity: Stroke opacity

Add a Polyline

EE_MAPS.api('addPolyline', {
   mapID : '',
   latlngs: '',
   color: '',
   weight: '',
   opacity: ''
});

getPolyline

mapID : the ID of the map (eg ee_map_1)
key: the key of the Polyline

Get a Polyline

EE_MAPS.api('getPolyline', {
   mapID : '',
   key: ''
});

removePolyline

mapID : the ID of the map (eg ee_map_1)
key: the key of the Polyline

Remove a Polyline

EE_MAPS.api('removePolyline', {
   mapID : '',
   key: ''
});

geolocation

callback : a callback function

Geolocate to the current location

EE_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)

EE_MAPS.api('geocode', {
  address: '',
  latlng : '',
  ip : '',
  callback : function(result, type){} 
}});

Default callback

As third param you can specify a callback. this is for every method the same.

EE_MAPS.api('addMarker', {
  address: 'new york',
  mapID: 'EE_MAPS_1'
}}, function(){
    //this is the default callback function

});

Changelog

1.3.1 (18-03-2019)

1.3.0 (05-02-2019)

1.2.2 (03-01-2019)

1.2.1 (02-01-2019)

1.2.0 (19-12-2018)

1.1.0 (24-11-2018)

1.0.0 (12-11-2018)