first commit
This commit is contained in:
dev-chiefworks
@@ -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);
|
||||
|
||||
});
|
||||
@@ -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);
|
||||
|
||||
});
|
||||
@@ -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);
|
||||
|
||||
});
|
||||
@@ -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);
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user