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 version is a major update that can only be installed on top of version 2.3.x or higher. See https://addons.reinos.nl/news/maps-suite-3
Examples can be found here
For every paid addon you need to validate your license in order to activate the module.
On a local environment, like *.dev *.local *.localhost *.test the license is valid for testing and building a new or existing sites.
For every other domain, you need to have a valid license.
Once installed, you will asked to enter your license key. When you entered a valid license you can hit the "Save license" button. This will start validating your license and will redirect you to addons.reinos.nl to login into your account. You can also register a new account in this process.
Once logged in, you are asked to use your current account or to login with another one.
Using the current logged in account, the server will check all info related to your license and once valid, it will redirect you back to your site where you see either a success message or an error message.
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 add 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
Sometimes it happens that the license system says you have an invalid license. When this happens, make sure you have entered your domain url in your account, next to your license on addons.reinos.nl.
If this will not fix your license problem, please contact us on https://addons.reinos.nl/support
The Maps module add some new things but also dropped some functions compared to the Gmaps module.
First de-install the Gmaps module (save your API keys to notepad) and install the Maps 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 bottomrightpopup:contentfit_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_positionmarker: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=""{exp:reinos_maps:geocoder
addresses="heerde"
}Below are the Tag Parameters. Those parameters can be used in the tag described above.
multiple addresses, eg. addresses seperated with a pipline '|'
addresses="" [REQUIRED] if latlng or ip is emptymultiple latitude longlitude, seperated with a pipline '|'
latlngs="" [REQUIRED] if address or ip is emptymultiple ips, seperated with a pipline '|' (Magic const: CURRENT_IP and SERVER_IP)
ips="" [REQUIRED] if address or latlng is emptyBelow 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"Enable the fullscreen control. This adds a button to map that will set the map to fullscreen upon click. Possible values are yes or no
fullscreen_control="no"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]Add Google Steetview to your map
Note: that you need to have Google Maps Tile enabled to get this fully working
google_maps:streetview="yes" [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]Zoom out on the bound level that has been set.
For example, your auto zoom is 10 and you are using fit_map:force_zoom_out="3". Your new zoom level become 7.
fit_map:force_zoom_out="1" [OPTIONAL]Force zoom. This will override the auto zoom level.
fit_map:force_zoom="10" [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 content.
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 center.
tooltip:sticky="no" [OPTIONAL]Set a class for the circle object
radius="maps_circle" [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
possible values no|yes
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"
possible values no|yes
popup:open_by_default="yes" [OPTIONAL]To get the circle via the api, you have to enter the key for you circle. 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_circle:key2_for_the_first_circle"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
possible values no|yes
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"
possible values no|yes
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" [OPTIONAL]Get the elevation so you can use the [elevation] variable in the Popups (only availble with the maps_service module installed)
possible values no|yes
get_elevation="no" [OPTIONAL]Reverse geocoding, so latlng coordinates are geocoded to get the best known location.
possible values no|yes
reverse_geocoding_latlng="no" [OPTIONAL]Set a URL where the marker goes on marker click
link:url=""How to open the link
possible values no|yes
link:new_tab="no" [OPTIONAL]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. 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 content.
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 center.
tooltip:sticky="no" [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
possible values no|yes
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"
possible values no|yes
popup:open_by_default="yes" [OPTIONAL]To get the polygon via the api, you have to enter the key for you polygon. 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_polygon:key2_for_the_first_polygon"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
addresses="" [REQUIRED] if latlng is emptyLat Lng points
latlngs="" [REQUIRED] if address is emptya 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 content.
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 center.
tooltip:sticky="no" [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
possible values no|yes
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"
possible values no|yes
popup:open_by_default="yes" [OPTIONAL]To get the polyline via the api, you have to enter the key for you polyline. 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_polyline:key2_for_the_first_polyline"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 rectangle. Because this param need 2 address to create the rectangle, use a pipline to seperate.
addresses=""The latlng for the rectangle. 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 rectangle.
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 rectangle center.
tooltip:sticky="no" [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
possible values no|yes
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"
possible values no|yes
popup:open_by_default="yes" [OPTIONAL]To get the rectangle via the api, you have to enter the key for you rectangle. 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_rectangle:key2_for_the_first_rectangle"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": "your-addres"
}{
"success":true,
"objects":[
{
"latitude":52.21115700000001,
"lat":52.21115700000001,
"longitude":5.9699231,
"lng":5.9699231,
"latlng":"52.211157,5.9699231",
"bounds":[
{
"south":52.172528,
"west":5.8925689,
"north":52.25032119999999,
"east":6.0582248
}
],
"street_name":null,
"street_number":null,
"city":"Amsterdam",
"locality":"Amsterdam",
"zipcode":null,
"admin_levels":[
{
"level":1,
"name":"Gelderland",
"code":"GE"
},
{
"level":2,
"name":"Amsterdam",
"code":"Amsterdam"
}
],
"city_district":null,
"sub_locality":null,
"country":"Netherlands",
"country_code":"NL",
"timezone":null,
"default_title":"Amsterdam, Netherlands",
"address":"Amsterdam, Netherlands"
}
]
}//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)
REINOS_MAPS.api('zoomOut', {
mapID : '' ,
});mapID : the ID of the map (eg reinos_map_1)
REINOS_MAPS.api('zoomIn', {
mapID : '' ,
});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){}
}});in the callback the result of your request looks like
{
"success":true,
"objects":[
{
"latitude":52.21115700000001,
"lat":52.21115700000001,
"longitude":5.9699231,
"lng":5.9699231,
"latlng":"52.211157,5.9699231",
"bounds":[
{
"south":52.172528,
"west":5.8925689,
"north":52.25032119999999,
"east":6.0582248
}
],
"street_name":null,
"street_number":null,
"city":"Apeldoorn",
"locality":"Apeldoorn",
"zipcode":null,
"admin_levels":[
{
"level":1,
"name":"Gelderland",
"code":"GE"
},
{
"level":2,
"name":"Apeldoorn",
"code":"Apeldoorn"
}
],
"city_district":null,
"sub_locality":null,
"country":"Netherlands",
"country_code":"NL",
"timezone":null,
"default_title":"Apeldoorn, Netherlands",
"address":"Apeldoorn, Netherlands"
}
]
}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
});Most of the WYSIWYG editors generate a lot of HTML to show the content correctly. However, if we put this content inside our
{add_marker popup:content="{editor_field}"} it will not work most of the time.
The thing is that the EE parser cannot deal with this complex markup inside a parameter.
To solve this we introduce a new tag {exp:reinos_maps:encode}{your_editor_field}{/exp:reinos_maps:encode}. This tag will
encode the data and parse it later on to the map.
Currently we support the following parameters
{add_marker popup:content=""}{exp:reinos_maps:encode}{add_marker
popup:content="{exp:reinos_maps:encode}your complex markup{/exp:reinos_maps:encode}"
}Creation of dynamic property.... fit_map:force_zoom was not working correctlyfullscreen_control="yes" to add a control that allow you to set the map to a fullscreen modelatlngs and ips param is not working in the {exp:reinos_maps:geocoder} tagBreaking changes
Revisited and change your params for all {exp:reinos_maps:geocoder} tags
{exp:reinos_maps:geocoder address=""} --> {exp:reinos_maps:geocoder addresses=""}
{exp:reinos_maps:geocoder latlng=""} --> {exp:reinos_maps:geocoder latlngs=""}
{exp:reinos_maps:geocoder ip=""} --> {exp:reinos_maps:geocoder ips=""}
Exception Caught: No message factories found. occurMap()Map() for the cached maps objectszoom="" got broken after v3.3.1circle rectangle polyline polygonNo such property: 'db'fit_map:force_zoom_out to zoom out on the fitboundsBreaking changes
If you where using Key ID, Team ID and Private Key for Apple Maps, you need to create a new API key here [https://maps.developer.apple.com/token-maker]
Breaking changes See https://addons.reinos.nl/news/maps-suite-3
You need at least v2.3.x or higher to upgrade to this version. Inside all v3.x.x releases, there is a v2.x.x. release. You can use this version to upgrade to the latest v2.x.x and after that upgrade you are good to go to update to v3.x.x. Remember, its just replacing files and hit the upgrade button. There is no other action required, it's that simple (but required).
PHP and JS code base (lower JS size by 50%)load_jquery paramgoogle_maps:streetview="yes" See https://docs.reinos.nl/maps/#google_maps-streetviewZoomOut function REINOS_MAPS.api('zoomOut', { mapID : '' })ZoomIn function REINOS_MAPS.api('zoomIn', { mapID : '' })link:url="" to the marker tag, so you can link a marker to a. external page{exp:reinos_maps:encode} to encode complex data in parameters{path=} inside paramsopenstreetmap 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:urladdMarker api call accept fitboundspopupContent 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})Breaking changes
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 methodupdateMappopup:offset="0,0" to position the popupicon:offset="0,0" to position the iconMaps Fieldtypegesture_handling="yes" param