<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAnRA1CvBUdFF22IYWlK_dKmW71Vl-Mz7M&v=3.exp&sensor=false"></script>
<style type="text/css">
.minimap {
min-height: 320px;
margin-top: 10px;
background-color: #f2f2f2;
/*-webkit-box-shadow: 0 2px 12px rgba(0,0,0,.5);*/
/*-moz-box-shadow: 0 2px 12px rgba(0,0,0,.5);*/
/*box-shadow: 0 1px 2px #000;*/
}
</style>
<div id='mapOnWorkItemDiv' class="minimap"></div>
<script>
// map is global... mmm...
var map;
function geoCodeAddress(latlng, onFind) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
onFind(results[1].formatted_address);
}
}
});
}
function addEndLocationMarker(location) {
if (location != null && location != '') {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': location}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var elem = $('#endAddressChoice');
if (results.length == 1) {
if (elem) {
elem.hide();
}
addMarkerOnMap(results[0].geometry.location);
} else {
if (elem) {
var rows = '<div class="alert alert-info" id="endAddressChoiceTab" style="display: none">';
for (var i =0; i<results.length; i++) {
rows = rows + '<p style="font-size: smaller"> <a href="#" onclick="removeAddressChoiceAndSetMarker(' + '\'' + results[i].formatted_address + '\'' + ');addMarkerOnMap(new google.maps.LatLng(' +
results[i].geometry.location.lat() + ',' + results[i].geometry.location.lng() + '));return false;">' + results[i].formatted_address + '</a></p>';
}
elem.html(rows + '</div>');
$('#endAddressChoiceTab').fadeIn()
}
}
} else {
if ($('#endAddrLatitude')) {
$('#endAddrLatitude').val('');
}
if ($('#endAddrLongitude')) {
$('#endAddrLongitude').val('');
}
}
});
}
}
function initMapOnWorkItem(location) {
if (location != null && location != '') {
// $('#mapOnWorkItemDiv').hide();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': location}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var elem = $('#addressChoice');
if (results.length == 1) {
if (elem) {
elem.hide();
}
showLocationOnMapDiv(results[0].geometry.location);
} else {
if (elem) {
var rows = '<div class="alert alert-info" id="addressChoiceTab" style="display: none">';
for (var i =0; i<results.length; i++) {
rows = rows + '<p style="font-size: smaller"> <a href="#" onclick="removeAddressChoiceAndSetAddress(' + '\'' + results[i].formatted_address + '\'' + ');showLocationOnMapDiv(new google.maps.LatLng(' +
results[i].geometry.location.lat() + ',' + results[i].geometry.location.lng() + '));return false;">' + results[i].formatted_address + '</a></p>';
}
elem.html(rows + '</div>');
$('#addressChoiceTab').fadeIn()
}
}
} else {
$('#mapOnWorkItemDiv').css('min-height', '160px').css('border', '0').html('<div class="alert alert-danger" style="height: 100%">We could not locate the address specified :(</div>').show();
if ($('#addrLatitude')) {
$('#addrLatitude').val('');
}
if ($('#addrLongitude')) {
$('#addrLongitude').val('');
}
}
});
}
}
function setAddressBack(address, elem, tabToHide) {
var addressElem = $(elem);
if (addressElem) {
addressElem.val(address);
}
$(tabToHide).hide();
}
function removeAddressChoiceAndSetMarker(address) {
setAddressBack(address, '#endInputAddress', '#endAddressChoiceTab');
}
function removeAddressChoiceAndSetAddress(address) {
setAddressBack(address, '#inputAddress', '#addressChoiceTab');
}
function addMarkerOnMap(loc) {
if ($('#endAddrLatitude')) {
$('#endAddrLatitude').val(loc.lat());
}
if ($('#endAddrLongitude')) {
$('#endAddrLongitude').val(loc.lng());
}
addMarker(loc);
}
function showLocationOnMapDiv(loc) {
var mapOptions = {
zoom: 15,
center: loc,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
$('#mapOnWorkItemDiv').css('height', '280px').css('border', '#555555 1px solid').fadeIn();
if ($('#addrLatitude')) {
$('#addrLatitude').val(loc.lat());
}
if ($('#addrLongitude')) {
$('#addrLongitude').val(loc.lng());
}
map = new google.maps.Map(document.getElementById('mapOnWorkItemDiv'), mapOptions);
map.setCenter(loc);
addMarker(loc);
}
function addMarker(loc) {
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: loc
});
tryToDisplayRoute();
}
function tryToDisplayRoute() {
if ($('#addrLatitude') && $('#addrLatitude').val() != '' &&
$('#addrLongitude') && $('#addrLongitude').val() != '' &&
$('#endAddrLatitude') && $('#endAddrLatitude').val() != '' &&
$('#endAddrLongitude') && $('#endAddrLongitude').val() != '') {
var start = new google.maps.LatLng($('#addrLatitude').val(), $('#addrLongitude').val());
var end = new google.maps.LatLng($('#endAddrLatitude').val(), $('#endAddrLongitude').val());
displayRoute(start, end);
}
}
function displayRoute(startLoc, endLoc) {
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();// also, constructor can get "DirectionsRendererOptions" object
directionsDisplay.setMap(map); // map should be already initialized.
var request = {
origin : startLoc,
destination : endLoc,
travelMode : google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
</script>
|