Draw Maps

draw_maps.js

module(maps, function() {

	function AreaMap(selector, lat, lng, radius) {
		var WINKEE_SQUARE = new google.maps.LatLng(-22.865964, -47.054778);

		var center = WINKEE_SQUARE;
		if (lat) {
			center = new google.maps.LatLng(lat, lng);
		}

		var map = new google.maps.Map($(selector)[0], {
			zoom : 4,
			center : center
		});

		if (lat) {
			map.fitBounds(createCircleBounds(center, radius));
		}

		var drawingManager = new google.maps.drawing.DrawingManager({
			drawingControlOptions : {
				position : google.maps.ControlPosition.TOP_CENTER,
				drawingModes : [ google.maps.drawing.OverlayType.CIRCLE ]
			},
			circleOptions : {
				strokeWeight : 0,
				fillOpacity : 0.45,
				fillColor : '#55f',
				editable : true
			},
			map : map
		});

		var shape = null;

		var changeListener = null;

		initEvents();

		function createCircleBounds(center, radius) {
			var circle = new google.maps.Circle();
			circle.setCenter(center);
			circle.setRadius(radius);
			return circle.getBounds();

		}

		function loadArea(area) {
			if (!(area.lat && area.lng && area.radius)) {
				return;
			}

			shape = new google.maps.Circle({
				center : new google.maps.LatLng(area.lat, area.lng),
				radius : area.radius,
				strokeWeight : 0,
				fillOpacity : 0.45,
				fillColor : '#55f',
				editable : true,
				map : map
			});

			google.maps.event.addListener(shape, 'center_changed', function() {
				fireChange();
			});

			google.maps.event.addListener(shape, 'radius_changed', function() {
				fireChange();
			});
		}

		function setChangeListener(callback) {
			changeListener = callback;
		}

		function autocomplete(el) {
			var autocomplete = new google.maps.places.Autocomplete(el);
			autocomplete.bindTo('bounds', map);
			google.maps.event.addListener(autocomplete, 'place_changed', function() {
				var place = this.getPlace();
				if (place.geometry.viewport) {
					map.fitBounds(place.geometry.viewport);
				} else {
					map.setCenter(place.geometry.location);
					map.setZoom(17);
				}
			});
		}

		function initEvents() {
			// TODO: remove this
			google.maps.event.addListener(map, 'click', function(event) {
				console.log(event.latLng.toLocaleString());
			});

			google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
				if (shape) {
					shape.setMap(null);
				}
				shape = e.overlay;
				drawingManager.setDrawingMode(null);

				fireChange();

				google.maps.event.addListener(shape, 'center_changed', function() {
					fireChange();
				});

				google.maps.event.addListener(shape, 'radius_changed', function() {
					fireChange();
				});
			});
		}

		function fireChange() {
			if (changeListener) {
				changeListener(shape.getCenter().lat(), shape.getCenter().lng(), shape.getRadius());
			}
		}

		return {
			loadArea : loadArea,
			setChangeListener : setChangeListener,
			autocomplete : autocomplete
		}
	}

	return {
		AreaMap : AreaMap
	}
});