Jump to Content

Objective HTML

Google Maps for ExpressionEngine

The complete geolocation and mapping toolkit

exp:gmap:init

The exp:gmap:init tag is the main tag and has one purpose – properly intitializing Google Maps. Each time this tag is called, a new map will be created – provided the map has a unique id. Unless you want a map for every entry in your channel, this method should be only called once.

Note, there is one required parameter – id. The id parameter must be a valid JavaScript variable.

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

Parameters

In addition to the tags above, you can use any of Google's map options to further customize your map. https://developers.google.com/maps/documentation/javascript/reference#MapOptions

id= required

{exp:gmap:init id="map"}

This parameter is required and serves multiple purposes. The most important role it serves is the prefix of all the JavaScript associated with that particular map. If you use multiple maps on a page, the id parameter must be unique. The id parameter is also used for the id attribute on map’s the DOM object. It must also be a valid JavaScript variable name. Dashes are not permitted.

Back to Top

center=

{exp:gmap:init id="map" center="San Jose, CA"}

The center 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.

Back to Top

class=

{exp:gmap:init id="map" class="google-map"}

This parameter simply append a class attribute to the DOM object so you can easily style it with CSS and avoid using the style parameter.

Back to Top

clusterMaxZoom=

{exp:gmap:init id="map" clusterMaxZoom="14"}

This parameter allows you to override the default max zoom the user will see marker clusters. Possible values should be an integer 1-20.

Back to Top

clusterGridSize=

{exp:gmap:init id="map" clusterGridSize="40"}

This parameter allows you to override the default grid size. The larger the number, the more markers will be grouped into a single cluster. Smaller numbers will result in more clusters on the map. Try values 10-100 for varying results.

Back to Top

clusterStyles=

{exp:gmap:init id="map" clusterStyles="{url: '/some/image/path',height: 35, width: 35, anchor: [16, 0], textColor: '#ff00ff', textSize: 10}, {url: /some/image/path2', height: 45, width: 45, anchor: [24, 0], textColor: '#ff0000', textSize: 11}, {url: '/some/image/path3', height: 55, width: 55, anchor: [32, 0], textColor: '#ffffff', textSize: 12}"}

This parameter is a bit tedious just because it can get so long, but it is a standard JSON object with specific properties used to style each cluster.

url
This is the url to the image to represent the cluster size. string
height
This is the height of image. integer
width
This is the width of image. integer
textColor
This is the text color of the cluster. This should be a valid hexcode. string
textSize
This is the text size of cluster. integer
Back to Top

language=

{exp:gmap:init id="map" language="en"}

This parameter allows you to change the default language of the map.

Back to Top

latitude=

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

This parameter is available so you can pass a coordinate to center the map. This option is preferable to the center parameter because it does not use the Geocoder. The Geocoder has a limit and should be used sparingly with higher traffic sites.

If this parameter is used, the longitude parameter must also be set.

Back to Top

longitude=

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

This parameter is available so you can pass a coordinate to center the map. This option is preferable to the center parameter because it does not use the Geocoder. The Geocoder has a limit and should be used sparingly with higher traffic sites.

If this parameter is used, the latitude parameter must also be set.

Back to Top

marker_spider=

{exp:gmap:init id="map" marker_spider="true"}

This parameter allows you to "spiderfy" your markers using the Marker Spiderfier library.

Back to Top

key=

{exp:gmap:init id="map" key="YOUR-API-KEY"}

This parameter allows you to define an API key which boasts your limit from 2,500 maps loads per day, to 25,000. For more information, visit https://developers.google.com/maps/documentation/javascript/tutorial#api_key.

Back to Top

map_type=

This parameter is identical to Google’s mapTypeId property. You simply pass the Google Map Type you desire into the map_type parameter.

{exp:gmap:init id="map" map_type="google.maps.MapTypeId.ROADMAP"}

MapTypeId.ROADMAP is the default. If you wish to use the ROADMAP map type, the map_type parameter does not need to be set.

{exp:gmap:init id="map" map_type="google.maps.MapTypeId.SATELLITE"}

Initializes a satellite map

{exp:gmap:init id="map" map_type="google.maps.MapTypeId.HYBRID"}

Initializes a hybrid map

{exp:gmap:init id="map" map_type="google.maps.MapTypeId.TERRAIN"}

Initilizes a terrain map

Back to Top

script_tag=

{exp:gmap:init id="map" script_tag="false" style="width:400px;height:300px;border:2px solid red"}

This parameter prevents the dependent libraries from being added to the document. If you include the libraries yourself, or have more than one map on the page, use this parameter to prevent errors.

Back to Top

sensor=

{exp:gmap:init id="map" sensor="true"}

This parameter allows you to change the GPS sensor. If the user has a GPS enabled device and the sensor is set to true, then their current location will appear on the map. By default the sensor is set to true.

Back to Top

style=

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

This parameter adds a style attribute to the map’s DOM object. This parameter is completely optional and really available for testing a quickly setting up a map. It’s highly recommended you use a class or id and style your map within your stylesheet, apposed to doing inline.

Back to Top

styles=

{exp:gmap:init id="map" styles="/some/file/path.js" style="width:400px;height:300px;border:2px solid red"}

This parameter adds a script tag to the document linking an external containing a JSON object with map styles to the actual map on the page. By default, the add-on looks for a stylez variable.

Back to Top

style_var=

{exp:gmap:init id="map" styles="/some/file/path.js" style_var="some_var_name" style="width:400px;height:300px;border:2px solid red"}

With this parameter you can override the default variable of stylez for whatever you want. Stylez is the default value because that is the default value of the Styling Wizard, which is the recommended utility for styling your maps.

Back to Top