- (Feature) Added new template tag to plot circles without the field type

Author: objectivehtml

resources/js/app.compiled.js

@@ -13916,6 +13916,13 @@ var GoogleMaps = {
 				}
 			});
 
+			_.each(this.circles, function(circle) {
+				if(!circle.get('deleted')) {
+					bounds.union(circle.getBounds());
+					boundsChanged = true;
+				}
+			});
+
 			_.each(this.routes, function(route) {
 				_.each(route.getLocations(), function(location) {
 					bounds.extend(new google.maps.LatLng(location.lat, location.lng));

resources/js/app.js

@@ -3091,6 +3091,13 @@ var GoogleMaps = {
 				}
 			});
 
+			_.each(this.circles, function(circle) {
+				if(!circle.get('deleted')) {
+					bounds.union(circle.getBounds());
+					boundsChanged = true;
+				}
+			});
+
 			_.each(this.routes, function(route) {
 				_.each(route.getLocations(), function(location) {
 					bounds.extend(new google.maps.LatLng(location.lat, location.lng));

resources/js/app.min.js

@@ -518,6 +518,13 @@
 				}
 			});
 
+			_.each(this.circles, function(circle) {
+				if(!circle.get('deleted')) {
+					bounds.union(circle.getBounds());
+					boundsChanged = true;
+				}
+			});
+
 			_.each(this.routes, function(route) {
 				_.each(route.getLocations(), function(location) {
 					bounds.extend(new google.maps.LatLng(location.lat, location.lng));

resources/js/app/views/Map.js

@@ -780,6 +780,7 @@ var GoogleMaps = {
 				}));
 			}
 		},
+
 		getDraggable: function() {
 			return this.api.getDraggable();
 		},
@@ -1357,6 +1358,7 @@ var GoogleMaps = {
 						content: circle.content,
 						fitBounds: t.fitBounds,
 						infoWindowOptions: options.infoWindowOptions ? options.infoWindowOptions : {},
+						metric: circle.metric,
 						options: {
 							center: new google.maps.LatLng(circle.lat, circle.lng),
 							radius: circle.radius,
@@ -1506,22 +1508,35 @@ var GoogleMaps = {
 
 		options: {},
 
+		infoWindowOptions: {},
+
 		map: false,
 
+		metric: 'miles',
+
 		constructor: function(map, options) {
 			this.map = map;
 
 			this.options = {};
 
+			this.infoWindowOptions = {};
+
 			this.base(options);
 
 			this.options.map = this.map.api;
+			this.options.radius = this.convertRadiusToMeters(this.options.radius, this.metric);
+
+			if(this.lat && this.lng) {
+				this.options.center = new google.maps.LatLng(this.lat, this.lng);
+			}
 
 			this.api = new google.maps.Circle(this.options);
 
 			this.bindEvents();
 
 			this.map.addCircle(this, this.fitBounds);
+
+			this.createInfoWindow();
 		},
 
 		bindEvents: function() {
@@ -1580,6 +1595,46 @@ var GoogleMaps = {
 			});
 		},
 
+		createInfoWindow: function(polygon) {
+			if(this.content) {
+				this.infoWindow = new google.maps.InfoWindow(_.extend({}, this.infoWindowOptions, {
+					content: this.content
+				}));
+			}
+		},
+		
+		convertRadiusToMeters: function(radius, metric) {
+			radius = parseFloat(radius);
+
+			if(metric == 'miles') {
+				radius *= 1609.34;
+			}
+			else if(metric == 'feet') {
+				radius *= 0.3048;
+			}
+			else if(metric == 'kilometers') {
+				radius *= 1000;
+			}
+
+			return radius;
+		},
+
+		convertRadiusFromMeters: function(radius, metric) {
+			radius = parseFloat(radius);
+
+			if(metric == 'miles') {
+				radius *= 0.000621371;
+			}
+			else if(metric == 'feet') {
+				radius *= 3.28084;
+			}
+			else if(metric == 'kilometers') {
+				radius *= 0.001;
+			}
+
+			return radius;
+		},
+
 		getBounds: function() {
 			return this.api.getBounds();
 		},
@@ -1650,7 +1705,10 @@ var GoogleMaps = {
 
 		onCenterChanged: function() {},
 
-		onClick: function(e) {},
+		onClick: function(e) {
+			this.infoWindow.open(this.map.api);
+			this.infoWindow.setPosition(e.latLng);
+		},
 
 		onDblclick: function() {},
 

resources/js/plugin.js

@@ -131,6 +131,11 @@ public function marker($id, $options = array())
         craft()->templates->includeJs('new GoogleMaps.Marker('.$id.','.json_encode((object) $options).');');
     }
 
+    public function circle($id, $options = array())
+    {
+        craft()->templates->includeJs('new GoogleMaps.Circle('.$id.','.json_encode((object) $options).');');
+    }
+
     private function _populateField($result)
     {
         if ($result['settings'])

services/GoogleMaps_TemplatesService.php

@@ -58,6 +58,11 @@ public function polyline($id, $points, $options = array())
         return craft()->googleMaps_templates->polyline($id, $points, $options);
     }
 
+    public function circle($id, $options = array())
+    {
+        return craft()->googleMaps_templates->circle($id, $options);
+    }
+
     public function currentLocation($id, $options = array())
     {
         return craft()->googleMaps_templates->currentLocation($id, $options);