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. Current Location
3. Data
4. Geocode
5. Map
6. Map Data Model
7. Marker
8. Polygon
9. Polyline
10. Route
11. Static Map
12. 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)

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

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

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.

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)