Examples

Below are a couple of examples to quick start with the Maps module

Alternative tags

In some cases, it is hard to parse the value out of a param, especially complex values.

For those situations you can use the tagpair, it will render and parse the inside values correctly.

{exp:reinos_maps:html_header}
{exp:reinos_maps:map}
   {width}100%{/width}
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Circle

{exp:reinos_maps:html_header}
{exp:reinos_maps:map
    center:address="amsterdam"
}
    {maps:add_circle
        address="amsterdam"
        radius="5000"
        width="100%"
    }
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Geocoder template IP-Based

{exp:reinos_maps:geocoder
    ips="CURRENT_IP"
}
  {result}
    <ul>
      <li><b>latitude :</b> {latitude}</li> 
      <li><b>longitude :</b> {longitude}</li> 
      <li><b>bounds :</b> 
        <ul>
          {bounds}
            <li><b>south :</b> {south}</li> 
            <li><b>west :</b> {west}</li> 
            <li><b>north :</b> {north}</li> 
            <li><b>east :</b> {east}</li> 
          {/bounds}
        </ul>
      </li> 
      <li><b>admin_levels :</b> 
        <ul>
          {admin_levels}
            <li><b>level :</b> {level}</li> 
            <li><b>name :</b> {name}</li> 
            <li><b>code :</b> {code}</li> 
          {/admin_levels}
        </ul>
      </li>
      <li><b>street_name :</b> {street_name}</li> 
      <li><b>street_number :</b> {street_number}</li>
      <li><b>city :</b> {city}</li>
      <li><b>zipcode :</b> {zipcode}</li>
      <li><b>city_district :</b> {city_district}</li>
      <li><b>country :</b> {country}</li>
      <li><b>country_code :</b> {country_code}</li>
      <li><b>timezone :</b> {timezone}</li>
    </ul>
  {/result}
{/exp:reinos_maps:geocoder}

Geocoder template

{exp:reinos_maps:geocoder
    addresses="14525 SW Millikan Way, Beaverton, Washington, Oregon 97005, Verenigde Staten"
}
  {result}
    <ul>
      <li><b>latitude :</b> {latitude}</li> 
      <li><b>longitude :</b> {longitude}</li> 
      <li><b>bounds :</b> 
        <ul>
          {bounds}
            <li><b>south :</b> {south}</li> 
            <li><b>west :</b> {west}</li> 
            <li><b>north :</b> {north}</li> 
            <li><b>east :</b> {east}</li> 
          {/bounds}
        </ul>
      </li>
      <li><b>admin_levels :</b> 
        <ul>
          {admin_levels}
            <li><b>level :</b> {level}</li> 
            <li><b>name :</b> {name}</li> 
            <li><b>code :</b> {code}</li> 
          {/admin_levels}
        </ul>
      </li>
      <li><b>street_name :</b> {street_name}</li> 
      <li><b>street_number :</b> {street_number}</li>
      <li><b>city :</b> {city}</li>
      <li><b>zipcode :</b> {zipcode}</li>
      <li><b>city_district :</b> {city_district}</li>
      <li><b>country :</b> {country}</li>
      <li><b>country_code :</b> {country_code}</li>
      <li><b>timezone :</b> {timezone}</li>
    </ul>
  {/result}
{/exp:reinos_maps:geocoder}

GeoJSON

