Birisi neden bu Uncaught ReferenceError'u aldığımı belirlemede yardımcı olabilir: $ google maps için bir hata tanımı yapılmadı mı?

Question

benim web sayfasında google harita API işlemek için çalışıyorum ama bu hatayı almaya devam: Burada

edit:1076 Uncaught ReferenceError: $ is not defined 

süreçtir. API haritasının oluşturulmasına yol açan çağrı, edit.html.haml dosyasında başlar.

edit.html.haml

o zaman map_helper.rb dosyası

map_helper.rb 

module MapHelper 
    def map_init(id, zoom = 2) 
    map_script_load + map_js_initialization(id, zoom) 
    end 

    private 

    def map_script_load 
    key = Rails.application.config.google_maps_api_key 
    uri = "#{request.ssl? ? 'https' : 'http'}://maps.googleapis.com/maps/api/js?v=3&key=#{key}" 
    "<script async defer src='#{uri}' type='text/javascript'></script>" 
    end 

    def map_js_initialization(id, zoom) 
    javascript_tag <<-JSCRIPT 
    $(document).on('page:change', function() { 
     Map.load('#{id}', 25, 12, 2); 
     Map.moveTo(25, 12, #{zoom}); 
     }); 
    JSCRIPT 
    end 

seyahat ve oradan da load ve moveTo yöntemlerini çağıran bir Map.js dosyaya gider edit.html.haml dosyada map_init itibaren

........html..... 
........html..... 
........html..... 
.col-md-5.col-md-push-1 
    .form-group 
    %label.control-label!= t('.city_and_country') 
     .controls 
     %p.enabled 
      %input.form-control#location_scratch{ type: :text, autocomplete: :off, value: @account.location } 
       %a{ href: 'javascript:EditMap.clearLocation();' }= t('clear') 
      %p.error#not_found{ style: 'display:none' } 
      = t('.location_error_message') 
       #map 

       #-----THIS IS WHERE IT STARTS------------- 
       != map_init('map,' @account.latitude ? 7 : 0) 
       #------------------------------------------- 

       = f.hidden_field :location 
       = f.hidden_field :country_code 
       = f.hidden_field :latitude 
       = f.hidden_field :longitude 

.

Sorun, yine de map_js_initialization yöntemindedir. JSCRIPT javascript kodu $(document).on('page:change') için başarısız oluyor Neden jQuery nesnesi için başarısız oluyor? Google map api'nin jquery kaynak kodundan önce yüklendiğinden bunun gibi bir hatanın gerçekleştiğini gördüm. Bununla birlikte, haritalara da bir async defer yerleştirdim ve sonuçta hala bir değişiklik yapıyorum.

benim application.js dosyasında require jquery var ve sonra benim application.html.haml dosyada ben Yani sonuç olarak

!!!5 
%html 
    %head 
    - page_title = content_for?(:html_title) ? "#{yield(:html_title)}" : t('.openhub') 
    %title= page_title 
    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0' } 
    %meta{ name: 'description', content: page_context[:description] } 
    %meta{ name: 'keywords', content: page_context[:keywords] } 
    %meta{ name: 'digits-consumer-key', content: ENV['DIGITS_CONSUMER_KEY'] } 
    %meta{ name: 'google-site-verification', content: 'jKkWeVQ0tB1bffJYg7xXAtcIM-nrjjVxhP3ohb8UH2A' } 
    = yield :custom_head 
    = stylesheet_link_tag 'application', media: 'all' 
    = csrf_meta_tags 

    %body{ zoom: 1 } 
    = yield :session_projects_banner 
    .container#page 
     %header= render partial: 'layouts/partials/header' 
     = render partial: 'layouts/partials/page' 
     .clear 
     %footer= render partial: 'layouts/partials/footer' 

    = yield(:javascript) if content_for?(:javascript) 
    = javascript_include_tag 'application', 
         'https://www.google.com/recaptcha/api.js', 
         'https://cdn.digits.com/1/sdk.js', 
         '//cdn.optimizely.com/js/3568250046.js', 
         cache: 'cached_js_files', 
         async: true 


- if Rails.env.production? 
     <script type="text/javascript"> 
     (function() { 
     var hm = document.createElement('script'); hm.type ='text/javascript'; hm.async = true; 
     hm.src = ('++u-heatmap-it+log-js').replace(/[+]/g,'/').replace(/-/g,'.'); 
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(hm, s); 
     })(); 
     </script> 

var. Haritaları görüntüleyebilmem gerekir çünkü jquery numaralıetiketi olan application.js etiketinin üst kısmında yer almalı ve daha sonra api çağrısı daha sonra gelir. Burada bir şey mi eksik?

Answer 1

Yaşadığım sorunu çözmek için şık bir özellik buldum. JQuery'nin doğru sırada yüklenmediği problemi olsa da, harita hala bir sebep göstermiyordu. Bu küçük kod parçacığı sorunumu çözdü.

document.onreadystatechange = function() { 
    if (document.readyState == "complete") { 
     Map.load('#{id}', 25, 12, 2); 
     Map.moveTo(25, 12, #{zoom}); 
    } 
    };