yavsc/Yavsc/Views/Shared/_MapScriptsPartial.cshtml

<script src="https://maps.googleapis.com/maps/api/js?key=@Yavsc.Startup.GoogleSettings.BrowserApiKey"></script>
<script>
     $(document).ready(function(){


   function setCoord(config, pos)
   {
        var culture = '@System.Globalization.CultureInfo.CurrentCulture.Name';
        var lat = new Number(pos.lat);
        var lng = new Number(pos.lng);
        $('#'+config.latId).val(lat.toLocaleString(culture));
        $('#'+config.lonId).val(lng.toLocaleString(culture));
   }
   function chooseLoc(config, sender, loc) {
        if (sender === 'user') $('#'+config.addrId).val(loc.formatted_address);
        var pos = loc.geometry.location;
        var mapid = '#'+config.addrId;
        var gmap = config.gmap;
        gmap.setCenter(pos);
        setCoord(config, pos);
        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();
            setCoord(config, { lat: pos.lat(), lng: 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') 
        };
 
    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>