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
There is a lot possible with the default Maps module, see the example page page for the 50+ examples
For the Maps modules there are a couple of modules that extend the Maps with extra functionality
Make sure your system meets the minimum requirements:
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.
In the Module CP you can enter then your license
When you enter a wrong license, the module will not work and it shows you an warning
On a local environment, like *.dev
*.local
*.localhost
the license will be valid for the testing and building new sites.
Examples can be found here
The Maps module add some new things but also dropped some functions compared to the Gmaps module.
The following functions are removed
{error}
tag, just check the log in the CPhidden_div
paramstatic map option
marker:get_elevation
(new module for this will come)
gesture_handling
param (Will come to Maps)cache_time
from the {exp:reinos_maps:map}
methodThe following functions are changed
zoom_control_position
has new values topleft
topright
bottomleft
bottomright
popup:content
fit_map
is now per map type instead of a global onesnazzy_map
en styled
params are replace for param google_maps:style
(Note, you have to use the Google Maps Tile)map_types
are replace by tiles
map_type_control_position
is renamed to tile_control_position
marker:label
replace by tooltip
The best way to convert the Gmaps
to Maps
module, is to check every part of your code and check the documentation. Most of the template tags are the same, but its good to check it anyway.
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.
On the CP page you can modify a couple of things.
Here you can select what Geocoding service you want to use. By default openstreetmap
Here you can select the Tile to use as overlay what result in a viewable map. By default openstreetmap
Maps will log important errors to the main Log.
Control all you cached addresses. Be careful with this cached data, delete it only when you have to (due the geocoding limits of Google).
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.
{exp:reinos_maps:html_footer}
This tag will ensure that all Javascript and CSS is loaded correctly. Just place this in the <head>
of your page.
{exp:reinos_maps:html_header
lang="en_US"
}
Below are the Tag Parameters. Those parameters can be used in the tag described above
the language code. e.g. en-US or nl-NL or nl-BE, Default to your current browser language
lang=""
Load the jquery library or not. Default to yes
load_jquery="yes"
{exp:reinos_maps:geocoder
address="heerde"
}
Below are the Tag Parameters. Those parameters can be used in the tag described above.
multiple addresses, eg. addresses seperated with a pipline '|'
address="" [REQUIRED] if latlng or ip is empty
multiple latitude longlitude, seperated with a pipline '|'
latlng="" [REQUIRED] if address or ip is empty
multiple ips, seperated with a pipline '|' (Magic const: CURRENT_IP
and SERVER_IP
)
ip="" [REQUIRED] if address or latlng is empty
Below are the variable and accessible withing the {result}{/result}
tag
{result}
{latitude}
{/result}
{latitude}
{longitude}
{bounds}
{south}
{west}
{north}
{east}
{/bounds}
{street_name}
{street_number}
{city}
{zipcode}
{city_district}
{country}
{country_code}
{timezone}
This is the main tag for all your mapping stuff
{exp:reinos_maps:map}
Below are the Tag Parameters. Those parameters can be used in the tag described above.
use a tile that is enabled in the CP. Use more then one to enable the tile selector as seen below in the screenshots
Default is openstreetmap
tiles="openstreetmap"
The position of the control (one of the map corners). Possible values are topleft
, topright
, bottomleft
or bottomright
tile_control_position="topright"
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 the map based on an address
center:address=""
Center the map based on an latlng
center:address=""
the zoom level.
zoom="15" [OPTIONAL]
the max zoom level.
zoom:max="19" [OPTIONAL]
the min zoom level.
zoom:min="19" [OPTIONAL]
Fit the map based on the markers
fit_map:markers="yes" [OPTIONAL]
Fit the map based on the circles
fit_map:circles="no" [OPTIONAL]
Fit the map based on the rectangles
fit_map:rectangles="no" [OPTIONAL]
Fit the map based on the polylines
fit_map:polylines="no" [OPTIONAL]
Fit the map based on the polygons
fit_map:polygons="no" [OPTIONAL]
Fit the map based on the geojson data
fit_map:geojson="no" [OPTIONAL]
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"
enable clustering for the makers
marker_cluster:enabled="no" [OPTIONAL]
When you mouse over a cluster it shows the bounds of its markers.
marker_cluster:show_coverage_on_hover="no" [OPTIONAL]
When you click a cluster we zoom to its bounds.
marker_cluster:zoom_to_bounds_on_click="yes" [OPTIONAL]
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]
Clusters and markers too far from the viewport are removed from the map for performance.
marker_cluster:remove_outside_visible_bounds="yes" [OPTIONAL]
the div CLASS name.
div_class="ee_gmap" [OPTIONAL]
the width of the map
width="400px" [OPTIONAL]
the height of the map
height="400px" [OPTIONAL]
Show a overlay on the map
overlay:html="<p><b>Maps Overlay</b></p>This is a Google Like overlay<p><p>Just like the Iframe</p>" [OPTIONAL]
Set the position of the overlay.
values: left
right
overlay:position="right" [OPTIONAL]
Focus on the users current location. (SSL is needed)
focus_current_location="no" [OPTIONAL]
possible to scroll the map with the scrollwheel.
scroll_wheel="yes" [OPTIONAL]
place the zoom control on the map.
zoom_control="yes" [OPTIONAL]
Set the position for the control. Possible values are topleft
, topright
, bottomleft
or bottomright
zoom_control_position="topleft" [OPTIONAL]
place the scale control on the map.
scale_control="yes" [OPTIONAL]
Prevents users from getting trapped on the map when scrolling a long page.
gesture_handling="yes" [OPTIONAL]
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]
Below are the Tag Variables. Those Variables can be used in the tag described above
The map ID of the current map
{exp:reinos_maps:map}
{map_id}
{/exp:reinos_maps:map}
The add circle tag for use inside the {exp:reinos_maps:map}
tag
{exp:reinos_maps:map}
{maps:add_circle}
{/exp:reinos_maps:map}
Below are the Tag Parameters. Those parameters can be used in the tag described above.
The address for the circle
address=""
The latlng for the circle
latlng=""
Enable the stroke
stroke:enable="yes" [OPTIONAL]
set the stroke color.
stroke:color="#000000" [OPTIONAL]
set the stroke opacity.
stroke:opacity="1" [OPTIONAL]
set the stroke weight.
stroke:weight="1" [OPTIONAL]
enable to fill the circle
fill:enable="yes" [OPTIONAL]
set the fill color.
fill:color="#000000" [OPTIONAL]
set the fill opacity.
fill:opacity="0.4" [OPTIONAL]
set the radius in meters.
radius="1000" [OPTIONAL]
set the tooltip for the marker.
tooltip:content="[location]" [OPTIONAL]
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]
Whether to open the tooltip permanently or only on mouseover.
tooltip:permanent="no" [OPTIONAL]
If yes
, the tooltip will follow the mouse instead of being fixed at the marker center.
tooltip:sticky="no" [OPTIONAL]
Set a class for the circle object
radius="maps_circle" [OPTIONAL]
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"
The add GeoJSON tag for use inside the {exp:reinos_maps:map}
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}
Below are the Tag Parameters. Those parameters can be used in the tag described above.
set the stroke color.
stroke:color="#000000" [OPTIONAL]
set the stroke opacity..
stroke:opacity="1" [OPTIONAL]
Set the stroke weight
stroke:weight="6" [OPTIONAL]
set the fill opacity.
fill:opacity="1" [OPTIONAL]
set the fill color
fill:color="#000000" [OPTIONAL]
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"
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}
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>
The add KML tag for use inside the {exp:reinos_maps:map}
tag
{maps:add_kml}
Below are the Tag Parameters. Those parameters can be used in the tag described above.
The url where the KML file is located
url=""
The add marker tag for use inside the {exp:reinos_maps:map}
tag
{exp:reinos_maps:map}
{maps:add_marker}
{/exp:reinos_maps:map}
Below are the Tag Parameters. Those parameters can be used in the tag described above.
The address for the marker
address=""
The latlng for the marker
latlng=""
Geocode also latlng coordinates to get the best result
reverse_geocode_latlng="no"
enable the animation for the marker, this will drop your marker.
Coming soon
animation="no" [OPTIONAL]
set the tooltip for the marker.
tooltip:content="[location]" [OPTIONAL]
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]
Whether to open the tooltip permanently or only on mouseover.
tooltip:permanent="no" [OPTIONAL]
If yes
, the tooltip will follow the mouse instead of being fixed at the marker center.
tooltip:sticky="no" [OPTIONAL]
set icon path for the marker.
icon:url="" [OPTIONAL]
Specify the offset in pixel where the icon must show
icon:offset="0,0" [OPTIONAL]
Set the size for an icon.
icon:size="25,41" [OPTIONAL]
set the shadow icon path for the marker.
icon:shadow:url="" [OPTIONAL]
Specify the shadow offset in pixel where the icon must show
icon:shadow:offset="0,0" [OPTIONAL]
Set the shadow size for an icon.
icon:shadow:size="" [OPTIONAL]
Set the class for the marker html
icon:class_name="maps_marker" [OPTIONAL]
With Glyph icons you can add Glyph icons to your marker
Set the prefix. For example, this would be fa
for FontAwesome
glyph_icon:prefix="" [OPTIONAL]
Set the name of the icon
glyph_icon:name="" [OPTIONAL]
If you need to add an extra class to the marker.
glyph_icon:class_name="" [OPTIONAL]
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]
Close the popup when another popup is opened.
In case if you want to open 2 or more popups by default, you can combine this with popup:open_by_default="yes"
values: yes
no
popup:open_by_default="yes" [OPTIONAL]
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 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, so latlng coordinates are geocoded to get the best known location.
reverse_geocoding_latlng="no"
The add polygon tag for use inside the {exp:reinos_maps:map}
tag
{maps:add_polygon
address="den-helder|zwolle|deventer|gorssel|arnhem|klarenbeek|apeldoorn"
}
Below are the Tag Parameters. Those parameters can be used in the tag described above.
The address for the polygon. Because this param need 2 address to create the polygon, use a pipline to seperate.
addresses=""
The latlng for the marker. Because this param need 2 latlng to create the rectangle, use a pipline to seperate.
latlngs=""
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]
"
Enable the stroke
stroke:enable="yes"
set the stroke color.
stroke:color="#000000" [OPTIONAL]
set the stroke opacity..
stroke:opacity="1" [OPTIONAL]
Set the stroke weight
stroke:weight="6" [OPTIONAL]
Enable the fill option
fill:enable="yes"
set the fill opacity.
fill:opacity="1" [OPTIONAL]
set the fill color
fill:color="#000000" [OPTIONAL]
set the tooltip for the marker.
tooltip:content="[location]" [OPTIONAL]
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]
Whether to open the tooltip permanently or only on mouseover.
tooltip:permanent="no" [OPTIONAL]
If yes
, the tooltip will follow the mouse instead of being fixed at the marker center.
tooltip:sticky="no" [OPTIONAL]
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"
The add polyline tag for use inside the {exp:reinos_maps:map}
tag
{maps:add_polyline
address="den-helder|zwolle|deventer|gorssel|arnhem|klarenbeek|apeldoorn"
}
Below are the Tag Parameters. Those parameters can be used in the tag described above.
The address
address="" [REQUIRED] if latlng is empty
Lat Lng points
latlng="" [REQUIRED] if address is empty
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]
"
Enable the stroke
stroke:enable="yes" [OPTIONAL]
set the stroke color.
stroke:color="#000000" [OPTIONAL]
set the stroke opacity..
stroke:opacity="1" [OPTIONAL]
Set the stroke weight
stroke:weight="6" [OPTIONAL]
set the tooltip for the marker.
tooltip:content="[location]" [OPTIONAL]
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]
Whether to open the tooltip permanently or only on mouseover.
tooltip:permanent="no" [OPTIONAL]
If yes
, the tooltip will follow the mouse instead of being fixed at the marker center.
tooltip:sticky="no" [OPTIONAL]
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"
The add recatangle tag for use inside the {exp:reinos_maps:map}
tag
{maps:add_rectangle}
Below are the Tag Parameters. Those parameters can be used in the tag described above.
The address for the marker. Because this param need 2 address to create the rectangle, use a pipline to seperate.
addresses=""
The latlng for the marker. Because this param need 2 latlng to create the rectangle, use a pipline to seperate.
latlngs=""
enable the stroke.
stroke:enable="yes" [OPTIONAL]
set the stroke color.
stroke:color="#000000" [OPTIONAL]
set the stroke opacity.
stroke:opacity="1" [OPTIONAL]
set the stroke weight.
stroke:weight="1" [OPTIONAL]
enable the fill
fill:enable="yes" [OPTIONAL]
set the fill color.
fill:color="#000000" [OPTIONAL]
set the fill opacity
fill:opacity="1" [OPTIONAL]
set the tooltip for the marker.
tooltip:content="[location]" [OPTIONAL]
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]
Whether to open the tooltip permanently or only on mouseover.
tooltip:permanent="no" [OPTIONAL]
If yes
, the tooltip will follow the mouse instead of being fixed at the marker center.
tooltip:sticky="no" [OPTIONAL]
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"
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.
This event is called when all data is loaded and placed on the map.
<script>
REINOS_MAPS.on('markers.ready', function(){
//your logic
});
</script>
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>
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.
domain.com/maps_api/address
domain.com/maps_api/latlng
domain.com/maps_api/ip
input
//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);
jQuery.post('domain.com/maps_api/address', {input:'amsterdam'}, function(result){
console.log(jQuery.parseJSON(result));
});
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
This will execute after the (all) Maps is fully loaded
REINOS_MAPS.ready(function(){
//your logic code
});
mapID : the ID
of the map (eg reinos_map_1
)
Refresh the map, so its update all data
REINOS_MAPS.api('refresh', {
mapID : '',
});
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 : ''
});
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 : ''
});
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: ''
});
mapID : the ID
of the map (eg reinos_map_1
)
Get a map instance
REINOS_MAPS.api('getMap', {
mapID : ''
});
mapID : the ID
of the map (eg reinos_map_1
)
Remove a map instance
REINOS_MAPS.api('removeMap', {
mapID : ''
});
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: '',
}
});
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 : ''
}
});
mapID : the ID
of the map (eg reinos_map_1
)
key : the key of the marker
Remove Marker
REINOS_MAPS.api('removeMarker', {
mapID : '',
key: ''
});
mapID : the ID
of the map (eg reinos_map_1
)
Remove all Marker
REINOS_MAPS.api('removeMarker', {
mapID : ''
});
mapID : the ID
of the map (eg reinos_map_1
)
key : the key of the marker
Hide Marker
REINOS_MAPS.api('', {
mapID : '',
key: ''
});
mapID : the ID
of the map (eg reinos_map_1
)
Hide all Marker
REINOS_MAPS.api('', {
mapID : ''
});
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: ''
});
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 : ''
});
mapID : the ID
of the map (eg reinos_map_1
)
key: The marker key
Get a marker
REINOS_MAPS.api('getMarker', {
mapID : '',
key: ''
});
mapID : the ID
of the map (eg reinos_map_1
)
Get all the markers for a specific map
REINOS_MAPS.api('', {
mapID : ''
});
Get all map markers
REINOS_MAPS.api('getAllMarkers');
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(){}
});
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 : ''
});
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 : ''
});
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 : ''
});
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: ''
});
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: ''
});
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: ''
});
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: ''
});
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: ''
});
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: ''
});
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: '',
});
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: ''
});
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: ''
});
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: ''
});
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: ''
});
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: ''
});
callback : a callback function
Geolocate to the current location
REINOS_MAPS.api('geolocation', {
callback : function(position){}
});
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){}
}});
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
});
load_jquery
paramopenstreetmap
tiles (and variants) cannot be loaded {maps:add_polyline json=""}
{maps:add_geojson}
for using GeoJSON with the Maps moduleREINOS_MAPS.on('markers.ready', function(){})
for all API methods like {maps:add_marker}
, {maps:add_circle}
etc.popup:content=""
parameter{exp:reinos_maps:map}
popup:min_width
params{exp:reinos_maps:html_header}
(replacing {exp:reinos_maps:init}
) {exp:reinos_maps:html_footer}
for outputting the JS directly in the footer.marker:icon:url
and marker:shadow:icon:url
addMarker
api call accept fitbounds
popupContent
was not stripped to one line for JS validtemplate_post_parse
hook does not get called.{exp:reinos_maps:init}
(Use {exp:reinos_maps:html_header} and {exp:reinos_maps:html_footer}
)*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.
popup:max_width=""
popup:min_width=""
params for the markerszoom:max=""
params for the mapicon:shadow:url=""
icon:shadow:size=""
icon:shadow:offset=""
popup:content=""
was not stripped to one line for JS validreinos_
due the release of the EE store (\Breaking changes)**EE_MAPS
to REINOS_MAPS
due the release of the EE store (Breaking changes)*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
refresh
JS methodupdateMap
popup:offset="0,0"
to position the popupicon:offset="0,0"
to position the iconMaps Fieldtype
gesture_handling="yes"
param