Google Map - MGRS, Lat, Lon, and dragable marker
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<script src="https://maps.google.com/maps/api/js?sensor=false&.js"></script>
<div id="map"></div>
<label for="lat">Lattitude:</label>
<input id="lat" value="12" />
<label for="lat">Longitude:</label>
<input id="lon" value="12.03" />
<br/>
<label for="mgrs">MGRS:</label>
<input id="mgrs" value="34PDV552" />
CSS
#map {
width: 450px;
height: 400px;
}
JavaScript
var map;
var marker;
function initialize() {
var lattitude = $('#lat');
var longitude = $('#lon');
var mgrs = $('#mgrs');
if (lattitude.val() && longitude.val()) {
if (!mgrs.val()) {
mgrs.val(getMGRSFromLatLon(lattitude.val(), longitude.val()));
}
} else if (mgrs.val()) {
setLatLonFromMGRS(mgrs.val());
centerMapOnLatLon();
}
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(lattitude.val(), longitude.val()),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
marker = new google.maps.Marker({
position: new google.maps.LatLng(lattitude.val(), longitude.val()),
map: map,
draggable: true,
animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, "dragend", function(event) {
var lat = event.latLng.lat();
var lng = event.latLng.lng();
$('#lat').val(lat);
$('#lon').val(lng);
$('#mgrs').val(getMGRSFromLatLon(lat, lng));
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$('#mgrs').change(function() {
setLatLonFromMGRS($(this).val());
centerMapOnLatLon();
});
var setLatLonFromMGRS = function(mgrs) {
var latLon = getLatLonFromMGRS(mgrs);
var lat = latLon[0];
var lon = latLon[1];
$('#lat').val(lat);
$('#lon').val(lon);
}
$('#lat, #lon').change(function() {
updateLatLon();
});
var updateLatLon = function() {
var lat = $('#lat').val();
var lon = $('#lon').val();
if (lat && lon) {
var mgrs = getMGRSFromLatLon(lat, lon);
$('#mgrs').val(mgrs);
centerMapOnLatLon();
}
};
var centerMapOnLatLon = function() {
var lat = $('#lat').val();
var lon = $('#lon').val();
var latlng = new google.maps.LatLng(lat, lon);
marker.setPosition(latlng);
map.setCenter(marker.getPosition());
};
var getMGRSFromLatLon = function(lat, lon) {
return usng.LLtoUSNG(lat, lon, 5).split(' ').join('');
};
var getLatLonFromMGRS = function(mgrs) {
...