Float/FloatBackOfffice
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
dev-chiefworks
2022-05-31 16:21:53 -04:00
commit f76abffdcd
5978 changed files with 1078901 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/maps/google/basic/basic.js
+32
View File
@@ -0,0 +1,32 @@
/* ------------------------------------------------------------------------------
*
* # Basic map
*
* Specific JS code additions for maps_google_basic.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
var map;
// Map settings
function initialize() {
// Optinos
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(47.496, 19.037)
};
// Apply options
map = new google.maps.Map($('.map-basic')[0], mapOptions);
}
// Load map
google.maps.event.addDomListener(window, 'load', initialize);
});
assets/js/maps/google/basic/click_event.js
+52
View File
@@ -0,0 +1,52 @@
/* ------------------------------------------------------------------------------
*
* # Events
*
* Specific JS code additions for maps_google_basic.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
// Map settings
function initialize() {
// Options
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(53.5336847, 10.0054124)
};
// Apply options
var map = new google.maps.Map($('.map-click-event')[0], mapOptions);
// Add markers
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
// "Change" event
google.maps.event.addListener(map, 'center_changed', function() {
// 3 seconds after the center of the map has changed, pan back to the marker
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 3000);
});
// "Click" event
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(14);
map.setCenter(marker.getPosition());
});
}
// Load map
google.maps.event.addDomListener(window, 'load', initialize);
});
assets/js/maps/google/basic/coordinates.js
+115
View File
@@ -0,0 +1,115 @@
/* ------------------------------------------------------------------------------
*
* # Showing coordinates
*
* Specific JS code additions for maps_google_basic.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
// Variables
var map;
var TILE_SIZE = 256;
var chicago = new google.maps.LatLng(41.850033,-87.6500523);
// Minimum and maximum values
function bound(value, opt_min, opt_max) {
if (opt_min != null) value = Math.max(value, opt_min);
if (opt_max != null) value = Math.min(value, opt_max);
return value;
}
// Degrees to radians
function degreesToRadians(deg) {
return deg * (Math.PI / 180);
}
// Radians to degrees
function radiansToDegrees(rad) {
return rad / (Math.PI / 180);
}
// Constructor
function MercatorProjection() {
this.pixelOrigin_ = new google.maps.Point(TILE_SIZE / 2, TILE_SIZE / 2);
this.pixelsPerLonDegree_ = TILE_SIZE / 360;
this.pixelsPerLonRadian_ = TILE_SIZE / (2 * Math.PI);
}
// From latitude to longitude
MercatorProjection.prototype.fromLatLngToPoint = function(latLng, opt_point) {
var me = this;
var point = opt_point || new google.maps.Point(0, 0);
var origin = me.pixelOrigin_;
point.x = origin.x + latLng.lng() * me.pixelsPerLonDegree_;
// Truncating to 0.9999 effectively limits latitude to 89.189. This is
// about a third of a tile past the edge of the world tile.
var siny = bound(Math.sin(degreesToRadians(latLng.lat())), -0.9999, 0.9999);
point.y = origin.y + 0.5 * Math.log((1 + siny) / (1 - siny)) * -me.pixelsPerLonRadian_;
return point;
};
// From longitude to latitude
MercatorProjection.prototype.fromPointToLatLng = function(point) {
var me = this;
var origin = me.pixelOrigin_;
var lng = (point.x - origin.x) / me.pixelsPerLonDegree_;
var latRadians = (point.y - origin.y) / -me.pixelsPerLonRadian_;
var lat = radiansToDegrees(2 * Math.atan(Math.exp(latRadians)) - Math.PI / 2);
return new google.maps.LatLng(lat, lng);
};
// Create content
function createInfoWindowContent() {
var numTiles = 1 << map.getZoom();
var projection = new MercatorProjection();
var worldCoordinate = projection.fromLatLngToPoint(chicago);
var pixelCoordinate = new google.maps.Point(worldCoordinate.x * numTiles, worldCoordinate.y * numTiles);
var tileCoordinate = new google.maps.Point(
Math.floor(pixelCoordinate.x / TILE_SIZE),
Math.floor(pixelCoordinate.y / TILE_SIZE));
return [
'Chicago, IL',
'LatLng: ' + chicago.lat() + ' , ' + chicago.lng(),
'World Coordinate: ' + worldCoordinate.x + ' , ' + worldCoordinate.y,
'Pixel Coordinate: ' + Math.floor(pixelCoordinate.x) + ' , ' + Math.floor(pixelCoordinate.y),
'Tile Coordinate: ' + tileCoordinate.x + ' , ' + tileCoordinate.y + ' at Zoom Level: ' + map.getZoom()
].join('<br>');
}
// Initialize
function initialize() {
// Options
var mapOptions = {
zoom: 10,
center: chicago
};
// Apply options
map = new google.maps.Map($('.map-coordinates')[0], mapOptions);
// Info window
var coordInfoWindow = new google.maps.InfoWindow();
coordInfoWindow.setContent(createInfoWindowContent());
coordInfoWindow.setPosition(chicago);
coordInfoWindow.open(map);
// Add "Change" event
google.maps.event.addListener(map, 'zoom_changed', function() {
coordInfoWindow.setContent(createInfoWindowContent());
coordInfoWindow.open(map);
});
}
// Load map
google.maps.event.addDomListener(window, 'load', initialize);
});
assets/js/maps/google/basic/geolocation.js
+79
View File
@@ -0,0 +1,79 @@
/* ------------------------------------------------------------------------------
*
* # HTML5 geolocation
*
* Specific JS code additions for maps_google_basic.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see a blank space instead of the map, this
// is probably because you have denied permission for location sharing.
var map;
// Initialize
function initialize() {
// Optinos
var mapOptions = {
zoom: 12
};
// Apply options
map = new google.maps.Map($('.map-geolocation')[0], mapOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Info window
var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Location found using HTML5'
});
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
}
else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
// Handle errors
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
}
else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
// Options
var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};
// Apply options
var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
// Load map
google.maps.event.addDomListener(window, 'load', initialize);
});
assets/js/maps/google/controls/adding_controls.js
+33
View File
@@ -0,0 +1,33 @@
/* ------------------------------------------------------------------------------
*
* # Adding controls
*
* Specific JS code additions for maps_google_controls.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
// Initialize
function initialize() {
// Options
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(48.136, 11.574),
panControl: false,
zoomControl: false,
scaleControl: true
}
// Apply options
var map = new google.maps.Map($('.map-adding-controls')[0], mapOptions);
}
// Load map
google.maps.event.addDomListener(window, 'load', initialize);
});
assets/js/maps/google/controls/control_options.js
+38
View File
@@ -0,0 +1,38 @@
/* ------------------------------------------------------------------------------
*
* # Control options
*
* Specific JS code additions for maps_google_controls.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
// Initialize
function initialize() {
// Options
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(51.164, 10.454),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
}
// Apply options
var map = new google.maps.Map($('.map-control-options')[0], mapOptions);
}
// Load map
google.maps.event.addDomListener(window, 'load', initialize);
});
assets/js/maps/google/controls/control_positioning.js
+49
View File
@@ -0,0 +1,49 @@
/* ------------------------------------------------------------------------------
*
* # Control positioning
*
* Specific JS code additions for maps_google_controls.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
// Initialize
function initialize() {
// Optinos
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(-28.643387, 153.612224),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
scaleControl: true,
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
}
// Apply options
var map = new google.maps.Map($('.map-control-positioning')[0], mapOptions);
}
// Load map
google.maps.event.addDomListener(window, 'load', initialize);
});
assets/js/maps/google/controls/disable_ui.js
+31
View File
@@ -0,0 +1,31 @@
/* ------------------------------------------------------------------------------
*
* # Disable default UI
*
* Specific JS code additions for maps_google_controls.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
// Initialize
function initialize() {
// Options
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(48.858, 2.347),
disableDefaultUI: true
}
// Apply options
var map = new google.maps.Map($('.map-ui-disabled')[0], mapOptions);
}
// Load map
google.maps.event.addDomListener(window, 'load', initialize);
});
assets/js/maps/google/drawings/circles.js
+84
View File
@@ -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
+60
View File
@@ -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
+74
View File
@@ -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
+45
View File
@@ -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);
});
assets/js/maps/google/layers/bicycling.js
+37
View File
@@ -0,0 +1,37 @@
/* ------------------------------------------------------------------------------
*
* # Bicycle layer
*
* Specific JS code additions for maps_google_layers.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
// Initialize
function initialize() {
// Set coordinates
var myLatlng = new google.maps.LatLng(47.377455, 8.536715);
// Options
var mapOptions = {
zoom: 14,
center: myLatlng
};
// Apply options
var map = new google.maps.Map($('.map-layer-bicycling')[0], mapOptions);
// Add layers
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
}
// Load map
google.maps.event.addDomListener(window, 'load', initialize);
});
assets/js/maps/google/layers/fusion_tables.js
+42
View File
@@ -0,0 +1,42 @@
/* ------------------------------------------------------------------------------
*
* # Fusion table
*
* Specific JS code additions for maps_google_layers.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
// Initialize
function initialize() {
// Set coordinates
var chicago = new google.maps.LatLng(41.850036, -87.6800523);
// Options
var mapOptions = {
center: chicago,
zoom: 12
};
// Apply options
var map = new google.maps.Map($('.map-layer-fusion-tables')[0], mapOptions);
// Add layers
var layer = new google.maps.FusionTablesLayer({
query: {
select: '\'Geocodable address\'',
from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
}
});
layer.setMap(map);
}
// Load map
google.maps.event.addDomListener(window, 'load', initialize);
});
assets/js/maps/google/layers/traffic.js
+37
View File
@@ -0,0 +1,37 @@
/* ------------------------------------------------------------------------------
*
* # Traffic layer
*
* Specific JS code additions for maps_google_layers.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
// Initialize
function initialize() {
// Set coordinates
var myLatlng = new google.maps.LatLng(40.4122142, -3.7059725);
// Options
var mapOptions = {
zoom: 12,
center: myLatlng
}
// Apply options
var map = new google.maps.Map($('.map-layer-traffic')[0], mapOptions);
// Add layers
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
// Load map
google.maps.event.addDomListener(window, 'load', initialize);
});
assets/js/maps/google/layers/transit.js
+37
View File
@@ -0,0 +1,37 @@
/* ------------------------------------------------------------------------------
*
* # Transit layer
*
* Specific JS code additions for maps_google_layers.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
// Initialize
function initialize() {
// Set coordinates
var myLatlng = new google.maps.LatLng(51.501904,-0.115871);
// Options
var mapOptions = {
zoom: 14,
center: myLatlng
}
// Apply options
var map = new google.maps.Map($('.map-layer-transit')[0], mapOptions);
// Add layers
var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);
}
// Load map
google.maps.event.addDomListener(window, 'load', initialize);
});
assets/js/maps/google/markers/animation.js
+83
View File
@@ -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
+52
View File
@@ -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
+102
View File
@@ -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 &lt;area&gt; 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
+45
View File
@@ -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);
});