first commit

assets/js/maps/google/markers/animation.js

@@ -0,0 +1,83 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Animated markers
+*
+*  Specific JS code additions for maps_google_markers.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // If you're adding a number of markers, you may want to
+    // drop them on the map consecutively rather than all at once.
+    // This example shows how to use setTimeout() to space
+    // your markers' animation.
+
+
+    // Add Berlin coordinates
+    var berlin = new google.maps.LatLng(52.520816, 13.410186);
+
+    // Add neighborhoods coordinates
+    var neighborhoods = [
+        new google.maps.LatLng(52.511467, 13.447179),
+        new google.maps.LatLng(52.549061, 13.422975),
+        new google.maps.LatLng(52.497622, 13.396110),
+        new google.maps.LatLng(52.517683, 13.394393)
+    ];
+
+
+    // Variables
+    var markers = [];
+    var iterator = 0;
+    var map;
+
+
+    // Initialize
+    function initialize() {
+
+        // Options
+        var mapOptions = {
+            zoom: 12,
+            center: berlin
+        };
+
+        // Apply options
+        map = new google.maps.Map($('.map-marker-animation')[0], mapOptions);
+    }
+
+
+    // Drop markers
+    function drop() {
+        for (var i = 0; i < neighborhoods.length; i++) {
+            setTimeout(function() {
+                addMarker();
+            }, i * 200);
+        }
+    }
+
+
+    // Add markers
+    function addMarker() {
+        markers.push(new google.maps.Marker({
+            position: neighborhoods[iterator],
+            map: map,
+            draggable: false,
+            animation: google.maps.Animation.DROP
+        }));
+        iterator++;
+    }
+
+
+    // Drop markers on button click
+    $('.drop-markers').on('click', function() {
+        drop();
+    });
+
+
+    // Initialize map on window load
+    google.maps.event.addDomListener(window, 'load', initialize);
+
+});

assets/js/maps/google/markers/simple.js

@@ -0,0 +1,52 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Basic markers
+*
+*  Specific JS code additions for maps_google_markers.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+	// Setup map
+	function initialize() {
+
+		// Set coordinates
+		var myLatlng = new google.maps.LatLng(52.374,4.898);
+
+		// Options
+		var mapOptions = {
+			zoom: 10,
+			center: myLatlng
+		};
+
+		// Apply options
+		var map = new google.maps.Map($('.map-marker-simple')[0], mapOptions);
+		var contentString = 'Amsterdam';
+
+		// Add info window
+		var infowindow = new google.maps.InfoWindow({
+			content: contentString
+		});
+
+		// Add marker
+		var marker = new google.maps.Marker({
+			position: myLatlng,
+			map: map,
+			title: 'Hello World!'
+		});
+
+		// Attach click event
+		google.maps.event.addListener(marker, 'click', function() {
+			infowindow.open(map,marker);
+		});
+
+	};
+
+	// Initialize map on window load
+	google.maps.event.addDomListener(window, 'load', initialize);
+
+});

assets/js/maps/google/markers/symbols_custom.js

@@ -0,0 +1,102 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Custom marker symbols
+*
+*  Specific JS code additions for maps_google_markers.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // The following example creates complex markers to indicate beaches near
+    // Sydney, NSW, Australia. Note that the anchor is set to
+    // (0,32) to correspond to the base of the flagpole.
+
+
+    // Map settings
+    function initialize() {
+
+        // Optinos
+        var mapOptions = {
+            zoom: 11,
+            center: new google.maps.LatLng(-33.9, 151.2)
+        }
+
+        // Apply options
+        var map = new google.maps.Map($('.map-symbol-custom')[0], mapOptions);
+
+        // Set markers
+        setMarkers(map, beaches);
+    }
+
+
+    /**
+    * Data for the markers consisting of a name, a LatLng and a zIndex for
+    * the order in which these markers should display on top of each
+    * other.
+    */
+    var beaches = [
+        ['Bondi Beach', -33.890542, 151.274856, 4],
+        ['Coogee Beach', -33.923036, 151.259052, 5],
+        ['Cronulla Beach', -34.028249, 151.157507, 3],
+        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
+        ['Maroubra Beach', -33.950198, 151.259302, 1]
+    ];
+
+
+    // Set markers
+    function setMarkers(map, locations) {
+
+        // Add markers to the map
+
+        // Marker sizes are expressed as a Size of X,Y
+        // where the origin of the image (0,0) is located
+        // in the top left of the image.
+
+        // Origins, anchor positions and coordinates of the marker
+        // increase in the X direction to the right and in
+        // the Y direction down.
+        var image = {
+            url: 'assets/images/ui/map_marker.png',
+
+            // This marker is 20 pixels wide by 32 pixels tall.
+            size: new google.maps.Size(20, 32),
+
+            // The origin for this image is 0,0.
+            origin: new google.maps.Point(0,0),
+
+            // The anchor for this image is the base of the flagpole at 0,32.
+            anchor: new google.maps.Point(0, 32)
+        };
+
+
+        // Shapes define the clickable region of the icon.
+        // The type defines an HTML <area> element 'poly' which
+        // traces out a polygon as a series of X,Y points. The final
+        // coordinate closes the poly by connecting to the first
+        // coordinate.
+        var shape = {
+            coords: [1, 1, 1, 20, 18, 20, 18 , 1],
+            type: 'poly'
+        };
+        for (var i = 0; i < locations.length; i++) {
+            var beach = locations[i];
+            var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
+            var marker = new google.maps.Marker({
+                position: myLatLng,
+                map: map,
+                icon: image,
+                shape: shape,
+                title: beach[0],
+                zIndex: beach[3]
+            });
+        }
+    }
+
+    // Load maps
+    google.maps.event.addDomListener(window, 'load', initialize);
+
+});

assets/js/maps/google/markers/symbols_predefined.js

@@ -0,0 +1,45 @@
+/* ------------------------------------------------------------------------------
+*
+*  # Predefined marker symbols
+*
+*  Specific JS code additions for maps_google_markers.html page
+*
+*  Version: 1.0
+*  Latest update: Aug 1, 2015
+*
+* ---------------------------------------------------------------------------- */
+
+$(function() {
+
+    // This example uses a symbol to add a vector-based icon to a marker.
+    // The symbol uses one of the predefined vector paths ('CIRCLE') supplied by the
+    // Google Maps JavaScript API.
+
+    // Setup map
+    function initialize() {
+
+        // Options
+        var mapOptions = {
+            zoom: 12,
+            center: new google.maps.LatLng(48.220, 16.380)
+        };
+
+        // Apply options
+        var map = new google.maps.Map($('.map-symbol-predefined')[0], mapOptions);
+
+        // Setup markers
+        var marker = new google.maps.Marker({
+            position: map.getCenter(),
+            icon: {
+                path: google.maps.SymbolPath.CIRCLE,
+                scale: 10
+            },
+            draggable: true,
+            map: map
+        });
+    }
+
+    // Load map
+    google.maps.event.addDomListener(window, 'load', initialize);
+
+});