Template Reference

Table of Contents

It's important to realize that the majority of the these tags are merely generating JavaScript and adding it to the DOM. If additional customization is required that is outside the scope of these tags, you can always interact with your maps directly using JavaScript.

1. Center
2. Circle
3. Current Location
4. Data
5. Geocode
6. Ground Overlay
7. Map
8. Map Data Model
9. Marker
10. Polygon
11. Polyline
12. Route
13. Static Map
14. Zoom

Center

craft.googleMaps.center allows you to center a map with a template tag after it has been initialized. The tag is polymorphic in that is allows you to pass a coordinate or an address string. If an address string is passed, the string is geocoded and the first returned result will be used to center the map.

craft.googleMaps.center('yourMapId', 40, -86)

craft.googleMaps.center('yourMapId', 'Miami, Florida')

Parameters

• id - Your map's id
• lat - The lat coordinate or address string
• lng - The lng coordinate (if not passing an address string)

Circle

craft.googleMaps.circle allows you to add a circle to the specified map. The radius that is defined will be converted to meters using the metric option. The default metric for circles are in feet. Full Reference of Circle Options

Parameters

• id - Your map's id
• options - The object of various options

Complete Options Object

{
	// Extend the bounds of the map to include this marker?
	fitBounds: true,

	// Additional circle options to be used provided by the 
	// Google Maps API
	options: {},

	// Additional infowindow options to be used provided by the 
	// Google Maps API
	infowindowOptions: {},

	// The circle's radius metric (default to feet)
	// Valid values "feet", "miles", "meters", "kilometers"
	metric: "feet",

	// The circles radius will be converted to meters upon instantiation
	radius: 100
}

Current Location

craft.googleMaps.currentLocation allows you to use the HTML5 Geolocation API to plot the user's current location on the map. You have full control over the icon, but the default will work fine with no options set. The markerOptions property should be Marker Options from Google Maps. The circleOptions property should be Circle Options from Google Maps.

{{ craft.googleMaps.currentLocation('map') }}

Parameters

• id - Your map's id
• options - And object to various options

Complete Options Object

{
	// Extend the bounds of the map to include this marker?
	fitBounds: true,

	// Additional marker options to be used provided by the 
	// Google Maps API
	markerOptions: {},

	// Additional circle options to be used provided by the 
	// Google Maps API
	circleOptions: {}
}

Data

craft.googleMaps.data will add your field type data to an instantiated Google Map. This tag will handle adding all the map data you have saved to the map.

craft.googleMaps.data('yourMapId', entry.yourMapField)

Parameters

• id - Your map's id
• data - A valid GoogleMaps_MapDataModel
• options - A object of various options

Complete Options Object

{
	// Extend the bounds of the map to include all the map objects?
	fitBounds: true,

	// Should map markers be clustered?
	clustering: false,

	// An object of marker options
	markerOptions: {},

	// An object of polygon options
	polygonOptions: {},

	// An object of polyline options
	polylineOptions: {},

	// An object of circle options
	circleOptions: {},

	// An object of ground overlay options
	groundOverlayOptions: {},

	// An object of marker options used on routes
	routeMarkerOptions: {},
}

Geocode

craft.googleMaps.geocode allows you to geocode data using the server-side geocoder (vs. using a client-side geocoder with JavaScript). You can use this data to loop through it and output whatever you need in your template. A Geocode Response Object will be returned.

{% set response = craft.googleMaps.geocode('Texas') %}

{% if response.status == 'OK' %}

	{% for result in response.results %}
		<p>{{ result.geometry.location.lat}} {{ result.geometry.location.lng}}</p>
	{% endfor %}

{% endif %}

Parameters

• address - An address string to geocode

Ground Overlay

craft.googleMaps.groundOverlay will add a new image that will overlay map tiles on a specified map. You will need the image URL along with the southwest and northwest coordinates.

{% set options = {
	id: 'map', 
	width: '400px', 
	height: '300px'
} %}

{{ craft.googleMaps.map(options) }}

{{ craft.googleMaps.groundOverlay('map', {
	content: 'this is some test content',
	url: '/your/image/path.jpg',
	options: {
		opacity: 0.5,
	},
	sw: {
		lat: 31.9685988,
		lng: -99.9018131
	},
	ne: {
		lat: 39.768403,
		lng: -86.158068
	}
}) }}

Parameters

• id - An valid JavaScript variable name which will be used as a global variable to store the GoogleMaps.Map object.
• options - A data object with the options to instantiate the overlay

Complete Data Object

{
	// The overlay's infowindow content
	content: false,

	// The overlay's southwest coordinate
	sw: {
		lat: 0,
		lng: 0
	},

	// The overlay's northeast coordinate
	ne: {
		lat: 0,
		lng: 0
	},

	// Extend the bounds of the map to include this marker?
	fitBounds: true,

	// Additional overlay options to be used provided by the 
	// Google Maps API
	options: {
		opacity: 1
	}
}

Map

craft.googleMaps.map will generate a JavaScript map in the DOM automatically. The map tag accepts all the native map options in addition to a few provided by the plugin.