{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>

Geolocation

{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    focus_current_location="yes"
}
{exp:reinos_maps:html_footer}

Map Controls

<link href="https://cdn.materialdesignicons.com/1.3.41/css/materialdesignicons.min.css" rel="stylesheet" type="text/css" />
{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    center:address="new-york"
    width="100%"
}
    {maps:add_marker address="new-york" glyph_icon:prefix="mdi" glyph_icon:name="school"} 
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Google like Overlay

{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    width="100%"
    overlay:html="<p><b>maps Overlay</b></p>This is a Google Like overlay<p><p>Just like the Iframe</p>"
}
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Google Maps - Styled Map

Styled Map is only available with the Google Maps tiles enabled.

{exp:reinos_maps:html_header}
{exp:reinos_maps:map
    width="100%"
    zoom="6"
} 
    {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}
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Google Maps - Traffic Layer

{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    center:address="new-york"
    width="100%"
    tiles="google_maps_traffic"
}
{exp:reinos_maps:html_footer}

Google Maps - Transit title

{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    center:address="new-york"
    width="100%"
    tiles="google_maps_transit"
}
{exp:reinos_maps:html_footer}

Google Maps - Styled Map Sanzzy

Styled Map is only available with the Google Maps tiles enabled.

With Snazzy you can add your own custom map to the Maps.

  1. Go the https://snazzymaps.com/ and generate your own style for your Google Map.
  2. copy the code that Snazzy has generated for you.
  3. Paste the code (JSON) in the {google_maps:style parameter (without enters).

Snazzy works not great in the param, therefor we add it in a tagpair tag

{exp:reinos_maps:html_header}
{exp:reinos_maps:map
    width="100%"
    zoom="6"
} 
    {google_maps:style}
    [
        {
            "elementType": "geometry",
            "stylers": [
                {
                    "hue": "#ff4400"
                },
                {
                    "saturation": -68
                },
                {
                    "lightness": -4
                },
                {
                    "gamma": 0.72
                }
            ]
        },
        {
            "featureType": "road",
            "elementType": "labels.icon"
        },
        {
            "featureType": "landscape.man_made",
            "elementType": "geometry",
            "stylers": [
                {
                    "hue": "#0077ff"
                },
                {
                    "gamma": 3.1
                }
            ]
        },
        {
            "featureType": "water",
            "stylers": [
                {
                    "hue": "#00ccff"
                },
                {
                    "gamma": 0.44
                },
                {
                    "saturation": -33
                }
            ]
        },
        {
            "featureType": "poi.park",
            "stylers": [
                {
                    "hue": "#44ff00"
                },
                {
                    "saturation": -23
                }
            ]
        },
        {
            "featureType": "water",
            "elementType": "labels.text.fill",
            "stylers": [
                {
                    "hue": "#007fff"
                },
                {
                    "gamma": 0.77
                },
                {
                    "saturation": 65
                },
                {
                    "lightness": 99
                }
            ]
        },
        {
            "featureType": "water",
            "elementType": "labels.text.stroke",
            "stylers": [
                {
                    "gamma": 0.11
                },
                {
                    "weight": 5.6
                },
                {
                    "saturation": 99
                },
                {
                    "hue": "#0091ff"
                },
                {
                    "lightness": -86
                }
            ]
        },
        {
            "featureType": "transit.line",
            "elementType": "geometry",
            "stylers": [
                {
                    "lightness": -48
                },
                {
                    "hue": "#ff5e00"
                },
                {
                    "gamma": 1.2
                },
                {
                    "saturation": -23
                }
            ]
        },
        {
            "featureType": "transit",
            "elementType": "labels.text.stroke",
            "stylers": [
                {
                    "saturation": -64
                },
                {
                    "hue": "#ff9100"
                },
                {
                    "lightness": 16
                },
                {
                    "gamma": 0.47
                },
                {
                    "weight": 2.7
                }
            ]
        }
    ]
   {google_maps:style}
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

JS API general

{exp:reinos_maps:html_header}
{exp:reinos_maps:map
    center:address="europa"
    width="100%"
}
{exp:reinos_maps:html_footer}

<script>
$(function(){
    REINOS_MAPS.api('geocode', {
        address : 'heerde|apeldoorn|amsterdam',
        callback : function(result, type){
            result = $.parseJSON(result);
            $.each(result, function(k,v){
                REINOS_MAPS.api('addMarker', {
                    mapID : 'reinos_map_1',
                    lat: v.latitude,
                    lng: v.longitude,
                    title: v.city
                });

                REINOS_MAPS.api('addCircle', {
                    mapID : 'reinos_map_1',
                    lat: v.latitude,
                    lng: v.longitude,
                    fillColor : '#BBD8E9',
                    fillOpacity : 0.3,
                    radius : 7000,
                    strokeColor : '#BBD8E9',
                    strokeOpacity : 0.9,
                    strokeWeight : 2,
                    zIndex : 1
                });
            });

            REINOS_MAPS.api('geocode', {
                address : 'utrecht|hardewijk gelderland',
                callback : function(result, type){
                    result = $.parseJSON(result);
                    REINOS_MAPS.triggerEvent('addRectangle', {
                        mapID : 'reinos_map_1',
                        bounds : [[result[0].latitude,result[0].longitude],[result[1].latitude,result[1].longitude]],
                        fillColor : '#BBD8E9',
                        fillOpacity : 0.3,
                        strokeColor : '#BBD8E9',
                        strokeOpacity : 0.8,
                        strokeWeight : 2,
                        zIndex : 1
                    });
                }
            });

            REINOS_MAPS.api('fitZoom', {
                mapID : 'reinos_map_1',
                zoomLevel : 9
            });
        }
    });
});
</script>
<form>
<input name="address"/>
<input type="submit">
</form>


{exp:reinos_maps:html_header}
{exp:reinos_maps:map
    center:address="heerde"
    width="100%"
}
{exp:reinos_maps:html_footer}

<script>
$(function(){
    $('form').submit(function(){
        //geocode address
        REINOS_MAPS.api('geocode', {
            address : $('input[name="address"]').val(),
            callback : function(result, type){

                //remove old markers
                REINOS_MAPS.api('removeMarkers', {
                    mapID : 'reinos_map_1'
                });

                //parse result
                result = $.parseJSON(result);

                //add marker
                REINOS_MAPS.api('addMarker', {
                    mapID : 'reinos_map_1',
                    lat: result[0].latitude,
                    lng: result[0].longitude,
                    title: result[0].city
                });

                //Fit the map
                REINOS_MAPS.api('fitZoom', {
                    mapID : 'reinos_map_1',
                    zoomLevel : 11
                });
            }
        });
        return false;
    });
});

</script>

Manually show/hide markers

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="   crossorigin="anonymous"></script>

<p>
<input checked class="checkbox" type="checkbox" value="amsterdam"/> <strong>Amsterdam</strong> 
<input checked class="checkbox" type="checkbox" value="rotterdam"/>  <strong>Rotterdam</strong> 
<input checked class="checkbox" type="checkbox" value="den-haag"/> <strong>Den-Haag</strong> 
</p>

{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    width="100%"
    fit_map:markers="yes"
}
     {maps:add_marker
            address="amsterdam"
            keys="amsterdam"
    }
    {maps:add_marker
        address="rotterdam"
        keys="rotterdam"
    }
    {maps:add_marker
        address="den-haag"
        keys="den-haag"
    }
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

<script>
$(function(){
    $('.checkbox').click(function(){

        //show marker
        if($(this).is(':checked')) {
            REINOS_MAPS.api('showMarker', {
                mapID : 'reinos_map_1',
                key : $(this).val()
            }); 
        //hide
        } else {
             REINOS_MAPS.api('hideMarker', {
                mapID : 'reinos_map_1',
                key : $(this).val()
            });    
        }
    });
});
</script>

Map Controls

{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    center:address="new-york"
    width="100%"
    zoom_control_position="topright"
    scale_control="yes"
}
{exp:reinos_maps:html_footer}

maps within an entry loop

{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    width="100%"
}
    {exp:channel:entries channel="maps" dynamic="off"}
        {maps:add_marker
            address='{address}'
        }
    {/exp:channel:entries}
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

maps with Stash

{exp:stash:set name="address"}
{exp:channel:entries channel="maps" dynamic="off"}
        {address}|
{/exp:channel:entries}
{/exp:stash:set}

{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    width="100%"
}
    {maps:add_marker
        address='{exp:stash:get name="address"}'
    }
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Marker animation

Coming soon

Marker Cluster

{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    show_marker_cluster="yes"
    width="100%"
    center:address="netherlands"
    zoom="12"
    marker_cluster:enabled="yes"
}
    {maps:add_marker address="heerde"}
    {maps:add_marker address="amsterdam"}
    {maps:add_marker address="rotterdam"}
    {maps:add_marker address="apeldoorn"}
    {maps:add_marker address="zwolle"}
    {maps:add_marker address="klarenbeek"}
    {maps:add_marker address="voorst"}
    {maps:add_marker address="den-helder"}
    {maps:add_marker address="deventer"}
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Map default marker icon

{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    width="100%"
    zoom="3"
}
    {maps:add_marker
        address="rotterdam"
        icon:url="/themes/user/maps/images/icons/blue.png"
    }

    {maps:add_marker
        address="amsterdam"
        icon:url="/themes/user/maps/images/icons/yellow.png"
    }

    {maps:add_marker
        address="New york"
        icon:url="/themes/user/maps/images/icons/green.png"
    }
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}
{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    width="100%"
    center:address="new york"
}
    {maps:add_marker
        address="new york"
        popup:content='<div style="border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;" class="test_class">Just a test</div>'
        popup:open_on_hover="yes"
        popup:open_by_default="no"
    }
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Map Address

{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    width="100%"
    center:address="amsterdam"
}
    {maps:add_marker
        address="amsterdam"
        popup:content="This is [location]"
    }
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Map Latlng

{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    width="100%"
    center:latlng="52.3702157,4.8951679"
}
    {maps:add_marker
        latlng="52.3702157,4.8951679"
    }
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Map Address

{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    width="100%"
    zoom="3"
}
    {maps:add_marker
        address="heerde"
        popup:content="This is [location]"
    }

    {maps:add_marker
        address="Amsterdam"
        popup:content="This is [location]"
    }

    {maps:add_marker
        address="New york"
        popup:content="This is [location]"
    }
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Multiple Maps

{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    width="100%"
}    
    {maps:add_marker address="new-york"}
{/exp:reinos_maps:map}

{exp:reinos_maps:map 
    width="100%"
}    
    {maps:add_marker address="Paris"}
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Polygon Json

{exp:reinos_maps:html_header}
{exp:reinos_maps:map
    width="100%"
    zoom="8"
    center:address="holland"
}
    {maps:add_polygon
          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]
            "
      }

