first commit

assets/js/maps/google/drawings/circles.js

@@ -0,0 +1,84 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Circles
+*
+*  Specific JS code additions for maps_google_drawings.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // This example creates circles on the map, representing
+    // populations in North America.
+
+    // First, create an object containing LatLng and population for each city.
+    var citymap = {};
+    citymap['wroclaw'] = {
+        center: new google.maps.LatLng(51.112, 17.052),
+        population: 271485
+    };
+    citymap['budapest'] = {
+        center: new google.maps.LatLng(47.481, 19.130),
+        population: 840583
+    };
+    citymap['kernstadt'] = {
+        center: new google.maps.LatLng(51.720, 8.764),
+        population: 385779
+    };
+    citymap['nancy'] = {
+        center: new google.maps.LatLng(48.688, 6.173),
+        population: 603502
+    };
+    citymap['munich'] = {
+        center: new google.maps.LatLng(48.154, 11.541),
+        population: 594039
+    };
+    citymap['warsaw'] = {
+        center: new google.maps.LatLng(52.232, 21.061),
+        population: 492093
+    };
+
+
+    // Initialize
+    var cityCircle;
+    function initialize() {
+
+        // Options
+        var mapOptions = {
+            zoom: 6,
+            center: new google.maps.LatLng(50.059, 14.465),
+            mapTypeId: google.maps.MapTypeId.TERRAIN
+        };
+
+        // Apply options
+        var map = new google.maps.Map($('.map-drawing-circles')[0], mapOptions);
+
+
+        // Construct the circle for each value in citymap.
+        // Note: We scale the area of the circle based on the population.
+        for (var city in citymap) {
+
+            // Options
+            var populationOptions = {
+                strokeColor: '#b41b1b',
+                strokeOpacity: 0.5,
+                strokeWeight: 1,
+                fillColor: '#b41b1b',
+                fillOpacity: 0.2,
+                map: map,
+                center: citymap[city].center,
+                radius: Math.sqrt(citymap[city].population) * 100
+            };
+
+            // Add the circle for this city to the map.
+            cityCircle = new google.maps.Circle(populationOptions);
+        }
+    }
+
+    // Load map
+    google.maps.event.addDomListener(window, 'load', initialize);
+
+});

assets/js/maps/google/drawings/polygons.js

@@ -0,0 +1,60 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Polygons
+*
+*  Specific JS code additions for maps_google_drawings.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // This example creates a simple polygon representing the Bermuda Triangle.
+    // Note that the code specifies only three LatLng coordinates for the
+    // polygon. The API automatically draws a
+    // stroke connecting the last LatLng back to the first LatLng.
+
+    function initialize() {
+
+        // Options
+        var mapOptions = {
+            zoom: 5,
+            center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
+            mapTypeId: google.maps.MapTypeId.TERRAIN
+        };
+
+        // Apply options
+        var map = new google.maps.Map($('.map-drawing-polygon')[0], mapOptions);
+
+
+        // Define the LatLng coordinates for the polygon's path. Note that there's
+        // no need to specify the final coordinates to complete the polygon, because
+        // The Google Maps JavaScript API will automatically draw the closing side.
+        var bermudaTriangle;
+
+        // Coordinates
+        var triangleCoords = [
+            new google.maps.LatLng(25.774252, -80.190262),
+            new google.maps.LatLng(18.466465, -66.118292),
+            new google.maps.LatLng(32.321384, -64.75737)
+        ];
+
+        // Polygon
+        bermudaTriangle = new google.maps.Polygon({
+            paths: triangleCoords,
+            strokeColor: '#FF0000',
+            strokeOpacity: 0.8,
+            strokeWeight: 1,
+            fillColor: '#FF0000',
+            fillOpacity: 0.2
+        });
+
+        bermudaTriangle.setMap(map);
+    }
+
+    // Load map
+    google.maps.event.addDomListener(window, 'load', initialize);
+
+});

assets/js/maps/google/drawings/polylines.js

@@ -0,0 +1,74 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Polylines
+*
+*  Specific JS code additions for maps_google_drawings.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // This example creates an interactive map which constructs a
+    // polyline based on user clicks. Note that the polyline only appears
+    // once its path property contains two LatLng coordinates.
+
+    var poly;
+    var map;
+
+    // Initialize
+    function initialize() {
+
+        // Options
+        var mapOptions = {
+            zoom: 8,
+            center: new google.maps.LatLng(41.651, -0.894) // Center the map on Chicago, USA.
+        };
+
+        // Apply options
+        map = new google.maps.Map($('.map-drawing-polyline')[0], mapOptions);
+
+
+        // Polyline options
+        var polyOptions = {
+            strokeColor: '#555',
+            strokeOpacity: 1.0,
+            strokeWeight: 2
+        };
+
+        // Apply options
+        poly = new google.maps.Polyline(polyOptions);
+        poly.setMap(map);
+
+        // Add a listener for the click event
+        google.maps.event.addListener(map, 'click', addLatLng);
+    }
+
+
+    //
+    // Handles click events on a map, and adds a new point to the Polyline.
+    // @param {google.maps.MouseEvent} event
+
+    function addLatLng(event) {
+
+        var path = poly.getPath();
+
+        // Because path is an MVCArray, we can simply append a new coordinate
+        // and it will automatically appear.
+        path.push(event.latLng);
+
+        // Add a new marker at the new plotted point on the polyline.
+        var marker = new google.maps.Marker({
+            position: event.latLng,
+            title: '#' + path.getLength(),
+            map: map
+        });
+    }
+
+
+    // Load map
+    google.maps.event.addDomListener(window, 'load', initialize);
+
+});

assets/js/maps/google/drawings/rectangles.js

@@ -0,0 +1,45 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Rectangles
+*
+*  Specific JS code additions for maps_google_drawings.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // Initialize
+    function initialize() {
+
+        // Options
+        var mapOptions = {
+            zoom: 11,
+            center: new google.maps.LatLng(33.678176, -116.242568),
+            mapTypeId: google.maps.MapTypeId.TERRAIN
+        };
+
+        // Apply options
+        var map = new google.maps.Map($('.map-drawing-rectangle')[0], mapOptions);
+
+        // Add rectangle
+        var rectangle = new google.maps.Rectangle({
+            strokeColor: '#FF0000',
+            strokeOpacity: 0.8,
+            strokeWeight: 2,
+            fillColor: '#FF0000',
+            fillOpacity: 0.35,
+            map: map,
+            bounds: new google.maps.LatLngBounds(
+                new google.maps.LatLng(33.671068, -116.25128),
+                new google.maps.LatLng(33.685282, -116.233942)
+            )
+        });
+    }
+
+    // Load map
+    google.maps.event.addDomListener(window, 'load', initialize);
+
+});