Add beautiful maps to your WordPress pages with ease. Customize location, map styles, up to two markers, routing and more. Include the map as Gutenberg block, WPBakery Page Builder (formerly Visual Composer) content element or shortcode.<\/p>\n\n
This plugin comes with sane predefined settings. Adjust them to your liking. The marker is optional and is not displayed by default.<\/p>\n\n
Map Style<\/strong> Choose the style of the map from one of the available map tile providers to fit your needs.\nMap Style Key<\/strong> Enter an API key or access token for the provider depending on the chosen map style. Only required for some map style providers.\nMap Height in Relation to Width<\/strong> Change the map's aspect ratio. Works nicely with responsive designs.\nZoom Level<\/strong> Change the view distance. The higher the number, the closer the distance to the map. (Note: not all styles support all zoom levels).\nZoom With CTRL-Key Only<\/strong> Prevent zooming during page scroll.\nLatitude\/Longitude of the Map's Center<\/strong> Specify the map's center position. Only needed if no marker configured or no marker is set as center of the map.\nActivate Routing<\/strong> Activate route planning for the user.\nShow Attribution<\/strong> Display or hide attribution for map styles and data. If you disable the checkbox please consider the legal circumstances.<\/p>\n\n Default Routing Destination<\/strong> Enter the number of the marker that should be the default routing destination.\nRouting Service<\/strong> Choose the routing service that is used for retrieving the routing information.\nRouting Key<\/strong> Enter an API key or access token depending on the chosen routing service.<\/p>\n\n Geocoding Service<\/strong> Choose the geocoding service that is used to translate addresses to latitude and longitude.\nGeocoding Key<\/strong> Enter an API key or access token depending on the chosen geocoding service.<\/p>\n\n Center map on<\/strong> Enter the number of the marker that should be in the center of the map.\nDetermine Position By<\/strong> Choose if you want to specify the marker position by an address or coordinates. The marker appears only if you specify an address or coordinates.\nAddress<\/strong> Insert the marker's address here with comma separated address parts (only used if you have chosen 'Address' in previous setting).\nLatitude\/Longitude<\/strong> Specify marker position with latitude and longitude data (only used if you have chosen 'Coordinates' in first setting).\nIcon<\/strong> The icon to appear on the marker. Subset from Material Icons<\/a> in outlined style (available categories: Maps, Places, Social).\nColor<\/strong> Background color of the marker.\nPopup Text<\/strong> Content of the popup that appears if the user clicks on the marker.<\/p>\n\n The block is located in the 'Embed' category and supports the wide and full width options.<\/p>\n\n The content element for the map can be found on the 'Content' tab with the name 'SBS OpenStreetMap'. The content element for the marker can also be found on the 'Content' tab with the name 'SBS Openstreetmap Marker' but only as child of the map element.<\/p>\n\n The Plugin comes with two shortcodes: See section 'General Settings' for description. Name in parentheses is the entry there.<\/p>\n\n map_style<\/strong> (Map Style)\nChoose provider and style variant and define map_style as 'provider.variant' (eg. Thunderforest.Transport) or in case of a provider without variants just 'provider' (eg. OpenTopoMap) . (pay attention to upper and lower case)<\/p>\n\n Available Provider with Variants:\nOpenStreetMap<\/em> -- Variants: DE (default), Mapnik, France, HOT\nOpenTopoMap<\/em>\nStadia<\/em> -- Variants: AlidadeSmooth, AlidadeSmoothDark, Outdoors, OSMBright, StamenToner, StamenTonerLite, StamenTerrain, StamenWatercolor\nThunderforest<\/em> -- Variants: OpenCycleMap, Transport, TransportDark, SpinalMap, Landscape, Outdoors, Pioneer, MobileAtlas, Neighbourhood\nMapBox<\/em> -- Variants: Streets, Outdoors, Light, Dark, Satellite\nCartoDB<\/em> -- Variants: Positron, DarkMatter, Voyager\nMapTiler<\/em> -- Variants: Basic, Bright, Pastel, Positron, Hybrid, Streets, Toner, Topo, Voyager<\/p>\n\n For more information see section 'Map Styles'.\nmap_style_key<\/strong> (Map Style Key) Needed for certain map providers.\nmap_height<\/strong> (Map Height in Relation to Width) Use a number as percentage of the width. Default value is 50.\nzoom<\/strong> (Zoom Level) Number between 0 and 20. Default value is 15.\nctrl_mouse_zoom<\/strong> (Zoom With CTRL-Key Only) Set to true or false. Default is false.\nlatitude<\/strong> (Latitude of the Map's Center)\nlongitude<\/strong> (Longitude of the Map's Center)\nrouting<\/strong> (Activate Routing) Set to true or false. Default is false.\nshow_attribution<\/strong> (Show Attribution) Set to true or false. Default is true.\ndestination_marker<\/strong> (Default Routing Destination) Number of the marker shortcode based on order inside the map shortcode. 0 if no marker is supposed to be the default routing destination. Default is 1.\nrouter<\/strong> (Routing Service) Available values:\nosrmv1<\/em> (default)\nmapbox<\/em>\nrouter_key<\/strong> (Routing Key) Needed for certain routing services.\ngeocoder<\/strong> (Geocoding Service) Available values:\nnominatim<\/em> (default)\nmapbox<\/em>\ngeocoder_key<\/strong> (Geocoding Key) Needed for certain geocoding services.\ncenter_marker<\/strong> (Center Map on) Number of the marker shortcode based on order inside the map shortcode. 0 if no marker is supposed to be the center of the map. Default is 1.<\/p>\n\n See section 'General Settings' for description. Name in parentheses is the entry there.<\/p>\n\n marker_source<\/strong> (Determine Position By) Available values:\naddress<\/em> (default)\ncoordinates<\/em>\nmarker_address<\/strong> (Address)\nmarker_latitude<\/strong> (Latitude)\nmarker_longitude<\/strong> (Longitude)\nmarker_icon<\/strong> (Icon) CSS classes for the icon. Go to the Material Icon website and choose your desired icon. To get the CSS classes, use the icon's name, replace the underscore with a hyphen and prepend 'sbs-map-icon sbs-map-'. Example: icon 'local_airport' becomes 'sbs-map-icon sbs-map-local-airport'\nmarker_color<\/strong> (Color) Available values:\nred<\/em>\nwhite<\/em>\ndark_blue<\/em> (default)\ngreen<\/em>\nblack<\/em>\norange<\/em>\nyellow<\/em><\/p>\n\n Examples:<\/strong><\/p>\n\n Uses default values<\/p>\n\n Green marker from coordinates with my_location icon, centered map at marker and no popup text<\/p>\n\n CartoDB Voyager style, Zoom with CTRL key only, dark blue marker from address with popup text<\/p>\n\n Mapbox Streets style that needs an access token<\/p>\n\n Two markers with different addresses, center of the map somewhere in between through coordinates<\/p>\n\n The selectable styles are offered by various providers. Each provider has its own terms of use and licensing, which should be taken into account before using the styles. (See section 'Licenses\/Policies' for links)\nProviders could change their terms of use or might not be available at all times (especially if they are free\/ without registration).<\/p>\n\n OpenStreetMap<\/strong>\nUsable without registration.\nVariants:<\/em> DE, Mapnik, France, HOT\nExamples: DE<\/a>, Mapnik<\/a>, France<\/a>, HOT<\/a>\nTiles:<\/em>\n* DE: https:\/\/tile.openstreetmap.de\/{z}\/{x}\/{y}.png\n* Mapnik: https:\/\/tile.openstreetmap.org\/{z}\/{x}\/{y}.png\n* France: https:\/\/{s}.tile.openstreetmap.fr\/osmfr\/{z}\/{x}\/{y}.png\n* HOT: https:\/\/{s}.tile.openstreetmap.fr\/hot\/{z}\/{x}\/{y}.png\nAttributions:<\/em>\n* DE, Mapnik: © OpenStreetMap<\/a> contributors\n* France: © OpenStreetMap France | © OpenStreetMap<\/a> contributors\n* HOT: © OpenStreetMap<\/a> contributors, Tiles style by Humanitarian OpenStreetMap Team<\/a> hosted by OpenStreetMap France<\/a><\/p>\n\n OpenTopoMap<\/strong>\nUsable without registration.\nExample<\/a>\nTiles:<\/em>\n* https:\/\/{s}.tile.opentopomap.org\/{z}\/{x}\/{y}.png\nAttributions:<\/em>\n* Map data: © OpenStreetMap<\/a> contributors, <\/a> | Map style: © OpenTopoMap<\/a> (CC-BY-SA<\/a>)<\/p>\n\n Stadia<\/strong>\nIn order to use Stadia maps, you must register<\/a> and whitelist your domain within your account. Map styles from Stamen are now included in Stadia.\nVariants:<\/em> AlidadeSmooth, AlidadeSmoothDark, Outdoors, OSMBright, StamenToner, StamenTonerLite, StamenTerrain, StamenWatercolor\nExamples<\/a>\nTiles:<\/em>\n* https:\/\/tiles.stadiamaps.com\/tiles\/{variant}\/{z}\/{x}\/{y}{r}.{ext}\nAttributions:<\/em>\n* Stamen: © Stadia Maps<\/a> © Stamen Design<\/a> © OpenMapTiles<\/a> © OpenStreetMap<\/a> contributors\n* Other: © Stadia Maps<\/a> © OpenMapTiles<\/a> © OpenStreetMap<\/a> contributors<\/p>\n\n Thunderforest<\/strong>\nIn order to use Thunderforest maps, you must register<\/a>. Once registered, you get an API key to use for the map styles.\nVariants:<\/em> OpenCycleMap, Transport, TransportDark, SpinalMap, Landscape, Outdoors, Pioneer, MobileAtlas, Neighbourhood\nExamples<\/a>\nTiles:<\/em>\n* https:\/\/{s}.tile.thunderforest.com\/{variant}\/{z}\/{x}\/{y}.png?apikey={apikey}\nAttributions:<\/em>\n* © Thunderforest<\/a>, © OpenStreetMap<\/a> contributors<\/p>\n\n MapBox<\/strong>\nIn order to use MapBox maps, you must register<\/a>. Once registered, you get an access token to use for the map styles.\nVariants:<\/em> Streets, Outdoors, Light, Dark, Satellite\nExamples<\/a>\nTiles:<\/em>\n* https:\/\/api.mapbox.com\/styles\/v1\/{id}\/tiles\/{z}\/{x}\/{y}{r}?access_token={accessToken}\nAttributions:<\/em>\n* © Mapbox<\/a> © OpenStreetMap<\/a> contributors Improve this map<\/a><\/p>\n\n CartoDB<\/strong>\nBasemaps are usable without registration.\nVariants:<\/em> Positron, DarkMatter, Voyager\nExamples<\/a>\nTiles:<\/em>\n* https:\/\/{s}.basemaps.cartocdn.com\/{variant}\/{z}\/{x}\/{y}{r}.png\nAttributions:<\/em>\n* © OpenStreetMap<\/a> contributors CARTO<\/a><\/p>\n\n MapTiler<\/strong>\nIn order to use MapTiler maps, you must register<\/a>. Once registered, you get an API key to use for the map styles.\nVariants:<\/em> Basic, Bright, Pastel, Positron, Hybrid, Streets, Toner, Topo, Voyager\nExamples<\/a>\nTiles:<\/em>\n* https:\/\/api.maptiler.com\/maps\/{variant}\/{z}\/{x}\/{y}{r}.{ext}?key={key}\nAttributions:<\/em>\n* © MapTiler<\/a> © OpenStreetMap contributors<\/a><\/p>\n\n These values are deprecated and will be mapped onto the corresponding new values for the same map style.\nopenstreetmap_de<\/em>\nopentopomap<\/em>\nstamen_toner<\/em>\nstamen_toner_light<\/em>\nstamen_terrain<\/em>\nstamen_watercolor<\/em>\nwikimedia<\/em> (not available anymore and if set in map, will be replaced with OpenStreetMap.DE)<\/p>\n\n Provides the map data<\/strong>\nOpenStreetMap ODbL<\/a>\nProviders for routing<\/strong>\nOSRM Demo Server Usage policy<\/a>\nMapbox Terms of service<\/a>\nProviders for geocoding<\/strong>\nNominatim Usage policy<\/a>\nMapbox Terms of service<\/a>\nProviders used for choosable map styles<\/strong>\nOpenStreetMap Terms of use<\/a>\nOpenTopoMap CC-BY-SA\/Terms of use<\/a>\nStadia Terms of use<\/a>\nThunderforest Terms of use<\/a>\nMapBox Terms of use<\/a>\nCartoDB Terms of use<\/a>\nMapTiler Terms of use<\/a><\/p>\n\n Leaflet JS<\/a> BSD 2-Clause \"Simplified\" License<\/a>\nLeaflet.GestureHandling MIT License<\/a>\nLeaflet-providers BSD 2-Clause \"Simplified\" License<\/a>\nLeaflet-control-geocoder BSD 2-Clause \"Simplified\" License<\/a>\nLeaflet-routing-machine ISC License<\/a><\/p>\n\n\nRouting Settings<\/h4>\n\n
Geocoding Settings<\/h4>\n\n
Marker Settings<\/h4>\n\n
Gutenberg<\/h3>\n\n
WPBakery Page Builder<\/h3>\n\n
Shortcodes<\/h3>\n\n
[sbs_openstreetmap]<\/code> for the map and [sbs_marker]<\/code> for the markers (need to be placed between the opening and closing tags of the map shortcode).\nIf parameters are not specified, the defaults are used (the same as in the other components). The popup text for the marker can be specified between the opening and closing tags of the marker shortcode.<\/p>\n\nParameters Map Shortcode<\/h4>\n\n
Parameters Marker Shortcode<\/h4>\n\n
[sbs_openstreetmap][sbs_marker][\/sbs_marker][\/sbs_openstreetmap]\n<\/code><\/pre>\n\n[sbs_openstreetmap center_marker=\"1\"][sbs_marker marker_source=\"coordinates\" marker_color=\"green\" marker_latitude=\"52.4681196\" marker_longitude=\"13.3279639\" marker_icon=\"sbs-map-icon sbs-map-my-location\"][\/sbs_marker][\/sbs_openstreetmap]\n<\/code><\/pre>\n\n[sbs_openstreetmap map_style=\"CartoDB.Voyager\" map_height=\"30\" zoom=\"14\" ctrl_mouse_zoom=\"true\"][sbs_marker marker_color=\"dark_blue\" marker_address=\"Bundesallee 87, 12161 Berlin\" marker_icon=\"sbs-map-icon sbs-map-beenhere\"]Popup Text[\/sbs_marker][\/sbs_openstreetmap]\n<\/code><\/pre>\n\n[sbs_openstreetmap map_style=\"MapBox.Streets\" map_style_key=\"<your access token>\"][\/sbs_openstreetmap]\n<\/code><\/pre>\n\n[sbs_openstreetmap zoom=\"12\" latitude=\"52.493558\" longitude=\"13.375148\" center_marker=\"0\"][sbs_marker marker_address=\"Bundesallee 87, 12161 Berlin\"]Marker 1[\/sbs_marker][sbs_marker marker_address=\"Platz der Republik 1, 10557 Berlin\"]Marker 2[\/sbs_marker][\/sbs_openstreetmap]\n<\/code><\/pre>\n\nMap Styles<\/h3>\n\n
Providers<\/h4>\n\n
Deprecated<\/h4>\n\n
Licenses\/Policies<\/h3>\n\n
External Services<\/h4>\n\n
Third-Party Components<\/h4>\n\n