Examples

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

See working example

{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

See working example

{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

See working example

{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

See working example

{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

See working example

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

Map Controls

See working example

<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

See working example

{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

See working example

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

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

See working example

{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

See working example

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

See working example

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

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

Go the https://snazzymaps.com/ and generate your own style for your Google Map.
copy the code that Snazzy has generated for you.
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"
	tiles="google_maps_roadmap"
}
	{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

See working example

<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>

{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){
      $.each(result.objects, function(k,v){
        REINOS_MAPS.api("addMarker", {
          mapID : "reinos_map_1",
          lat: v.lat,
          lng: v.lng,
          title: v.city
        });

        REINOS_MAPS.api("addCircle", {
          mapID : "reinos_map_1",
          lat: v.lat,
          lng: v.lng,
          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){
          REINOS_MAPS.triggerEvent("addRectangle", {
            mapID : "reinos_map_1",
            bounds : [[result.objects[0].latitude,result.objects[0].longitude],[result.objects[1].latitude,result.objects[1].longitude]],
            fillColor : "#BBD8E9",
            fillOpacity : 0.3,
            strokeColor : "#BBD8E9",
            strokeOpacity : 0.8,
            strokeWeight : 2,
            zIndex : 1
          });
        }
      });

      REINOS_MAPS.api("fitMap", {
        mapID : "reinos_map_1"
      });
    }
  });
});
</script>

JS API Interactive search

See working example

<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>

<form style="margin-bottom: 10px;">
<input name="address" style="border: 1px solid green;"/>
<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"
        });

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

        //Fit the map
        REINOS_MAPS.api("fitMap", {
          mapID : "reinos_map_1"
        });
        REINOS_MAPS.api("setZoom", {
          mapID : "reinos_map_1" ,
          zoom : 6
        });
      }
    });
    return false;
  });
});

</script>

Manually show/hide markers

See working example

<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

See working example

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

Map Address

See working example

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

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

Map Latlng

See working example

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

Marker Cluster

See working example

{exp:reinos_maps:html_header}
{exp:reinos_maps:map
	show_marker_cluster="yes"
	width="100%"
	center:address="netherlands"
	zoom="7"
	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

See working example

{exp:reinos_maps:html_header}
{exp:reinos_maps:map
	width="100%"
	zoom="3"
}
	{maps:add_marker
		address="rotterdam"
		icon:url="{theme_user_folder_url}reinos_maps/dist/images/marker-icon.png"
	}

	{maps:add_marker
		address="amsterdam"
		icon:url="{theme_user_folder_url}reinos_maps/dist/images/marker-icon.png"
	}

	{maps:add_marker
		address="New york"
		icon:url="{theme_user_folder_url}reinos_maps/dist/images/marker-icon.png"
	}
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

See working example

{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;\">Just a test</div>"
        popup:open_on_hover="yes"
        popup:open_by_default="no"
	}
{/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

See working example

{exp:reinos_maps:html_header}
{exp:reinos_maps:map
	width="100%"
	zoom="8"
	fit_map:polygons="yes"
}
	{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

See working example

{exp:reinos_maps:html_header}
{exp:reinos_maps:map
	width="100%"
	fit_map:polygons="yes"
}
	{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

See working example

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

Polyline

See working example

{exp:reinos_maps:html_header}
{exp:reinos_maps:map
	width="100%"
	fit_map:polylines="yes"
	zoom="8"
}
	{maps:add_polyline
		addresses="den-helder|zwolle|deventer|gorssel|arnhem|klarenbeek|apeldoorn"
	}
{/exp:reinos_maps:map}
{exp:reinos_maps:html_footer}

See working example

{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

See working example

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

Reverse Latlng Geocoding

See working example

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

Titles

See working example

You can enable the tiles inside the Maps CP

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

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

Weather

See working example

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

Examples ​

Alternative tags ​

Circle ​

Geocoder template IP-Based ​

Geocoder template ​

GeoJSON ​

Geolocation ​

Map Controls ​

Google like Overlay ​

Google Maps - Styled Map ​

Google Maps - Traffic Layer ​

Google Maps - Transit title ​

Google Maps - Styled Map Snazzy ​

JS API general ​

JS API Interactive search ​

Manually show/hide markers ​

Map Controls ​

maps within an entry loop ​

maps with Stash ​

Map Address ​

Map Latlng ​

Marker Cluster ​

Map default marker icon ​

Popup ​

Multiple Maps ​

Polygon Json ​

Polygon Route with latlng ​

Polygon ​

Polyline ​

Popup ​

Rectangle ​

Reverse Latlng Geocoding ​

Titles ​

Weather ​

Examples

Alternative tags

Circle

Geocoder template IP-Based

Geocoder template

GeoJSON

Geolocation

Map Controls

Google like Overlay

Google Maps - Styled Map

Google Maps - Traffic Layer

Google Maps - Transit title

Google Maps - Styled Map Snazzy

JS API general

JS API Interactive search

Manually show/hide markers

Map Controls

maps within an entry loop

maps with Stash

Map Address

Map Latlng

Marker Cluster

Map default marker icon

Popup

Multiple Maps

Polygon Json

Polygon Route with latlng

Polygon

Polyline

Popup

Rectangle

Reverse Latlng Geocoding

Titles

Weather