{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Polygon Route with latlng

{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    width="100%"
}
    {maps:add_polygon
        latlngs="52.476513,6.059421|52.476232,6.059473|52.476462,6.059678|52.476026,6.057336|52.477334,6.056235|52.476208,6.053733|52.475268,6.053172|52.475309,6.052058|52.477298,6.041924|52.477081,6.037002|52.474966,6.030045|52.475575,6.027663|52.473766,6.0247|52.471841,6.017697|52.470786,6.015338|52.471639,6.0135|52.463689,5.99391|52.463725,5.992923|52.467098,5.988716|52.473053,5.980031|52.473147,5.977832|52.471958,5.968243|52.454329,5.925036|52.452308,5.910393|52.440109,5.879864|52.439187,5.875218|52.439573,5.869075|52.441626,5.860956|52.442539,5.855898|52.442786,5.847172|52.443532,5.843247|52.443215,5.842697|52.441633,5.834136|52.440749,5.832119|52.439176,5.830319|52.439306,5.829369|52.439745,5.828544|52.441768,5.827146|52.445726,5.825273|52.447676,5.825734|52.450786,5.827523|52.451199,5.828226|52.452516,5.827521|52.455906,5.822085|52.457743,5.816082|52.458182,5.815419|52.458194,5.815888|52.457823,5.816289|52.457464,5.815668|52.457894,5.815072|52.458089,5.813705|52.455317,5.808459|52.453879,5.808031|52.440739,5.796637|52.439874,5.796222|52.438438,5.794246|52.433652,5.785667|52.425075,5.768483|52.424634,5.768322|52.416215,5.749888|52.415493,5.74691|52.417194,5.728782|52.41707,5.724921|52.416364,5.720739|52.410971,5.704238|52.397476,5.659967|52.384701,5.631545|52.381416,5.625038|52.379274,5.622613|52.373323,5.618179|52.368953,5.611488|52.366484,5.608778|52.365883,5.607662|52.366613,5.606824|52.366481,5.604304|52.363608,5.589187|52.363257,5.584265|52.36376,5.5803|52.367781,5.563555|52.367511,5.563601|52.351417,5.539579|52.348774,5.537424|52.347059,5.53709|52.345045,5.537658|52.324534,5.548139|52.323226,5.549061|52.32322,5.549656|52.319975,5.551347|52.321325,5.550633|52.321347,5.550243|52.321273,5.54938|52.320447,5.548845|52.320197,5.547255|52.320587,5.549164|52.321348,5.549474|52.317961,5.549058|52.303082,5.541173|52.302257,5.540345|52.30319,5.535553|52.301453,5.534458|52.300539,5.532625|52.299007,5.532187|52.297036,5.530561|52.295332,5.524196|52.295344,5.522657|52.295715,5.521938|52.295367,5.521398|52.290458,5.51888|52.289985,5.520718|52.289702,5.52076|52.282868,5.517396|52.281581,5.517541|52.276126,5.519922|52.274763,5.512668|52.274182,5.511304|52.272801,5.509688|52.272299,5.508271|52.271441,5.502798|52.271682,5.496114|52.270177,5.48762|52.269179,5.484915|52.266253,5.480676|52.265077,5.4778|52.264088,5.472415|52.265313,5.471595|52.265269,5.470045|52.25704,5.473317|52.256846,5.47522|52.257861,5.480031|52.262708,5.489495|52.263161,5.493401|52.263637,5.494688|52.263779,5.498005|52.264431,5.500478|52.26471,5.506149|52.263892,5.512343|52.263433,5.530513|52.263692,5.531672|52.26512,5.532925|52.265494,5.532709|52.267241,5.53389|52.271941,5.538547|52.276739,5.541703|52.285134,5.546236|52.2858,5.54582|52.288151,5.547004|52.290611,5.548979|52.302561,5.555177|52.314014,5.563089|52.317684,5.567805|52.324809,5.5753|52.328086,5.580316|52.331796,5.589551|52.332938,5.595048|52.333803,5.594685|52.334568,5.595332|52.335702,5.597574|52.337268,5.599587|52.338232,5.601943|52.339371,5.603688|52.346315,5.612313|52.347034,5.612537|52.347848,5.613795|52.348881,5.613404|52.349892,5.614648|52.350859,5.615062|52.351631,5.617977|52.351925,5.618009|52.353315,5.620205|52.351814,5.623531|52.351185,5.623348|52.350763,5.624141|52.352413,5.626422|52.35404,5.629855|52.353675,5.630363|52.353202,5.63015|52.351705,5.63088|52.351933,5.632483|52.351521,5.635484|52.350107,5.638304|52.350515,5.639663|52.350331,5.639857|52.351313,5.6462|52.353337,5.652024|52.353694,5.653819|52.355485,5.666146|52.355691,5.676044|52.355872,5.676465|52.356273,5.676116|52.357236,5.677528|52.357384,5.678439|52.35818,5.691503|52.35781,5.694002|52.356325,5.697582|52.354632,5.703157|52.35452,5.706267|52.355943,5.711056|52.360241,5.719673|52.364289,5.733772|52.367533,5.741257|52.368582,5.746049|52.371965,5.756922|52.372232,5.758889|52.373272,5.762515|52.374588,5.770056|52.385512,5.790413|52.388967,5.795016|52.390843,5.795749|52.410335,5.80927|52.417721,5.817747|52.422904,5.824958|52.42464,5.826577|52.439466,5.831104|52.440637,5.832233|52.441331,5.833577|52.442919,5.841282|52.443045,5.843632|52.442255,5.857282|52.441458,5.861095|52.440118,5.865253|52.439184,5.870885|52.439028,5.874815|52.439413,5.878046|52.440177,5.880677|52.443661,5.889544|52.452293,5.910336|52.454403,5.925215|52.471905,5.968001|52.473214,5.978512|52.47309,5.979887|52.47248,5.981172|52.464047,5.992583|52.4637,5.993472|52.463826,5.994527|52.471494,6.013568|52.470809,6.015242|52.471383,6.016284|52.472802,6.020983|52.47172,6.021822|52.473713,6.025222|52.474609,6.029756|52.474908,6.029738|52.476986,6.036506|52.477319,6.041832|52.475382,6.051428|52.475253,6.053166|52.476276,6.05385|52.477334,6.056235|52.476049,6.057313|52.47624,6.059711|52.47655,6.059665"
        stroke:color="red"
        fill:opacity="0.3"
    }
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Polygon

{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    width="100%"
    center:address="holland"
    zoom="7"
}
    {maps:add_polygon
        addresses="den-helder|zwolle|deventer|gorssel|arnhem|klarenbeek|apeldoorn"
    }
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Polyline

{exp:reinos_maps:html_header}
{exp:reinos_maps:map
    width="100%"
    center:address="holland"
    zoom="8"
}
    {maps:add_polyline
        addresses="den-helder|zwolle|deventer|gorssel|arnhem|klarenbeek|apeldoorn"
    }
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}
{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    width="100%"
    center:address="new york"
}
    {maps:add_marker
        address="new york"
        popup:content="Your text goes here, perhaps with url <a href='[map_url]'>that open in the same window</a> or <a target='_blank' href='[map_url]'>in a new window.</a>"
    }
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Rectangle

{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    width="100%"
    fit_map:rectangles="yes"
}
    {maps:add_rectangle
        addresses="apeldoorn|heerde"
    }
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Reverse Latlng Geocoding

{exp:reinos_maps:html_header}
{exp:reinos_maps:map
    width="100%"
    fit_map:markers="yes"
}
    {maps:add_marker
        reverse_geocoding_latlng="no"
        latlng="52.6109572221503, 9.707013666629791"
     }
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Titles

You can enable the tiles inside the Maps CP

{exp:reinos_maps:html_header}
{exp:reinos_maps:map 
    tiles="google_maps_roadmap|openstreetmap|open_topo_map"
    width="100%"
}

{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

Weather

{exp:reinos_maps:html_header}
{exp:reinos_maps:map
    center:address="Amsterdam"
    weather="rain:0.6:yes,wind:0.1:yes"
}
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}