Jump to Content

Objective HTML

Google Maps for ExpressionEngine

The complete geolocation and mapping toolkit

exp:gmap:marker

The exp:gmap:marker tag is a standalone method for adding markers to your map. This method is great to use inside of looping tags such as channel:entries or Matrix variable pairs.

Developer Note: This method will geocode all every location before the marker is added to the map. To avoid Google's API limit, use the geocode parameter whenever possible.

Basic Example without info windows


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:channel:entries channel="map"}

    {exp:gmap:marker id="map" latitude="{map_lat}" longitude="{map_lng}"}

{/exp:channel:entries}

Basic Example with info windows


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:channel:entries channel="map"}

    {exp:gmap:marker id="map" latitude="{map_lat}" longitude="{map_lng}"}

        

{entry_date format="%Y-%m-%d"} – {title}

{if map_content}
{map_content}
{/if} {map_lat}, {map_lng} {/exp:gmap:marker} {/exp:channel:entries}

Developer Note: the variables are actually parsed by the exp:channel:entries tag, but are used by the exp:gmap:marker method. The parsing is actually done after the JS has been written to the page.

Standard Parameters

Infobox Parameters

Standard Parameters

id= required


{exp:gmap:marker id="map" latitude="0" longitude="0"}

This parameter is required so the marker can be added to the correct map. The id on the exp:gmap:init method must match those of the exp:gmap:marker method.

Back to Top

address=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park"}

This parameter can be used to pass an address or partial address to the geocoder which will return a geocoded response.

Developer Note: By default the first location in the response results will be used if multiple locations are returned. You can use the limit parameter to plot multiple responses. The offset parameter is available for you to offset the record set.

Back to Top

center=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park" center="Colorado" zoom="12"}

This parameter can be any string representing a valid (or partially valid) address. The first result from the Geocoder is used if multiple locations are returned. Typically, when the center parameter is used in conjunction with the exp:gmap:marker method, a zoom parameter also needs to be set since by default the zoom is calculated from the bounds of the current markers on the map.

Developer Note: You could just as easily set the center parameter on the exp:gmap:init method, but in rare cases people need to recenter the map after it has been initialized.

Back to Top

clustering=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" latitude="X" longitude="Y" clustering="true"}

The clustering parameter allows you to cluster the markers together on the map. This option helps with maps with large datasets.

Back to Top

duplicate_markers=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" latitude="X" longitude="Y" duplicate_markers="false"}

By setting the duplicate markers parameter to false, you can prevent markers from being added to the map if one already exists with the same coordinate (preventing duplicate markers).

Back to Top

extend_bounds=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park"}
{exp:gmap:marker id="map" address="Rocky Mountain National Park" extend_bounds="false"}

This parameter is available so you can override the default center and zoom. The default setting captures all the markers within the view window (the bounds) of the map.

Back to Top

geocode=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" latitude="0" longitude="0" geocode="false"}

This parameter allows you prevent information passing to geocoder for limitation reasons.

Back to Top

icon=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" latitude="0" longitude="0" icon="/some/url/to/marker.png"}

This parameter allows you to define a custom marker.

Back to Top

latitude=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park"}
{exp:gmap:marker id="map" latitude="90.02937193" longitude="-40.2048204829"}

This parameter is available so you can pass a latitude coordinate to add the marker the map. If you this parameter, you should also include a longitude.

Back to Top

limit=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Main St" limit="20"}

This parameter is available so you can limit the total number of locations that are plotted in the event the geocoder returns more than one possible location. You can choose to plot the first one, or plot all possible locations. Be sure to refer to the offset parameter for full control over pagination.

Back to Top

longitude=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" latitude="90.02937193" longitude="-40.2048204829"}

This parameter is available so you can pass a longitude coordinate to add the marker the map. If you this parameter, you should also include a latitude.

Back to Top

offset=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Main St" limit="1" offset="2"}

Developer Note: By default the first location in the response results will be used if multiple locations are returned. You can use the limit parameter to plot multiple responses. The offset parameter is available for you to offset the record set.

Back to Top

open_windows=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Main St" open_windows="true"}

This parameter is used to open all the windows when the map is loaded. This is most useful when a single window on a map needs to be displayed without a user clicking the marker.

Back to Top

show_one_window=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Main St" show_one_window="true"}

This parameter is used to only display one window at a time. If this param is set to true, then each time a user clicks a marker the other windows will close.

Back to Top

title=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" title="Yellowstone National Park" address="Yellowstone National Park"}

This parameter allows you to set a marker title. The title should be void of any HTML or JavaScript. This is used by the exp:gmap:dropdown method to set the option values in the dropdown and other programmatic interactions. Users can also define titles in the Fieldtype. This parameter will override any value set by the user.

Back to Top

