$49

Smart Map

Documentation  •  Changelog

Documentation

Customizing the map in Twig

For "styles", use JS

Need to apply "styles" to your map? Use JavaScript instead...

Due to the inherent complexity of map styles, that value should be applied directly in JS.

You can customize your map before rendering it by simply passing in an "options" parameter. The options value must be an object, a set of key/value pairs:

{% set options = {
    height: 300,
    zoom: 4,
    draggable: false,
    markerInfo: '_includes/mapInfoBubble',
    markerOptions: {
        icon: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png'
    },
    infoWindowOptions: {
        maxWidth: 200
    }
} %}

{{ craft.smartMap.map(locations, options) }}

Here's the magical part... You can pass in corresponding options defined in the Google Maps API:

Map Options

Standard options from google.maps.MapOptions can be set in the root of your "options" object, alongside any custom options like "id", "width" and "height"...

{% set options = {
    height: 300,
    mapTypeId: 'google.maps.MapTypeId.HYBRID'
} %}
OptionsTypeDefaultDescription
idstring"smartmap-mapcanvas-1"Set id attribute of container
widthintnullWidth of map (in px)
heightintnullHeight of map (in px)
zoomint(uses fitBounds) Zoom level (1 - 16)
center
array
(uses fitBounds) Map center, ie: {'lat':38.897837, 'lng':-77.036512}
scrollwheelboolfalseWhether scroll wheel will zoom map
markerInfostringnullTemplate path (read more)
markerOptionsobjectnullAccepts any google.maps.MarkerOptions properties
infoWindowOptionsobjectnullAccepts any google.maps.InfoWindowOptions properties
maptypestring"roadmap"Type of map ("roadmap", "satellite", "hybrid", "terrain")
(Applies to static maps only)
scalestring21 = Non-retina
2 = Retina
(Applies to static maps only)

Marker Options & Info Window Options

Custom marker options and info window options can be set using the markerOptions and infoWindowOptions parameters:

{% set options = {
    markerOptions: {
        icon: {
            url: 'https://maps.google.com/mapfiles/ms/icons/green-dot.png',
            scaledSize: 'new google.maps.Size(32,32)'
        }
    },
    infoWindowOptions: {
        maxWidth: 200
    }
} %}

These settings will affect all markers and info windows on the map. You can also customize after the map has been rendered...