«Uncaught TypeError: не удалось выполнить« getComputedStyle »в« Window »: параметр 1 не имеет тип« Element'.Tq @ VM107: 37mF, когда gmap добавляет

Question

Я новичок, практикующий html и jquery. Может ли любой один, пожалуйста, помогите мне разрешения этой ошибки , когда я был попытаться добавить карту Google динамически, я получаю сообщение об ошибке, как неперехваченный TypeError: не удалось выполнить «getComputedStyle» на «окна»:. параметр

HTML разметка:

<type="submit" id="locate">Find me</button> 
<div id="gmap"> </div> 

enter code here 

    $(document).ready(function() { 

     $('#locate').on('click', function (e) { 
      e.preventDefault(); 
      if (navigator.geolocation) { 
       navigator.geolocation.getCurrentPosition(showPosition); 
      } 
      else { 
       console.log('Geolocation is not supported by your browser'); 
      } 
     }); 
     var latlng, 
     mapOptions, 
     map; 

     showPosition = function (position) { 
      latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude) 
      mapOptions = { 
       center: latlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP, 
       zoom: 15 
      } 
      Map = new google.maps.Map($('#gmap'), mapOptions); 
      var marker = new google.maps.Marker({ 
       position: latlng, 
       map: map, 
       title: "You are here" 
      }) 
     } 
    }); 

Answer 1

Два вопроса:

1. JavaScript чувствительны к регистру, эта строка:

   Map = new google.maps.Map 
   

   должен быть

   map = new google.maps.Map 
   

   Так почему weren (Обратите внимание на строчные м на карте в самом начале.) вы получаете ошибку «неопределенной переменной» или что-то еще? Из-за The Horror of Implicit Globals. Подумайте о том, как использовать strict mode, чтобы вместо этого получать инициативные уведомления.

2. google.maps.Map конструктор ожидает, что вы дать ему элемент в качестве первого аргумента, но вы не делаете этого. Вы даете ему объект JQuery:

   map = new google.maps.Map($('#gmap'), mapOptions); 
   //      ^^^^^^^^^^--- this is a jQuery object 
   

   Чтобы получить единственный элемент внутри объекта JQuery, используйте [0]:

   map = new google.maps.Map($('#gmap')[0], mapOptions); 
   // Here ----------------------------^^^