window_trigger=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park" window_trigger="mouseover"}

This parameter allows you to override the default trigger that opens infowindows.

Back to Top

zoom=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park" zoom="8"}

This parameter allows you to set a static zoom.

Back to Top

Infobox Parameters

Infobox.js is supported if you want to create custom info windows. Simply set the infobox parameter to true. When the infobox parameter is set to true, then the following parameters become available. Most parameters are the officially support parameters, however some have been modified to better fit with the boundaries of ExpressionEngine templates.

Standard Parameters

class=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park" zoom="8" infobox="true" class="ui-infobox-dark"}
	
	

{title}

{/exp:gmap:marker}

This parameter allows to set a class (or classes) on the infobox DOM object.

Back to Top

style=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park" zoom="8" infobox="true" class="ui-infobox-dark" style="width:'300px', border: '3px solid red'"}
	
	

{title}

{/exp:gmap:marker}

This parameter allows to set a style (or styles) on the infobox DOM object. This parameter is a bit unique in that it accepts a JSON object (like jQuery) to set the styles. To make this easy the brackets are omitted and a string literal should be used. Use the format in the example if you don't want to see errors.

Back to Top

alignBottom=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park" zoom="8" infobox="true" class="ui-infobox-dark" alignBottom="true"}
	
	

{title}

{/exp:gmap:marker}

This parameter aligns the bottom left corner of the InfoBox to the position location (default is false which means that the top left corner of the InfoBox is aligned).

Back to Top

clearanceX=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park" zoom="8" infobox="true" class="ui-infobox-dark" clearanceX="10"}
	
	

{title}

{/exp:gmap:marker}

This parameter allows you to change the minimum offset (in pixels) from the InfoBox to the map edge after an auto-pan. This parameter offset the X axis.

Back to Top

clearanceY=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park" zoom="8" infobox="true" class="ui-infobox-dark" clearanceY="10"}
	
	

{title}

{/exp:gmap:marker}

This parameter allows you to change the minimum offset (in pixels) from the InfoBox to the map edge after an auto-pan. This parameter offset the Y axis.

Back to Top

closeBoxMargin=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park" zoom="8" infobox="true" class="ui-infobox-dark" closeBoxMargin="2px 2px 2px 10px"}
	
	

{title}

{/exp:gmap:marker}

This parameter adds a margin style to the the close button.

Back to Top

closeBoxURL=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park" zoom="8" infobox="true" class="ui-infobox-dark" closeBoxURL="/some/url/image.png"}
	
	

{title}

{/exp:gmap:marker}

This parameter allows you to change the close image to something other than the default.

Back to Top

disableAutoPan=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park" zoom="8" infobox="true" class="ui-infobox-dark" closeBoxURL="/some/url/image.png"}
	
	

{title}

{/exp:gmap:marker}

This parameter allows you prevent the map from auto panning to the marker location when clicked.

Back to Top

enableEventPropagation=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park" zoom="8" infobox="true" class="ui-infobox-dark" closeBoxURL="/some/url/image.png"}
	
	

{title}

{/exp:gmap:marker}

This parameters disable all JavaScript events and makes the marker act more as a label.

Back to Top

isHidden=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park" zoom="8" infobox="true" class="ui-infobox-dark" isHidden="false"}
	
	

{title}

{/exp:gmap:marker}

This parameters hides the infowindow is set.

Back to Top

maxWidth=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park" zoom="8" infobox="true" class="ui-infobox-dark" maxWidth="500"}
	
	

{title}

{/exp:gmap:marker}

This parameters set the maximum width (in pixels) of the InfoBox. The maximum is set to 0 if there is no maximum set.

Back to Top

pane=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park" zoom="8" infobox="true" class="ui-infobox-dark" pane="mapPanel"}
	
	

{title}

{/exp:gmap:marker}

The pane where the InfoBox is to appear (default is "floatPane"). Set the pane to "mapPane" if the InfoBox is being used as a map label.

Back to Top

offsetX=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park" zoom="8" infobox="true" class="ui-infobox-dark" offsetX="10" offsetY="10"}
	
	

{title}

{/exp:gmap:marker}

This parameters offsets the X axis (in pixels).

Back to Top

offsetY=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park" zoom="8" infobox="true" class="ui-infobox-dark" offsetX="10" offsetY="10"}
	
	

{title}

{/exp:gmap:marker}

This parameters offsets the Y axis (in pixels).

Back to Top

zIndex=


{exp:gmap:init id="map" style="width:400px;height:300px"}

{exp:gmap:marker id="map" address="Yellowstone National Park" zoom="8" infobox="true" class="ui-infobox-dark" zIndex="5"}
	
	

{title}

{/exp:gmap:marker}

This parameter sets zIndex for the infowindow.

Back to Top