|
|
|
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=@Yavsc.Startup.GoogleSettings.BrowserApiKey"></script>
|
|
|
<script>
|
|
|
$(document).ready(function(){
|
|
|
|
|
|
function chooseLoc(config, sender, loc) {
|
|
|
if (sender === 'user') $('#'+config.addrId).val(loc.formatted_address);
|
|
|
var pos = loc.geometry.location;
|
|
|
var lat = new Number(pos.lat);
|
|
|
var lng = new Number(pos.lng);
|
|
|
var mapid = '#'+config.addrId;
|
|
|
var gmap = config.gmap;
|
|
|
gmap.setCenter(pos);
|
|
|
$('#'+config.latId).val(pos.lat);
|
|
|
$('#'+config.longId).val(pos.lng);
|
|
|
var marker = new google.maps.Marker({
|
|
|
map: gmap,
|
|
|
draggable: true,
|
|
|
animation: google.maps.Animation.DROP,
|
|
|
position: pos
|
|
|
});
|
|
|
google.maps.event.addListener(marker, 'dragend', function() {
|
|
|
var pos = marker.getPosition();
|
|
|
$('#'+config.latId).val(pos.lat);
|
|
|
$('#'+config.longId).val(pos.lng);
|
|
|
});
|
|
|
$('#'+config.addrId).valid();
|
|
|
$('#'+config.valId).empty();
|
|
|
return true;
|
|
|
}
|
|
|
|
|
|
function setupInputAddress (mapDiv)
|
|
|
{
|
|
|
var config = {
|
|
|
mapId: $(mapDiv).attr('id'),
|
|
|
addrId: $(mapDiv).data('addr'),
|
|
|
lonId: $(mapDiv).data('lon'),
|
|
|
latId: $(mapDiv).data('lat'),
|
|
|
valId: $(mapDiv).data('val'),
|
|
|
locComboId: $(mapDiv).data('loccombo')
|
|
|
};
|
|
|
console.log(config);
|
|
|
|
|
|
var input = '#'+config.addrId;
|
|
|
$(input).data("val-required", '@SR["SpecifyPlace"]') ;
|
|
|
$(input).data("val-remote", '@SR[ "GoogleDidntGeoLocalized"]') ;
|
|
|
$(input).rules("add",
|
|
|
{
|
|
|
remote: {
|
|
|
url: 'https://maps.googleapis.com/maps/api/geocode/json',
|
|
|
type: 'get',
|
|
|
data: {
|
|
|
key: '@Startup.GoogleSettings.BrowserApiKey',
|
|
|
sensor: false,
|
|
|
address: function () { return $('#'+config.addrId).val() }
|
|
|
},
|
|
|
dataType: 'json',
|
|
|
dataFilter: function(datastr,type) {
|
|
|
$('#'+config.locComboId).html("");
|
|
|
var data = JSON.parse(datastr);
|
|
|
data.results.forEach(function(element) {
|
|
|
if (element.formatted_address !== $('#'+config.addrId).val()) {
|
|
|
$('<li style="pointer:cursor;">'+element.formatted_address+'</li>')
|
|
|
.data("geoloc",element)
|
|
|
.click(function() { chooseLoc(config, 'user', $(this).data("geoloc")) })
|
|
|
.appendTo($('#'+config.locComboId));}
|
|
|
});
|
|
|
if ((data.status === 'OK') && (data.results.length == 1))
|
|
|
{
|
|
|
chooseLoc(config, 'google', data.results[0]);
|
|
|
return true
|
|
|
}
|
|
|
return false
|
|
|
},
|
|
|
error: function(xhr, textStatus, errorThrown)
|
|
|
{
|
|
|
console.log('ajax loading error ... '+textStatus+' ... '+ errorThrown);
|
|
|
return false
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
|
|
|
var gmap = new google.maps.Map(document.getElementById(config.mapId), {
|
|
|
zoom: 8
|
|
|
});
|
|
|
config.gmap = gmap;
|
|
|
}
|
|
|
$("div.map").each(function(indexMap){
|
|
|
setupInputAddress(this)
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
|