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

Documentation versions

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.

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

Weather API

In order to use the Weather API, you need to add a API key from https://openweathermap.org/

This tag will ensure that all Javascript is loaded correctly. Just place this before the closing </body> tag.

The tag

{exp:reinos_maps:html_footer}

HTML header tag

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

The tag

{exp:reinos_maps:html_header
   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=""

load_jquery

Load the jquery library or not. Default to yes

load_jquery="yes"

Geocoder

{exp:reinos_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:reinos_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]

zoom:min

the min zoom level.

zoom:min="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]

fit_map:geojson

Fit the map based on the geojson data

fit_map:geojson="no" [OPTIONAL]

fit_map:routes

Fit the map based on the routes
Only works when the Maps Route module is installed

fit_map:routes="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]

weather

Add a weather layer e.g. rain, snow, wind etc. (in order to use the weather layers, you need to obtain a API key from https://openweathermap.org/ and add it in the CP settings page)

Layers: clouds cloudsClassic precipitation precipitationClassic rain rainClassic snow pressure pressureContour temperature wind

weather="[[layer_name]:[opacity]:[legend]]," [OPTIONAL]
weather="rain:0.5:no" [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:reinos_maps:map}
   {map_id}
{/exp:reinos_maps:map}

Map Circle

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

The tag

{exp:reinos_maps:map}
    {maps:add_circle}
{/exp:reinos_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 GeoJSON

The add GeoJSON tag for use inside the {exp:reinos_maps:map} tag

The tag

{maps:add_geojson}
    {
        "type": "Feature",
        "properties": {
            "name": "Coors Field",
            "amenity": "Baseball Stadium",
            "popupContent": "This is where the Rockies play!"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-104.99404, 39.75621]
        }
    }
{/maps:add_geojson}

Tag parameters

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

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:opacity

set the fill opacity.

fill:opacity="1" [OPTIONAL]

fill:color

set the fill color

fill:color="#000000" [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"

Tagdata

Inside the tagdata your are placing your GeoJSON data.

{exp:reinos_maps:html_header}
  {exp:reinos_maps:map fit_map:geojson="yes"}
      {maps:add_geojson}
        [{
        "type": "Feature",
        "properties": {"party": "Republican"},
        "geometry": {
            "type": "Polygon",
            "coordinates": [[
                [-104.05, 48.99],
                [-97.22,  48.98],
                [-96.58,  45.94],
                [-104.03, 45.94],
                [-104.05, 48.99]
            ]]
        }
    }, {
        "type": "Feature",
        "properties": {"party": "Democrat"},
        "geometry": {
            "type": "Polygon",
            "coordinates": [[
                [-109.05, 41.00],
                [-102.06, 40.99],
                [-102.03, 36.99],
                [-109.04, 36.99],
                [-109.05, 41.00]
            ]]
        }
    }]
  {/maps:add_geojson}
{/exp:reinos_maps:map}

Style

You can set the global style via the parameters. But to use a more dynamically approach you can also use a special Javascript function

The example below react before the geoJson is pared with the geojson.beforeReady event. The you can use REINOS_MAPS.setGeoJsonStyle that accept a function with a parameter for the current reading feature.

<script>
REINOS_MAPS.on('geojson.beforeReady', function(){
    REINOS_MAPS.setGeoJsonStyle(function(feature) {
        //your logic
        return {color: #fff};
    });
});
</script>

A full working example would be where we highlight the Republican state and the Democrat state

{exp:reinos_maps:html_header}
  {exp:reinos_maps:map fit_map:geojson="yes"}
      {maps:add_geojson}
        [{
        "type": "Feature",
        "properties": {"party": "Republican"},
        "geometry": {
            "type": "Polygon",
            "coordinates": [[
                [-104.05, 48.99],
                [-97.22,  48.98],
                [-96.58,  45.94],
                [-104.03, 45.94],
                [-104.05, 48.99]
            ]]
        }
    }, {
        "type": "Feature",
        "properties": {"party": "Democrat"},
        "geometry": {
            "type": "Polygon",
            "coordinates": [[
                [-109.05, 41.00],
                [-102.06, 40.99],
                [-102.03, 36.99],
                [-109.04, 36.99],
                [-109.05, 41.00]
            ]]
        }
    }]
  {/maps:add_geojson}
{/exp:reinos_maps:map}

{exp:reinos_maps:html_footer}
<script>
REINOS_MAPS.on('geojson.beforeReady', function(){
    REINOS_MAPS.setGeoJsonStyle(function(feature) {
        switch (feature.properties.party) {
            case 'Republican': return {color: "#ff0000"};
            case 'Democrat':   return {color: "#0000ff"};
        }
    });
});
</script>

Map KML

The add KML tag for use inside the {exp:reinos_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:reinos_maps:map} tag

The tag

{exp:reinos_maps:map}
    {maps:add_marker}
{/exp:reinos_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 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="25,41" [OPTIONAL]

icon:shadow:url

set the shadow icon path for the marker.

icon:shadow:url="" [OPTIONAL]

icon:shadow:offset

Specify the shadow offset in pixel where the icon must show

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

icon:shadow:size

Set the shadow size for an icon.

icon:shadow: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]

Specify the max width for the popup

popup:max_width="400" [OPTIONAL]

Specify the min width for the popup

popup:min_width="200" [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:reinos_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 lat, lng.

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

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:reinos_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

json

a json string with lat, lng.

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

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:reinos_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"

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>

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_REINOS.ready(function(){
//your logic code
});

refresh

mapID : the ID of the map (eg reinos_map_1)

Refresh the map, so its update all data

EE_REINOS.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

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

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

EE_REINOS.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

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

getMap

mapID : the ID of the map (eg reinos_map_1)

Get a map instance

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

removeMap

mapID : the ID of the map (eg reinos_map_1)

Remove a map instance

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

updateMap

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

Update a map

EE_REINOS.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

EE_REINOS.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

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

removeMarkers

mapID : the ID of the map (eg reinos_map_1)

Remove all Marker

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

hideMarker

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

Hide Marker

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

hideMarkers

mapID : the ID of the map (eg reinos_map_1)

Hide all Marker

EE_REINOS.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.

EE_REINOS.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.

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

getMarker

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

Get a marker

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

getMarkers

mapID : the ID of the map (eg reinos_map_1)

Get all the markers for a specific map

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

getAllMarkers

Get all map markers

EE_REINOS.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

EE_REINOS.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

EE_REINOS.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

EE_REINOS.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

EE_REINOS.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

EE_REINOS.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

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

removeCircle

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

Remove a circle

EE_REINOS.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

EE_REINOS.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

EE_REINOS.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

EE_REINOS.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

EE_REINOS.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

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

removePolygon

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

Remove a Polygon

EE_REINOS.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

EE_REINOS.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

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

removePolyline

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

Remove a Polyline

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

geolocation

callback : a callback function

Geolocate to the current location

EE_REINOS.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_REINOS.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_REINOS.api('addMarker', {
  address: 'new york',
  mapID: 'reinos_maps_1'
}}, function(){
    //this is the default callback function

});

Changelog

2.4.1 (13-11-2019)

2.4.0 (25-10-2019)

2.3.1 (19-09-2019)

2.3.0 (16-09-2019)

2.2.0 (03-09-2019)

*Note: The {exp:reinos_maps:init} tag has been replaced for the {exp:reinos_maps:html_footer} and {exp:reinos_maps:html_footer} should be added to the footer.

2.1.0 (27-06-2019)

2.0.2 (08-06-2019)

2.0.1 (07-06-2019)

2.0.0 (21-05-2019)

*Note: There is a change you will have to validate the license again

\Note: Because the module has been renamed with a prefix reinos_ there is an update path by simply add the new update to* your site and install it. By installing the module, you are disabling the old module that can be deleted afterward. Also note that you have to rename the module calls and hooks with a prefix reinos_

Also note that the module need to be installed twice, as the first installation will modify some files in order to safely migrate the module

See this article about the rename https://addons.reinos.nl/news/modules-renamed

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)