Javascript GooglMaps API дескриптор не часто работает

Question

Я создал веб-приложение, в котором пользователи будут записывать свои координаты Google.Для этой цели во внешнем javascript я использовал API Google Maps.

В идеале страница выглядит так, как показано ниже.

У меня есть домен и VPS-сервер от Godaddy.Я также установил сертификат SSL на сервере.

Но проблема часто в том, что MAPS не работают, и при загрузке страницы он зависает.Увидеть ниже.

Затем, позже, я регенерирую ключ и перезагружаю сервер, это занимает много времени для разрешения при каждом случае.

Есть ли способ, которым ярешить этот вопрос навсегда?Вы сталкивались с такими проблемами?

API карт Google, как показано ниже:

    <script>
        $(document).ready(function(){
        if(navigator.geolocation){
            navigator.geolocation.getCurrentPosition(showLocation);
        }else{ 
            $('#location').html('Geolocation is not supported by this browser.');
        }
    });

    function showLocation(position){    
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var baseurl = $('#baseurl').val();
        $.ajax({
            type:'POST',
            url: baseurl+'dailyvisit/getLocation',
            data:'latitude='+latitude+'&longitude='+longitude,
            success:function(msg){
                if(msg){
                    //alert(msg);
                    var data = msg.split('|');
                    var city = data[0].split(' - ');
                    var count = city.length;
                    $('#city').val(city[1]);
                   $("#location").val(city[0]+","+city[1]+","+city[2]);
                   $('#co_ordinates').val(data[1]+","+data[2]);
                var map;

                   var latitude = Number(data[1]); // YOUR LATITUDE VALUE
                var longitude = Number(data[2]); // YOUR LONGITUDE VALUE

                var myLatLng = {lat: latitude, lng: longitude};

                map = new google.maps.Map(document.getElementById('map'), {
                  center: myLatLng,
                  zoom: 14                    
                });

                var marker = new google.maps.Marker({
                  position: myLatLng,
                  map: map,
                  //title: 'Hello World'

                  // setting latitude & longitude as title of the marker
                  // title is shown when you hover over the marker
                  title: latitude + ', ' + longitude 
                });            
                }else{
                    $("#location").html('Not Available');
                }
            }
        });
    }
        function visit_validation()
        {
                var err = 0;
      var customer = $('#customerId').val();
      var contact_number = $('#contact_number').val();
      var contact_email = $('#Contact_email').val();
    /*  var name = $('#prodNameEdit').val();
      var price = $('#prodPriceEdit').val();
      var qty = $('#prodQtyEdit').val();
      var bfast = $('#breakfastEdit').val();
      var lunch = $('#lunchEdit').val();
      var dinner = $('#dinnerEdit').val();*/

      if(customer==''){
         $('#customerId_err').html('Customer name is required!');
         err++;
      }else{
         $('#customerId_err').html('');
      }
      if(contact_number.trim()==''){
            $('#cn_err').html('Contact Number is required!');
            err++;
        }else if(contact_number != parseInt(contact_number, 10)){ 
            $('#cn_err').html('Invalid Mobile Number!');
            err++;
        }else{
            $('#cn_err').html('');
        }     
             if(!ValidateEmail(contact_email) && contact_email.trim()!=''){ 
            $('#ce_err').html('Invalid Email ID!');
            err++;
        }else{
            $('#ce_err').html('');
        }       

      if(err>0){ return false; }else{ return true; }
        }
        function ValidateEmail(email){
    var expr = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    return expr.test(email);
    }
    </script>

Answer 1

Если ваш вызов ajax не возвращается успешно, карта не будет создана, поскольку карта создается, только если вызов ajax возвращает успех.Вы можете переместить карту и код создания маркера перед вызовом ajax следующим образом:

function showLocation(position){    
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;

    var myLatLng = {lat: latitude, lng: longitude};

    var map = new google.maps.Map(document.getElementById('map'), {
      center: myLatLng,
      zoom: 14                    
    });

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      //title: 'Hello World'

      // setting latitude & longitude as title of the marker
      // title is shown when you hover over the marker
      title: latitude + ', ' + longitude 
    });   

    var baseurl = $('#baseurl').val();

    $.ajax({
        type:'POST',
        url: baseurl+'dailyvisit/getLocation',
        data:'latitude='+latitude+'&longitude='+longitude,
        success:function(msg){
            if(msg){
                //alert(msg);
                var data = msg.split('|');
                var city = data[0].split(' - ');
                var count = city.length;
                $('#city').val(city[1]);
               $("#location").val(city[0]+","+city[1]+","+city[2]);
               $('#co_ordinates').val(data[1]+","+data[2]);

            }else{
                $("#location").html('Not Available');
            }
        }
    });
}

Это создаст карту и маркер перед вызовом ajax.Если вызов ajax успешен, будут установлены поля города, местоположения и координат, в противном случае они не будут.В любом случае создание карты и маркера всегда будет происходить, и у вас не будет пустой карты на странице.