Maps

Ensemble comes complete with a Google maps plugin helping you to easily provide your location to site visitors. Google maps are added via a very short piece of markup, Javascript takes care of everything else.

The code opposite is all that is required to add your map to a page.

<div class="google-map"></div>

Location

Customisation and location are set in the javascript file scripts.js under the section Maps. To set your latitude and longitude, enter them next to lat: and lng: in the maps javascript.

if ($('.google-map').length) {
	var map;
	map = new GMaps({
		div: '.google-map',
		lat: 51.523004,
		lng: -0.127010,
		scrollwheel: false,
		height: 400
	});

Map markers

To set a map marker use the same latitude and longitude as your location, in this section you can also specify a map marker, by using an image, a default image is provided for you.

map.addMarker({
	lat: 51.523004,
	lng: -0.127010,
	icon: "img/general/map-marker.png",
	title: 'Vidal Themes',
	infoWindow: {
		content: 'We are located here'
	}
});

Style options

Your maps can also be styled from the javascript file, please see the detailed guide from Google for more information on style customisations

var styles = [{
	stylers: [{
		hue: "#1a2a8f"
	}, {
		saturation: 10
	}, {
		lightness: '50'
	}, {
		invert_lightness: false
	}, {
		gamma: '1.5'
	}]
}, {
	featureType: "road",
	elementType: "geometry",
	stylers: [{
		lightness: 100
	}, {
		visibility: "simplified"
	}]
}, {
	featureType: "road",
	elementType: "labels",
	stylers: [{
		visibility: "on"
	}]
}];
map.setOptions({
	styles: styles
});