Adding Circles

Overview

Manually adding circles to the map without using the field type or JavaScript is real easy. Simply call the craft.googleMaps.circle method with your map's id, and some options to define the circle's position, radius, and appearance. The Google Maps API defines circles in meters, but using the metric Google Maps for Craft will do the conversion for you. The available metric values are feet, miles, meters, kilometers.

Example

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

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

{{ craft.googleMaps.circle('map', {
	title: 'Some Circle',
	content: 'This is some window content',
	metric: 'miles',
	lat: 40,
	lng: -86,
	options: {
		radius: 100,
		strokeColor: 'red',
		strokeWeight: 0.6,
		strokeOpacity: 0.6,
		fillColor: 'red',
		fillOpacity: 0.3
	}
}) }}