Initializing a Google Map

Overview

Google Maps can be initialize right from a template or manually with JavaScript. If you use the template tags to initialize the map and add markers just know that it's really just generating the JavaScript for you. If you need to interact with the map in a custom way, you can do so by accessing the global variable (the name of you map).

See the full API reference for all the available map options.

Example

{% set options = {
	id: 'map', 
	width: '400px', 
	height: '300px',
	center: 'The Florida Keys',
	options: {
		disableDoubleClickZoom: true,
		maxZoom: 10,
		zoomControlOptions: {
			position: 'google.maps.ControlPosition.LEFT_CENTER',
			style: 'google.maps.ZoomControlStyle.LARGE'
		}
	}
} %}

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