{% set options = {
	id: 'yourMapId', 
	width: '400px', 
	height: '300px',
	someMapParamHere: 'some value',
} %}

{{ craft.googleMaps.map(options) }}

Parameters

• id - An valid JavaScript variable name which will be used as a global variable to store the GoogleMaps.Map object.
• width - The map's width. Can be pixel or percentage, but must be passed as a string.
• height - The map's height. Can be pixel or percentage, but must be passed as a string.
• clustering - A boolean property, defaults to false and tells the map to use marker clustering
• clusteringOptions - A JSON object of various options to alter the appearance of marker clusters

Marker Clustering Options

clusteringOptions: {
	maxZoom: 14,

	gridSize: 40,

	styles: [{
		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
	}]
}

Map Data Model

craft.googleMaps.mapDataModel will accept data in the form of an object and use it to instantiate a GoogleMaps_MapDataModel object. This tag is useful to generate your own models that can be used in other tags that require these models passed as parameters.

{% set mapData = craft.googleMaps.mapDataModel({
		markers: [{
			title: 'Texas',
			address: 'Texas'
		},{
			title: 'Florida',
			address: 'Florida'
		},{
			title: 'Some Random Place',
			lat: 67.510245,
			lng: -86.021041
		}]
	})
%}

Parameters

• data - The data object used to instantiate a GoogleMaps_MapDataModel object.

Marker

craft.googleMaps.marker will add a new marker to an instantiated map. In addition to the native parameters, you can pass all the supported marker options provided by the Google Maps API.

`craft.googleMaps.marker('yourMapId', {address: 'Some Address', options: {someOption: 'some value'}});

Parameters

• id - Your map's id
• data - The data object used to instantiate a GoogleMaps.Marker object.

Complete Data Object

{
	// The marker's infowindow content
	content: false,

	// The marker's latitude (if applicable)
	latitude: false,

	// The marker's longitude (if applicable)
	longitude: false,

	// The marker's address (if applicable)
	address: false,

	// close existing infowindows when the infowindow is triggered
	closeInfoWindows: true,

	// The trigger to open an infowindow (default is click)
	infoWindowTrigger: 'click',

	// Open the infowindow when the infowindow event is triggered?
	openInfoWindowOnTrigger: true,

	// Extend the bounds of the map to include this marker?
	fitBounds: true,

	// Additional marker options to be used provided by the 
	// Google Maps API
	options: {}
}

Polygon

craft.googleMaps.polygon allows you to add polygons to an instantiated map. All the polygon options are supported by the Google Maps API.

{{ craft.googleMaps.polygon('map', [[0, 0], [0, 10], [10, 10], [10, 0]], {options: {strokeColor: 'red'}}) }}

Parameters

• id - Your map's id
• coords - An array of coordinates to be used a points in the polygon
• data - The data object used to instantiate a GoogleMaps.Polygon object.

Complete Data Object

{
	// Extend the bounds of the map to include this marker?
	fitBounds: true,

	// Additional polygon options to be used provided by the 
	// Google Maps API
	options: {}
}

Polyline

craft.googleMaps.polyline allows you to add polylines to an instantiated map. All the polyline options are supported by the Google Maps API.

{{ craft.googleMaps.polyline('map', [[0, 0], [0, 10], [10, 10], [10, 0]], {options: {strokeColor: 'red'}}) }}

Parameters

• id - Your map's id
• coords - An array of coordinates to be used a points in the polygon
• data - The data object used to instantiate a GoogleMaps.Polygon object.

Complete Data Object

{
	// Extend the bounds of the map to include this marker?
	fitBounds: true,

	// Additional polygon options to be used provided by the 
	// Google Maps API
	options: {}
}

Static Map

craft.googleMaps.staticMap will generate a static map in the template. The map will be cached in the craft/storage/googlemaps/static directory, and then the cached map will be used to avoid subsequent requests to the API (thus dramatically speeding up page load times).

{{ craft.googleMaps.staticMap(entry.map, {width: 300, height: 200}) }}

Parameters

• data - This must be an instance of GoogleMaps_MapDataModel or GoogleMaps_StaticMapModel
• options - The data object used to generate the map. These values come directory from the Static Maps API

Complete Options Object

{
	// The map's center coordinate. By default, the center
	// is automatically calculated based on the markers on
	// the map
	center: false,

	// The image format that is returned (png|jped|gif)
	format: 'png',

	// The maptype that is used (roadmap|satellite|terrain|hybrid)
	maptype: 'roadmap',

	// An array of GoogleMaps_MarkerModel objects
	markers: [],

	// The map's scale (1|2)
	scale: 1,

	// The map's custom style options
	style: false,

	// The map's zoom level. Zoom is automatically calculated
	// based on the markers on the map.

	zoom: false
}

Zoom

craft.googleMaps.zoom will dynamically zoom the map to a defined value.

craft.googleMaps.zoom('yourMapId', 12)

Parameters

• id - The maps' id
• level The zoom level (1-20)