गूगल रोकें नक्शे जे एस कई बार क्रियान्वित रेल Turbolinks की वजह से

Question

मैं वर्तमान में रेल एप्लिकेशन कि निम्न त्रुटि हो रही है पर काम कर रहा हूँ। जब link_to क्लिक किया जाता है तो Google मानचित्र द्वारा बनाए गए सभी DOM तत्वों को DOM के भीतर रखा जाता है। जब कोई नया पृष्ठ प्रस्तुत किया जाता है तो Google Map DOM तत्वों का एक और सेट डुप्लिकेट और त्रुटि उत्पन्न होता है।

मैं 'data-no-turbolink' => true को अपने link_to पर जोड़कर इसे बहुत जल्दी ठीक कर सकता हूं लेकिन यह टर्बोलिंक का उपयोग करने के उद्देश्य को हरा देता है क्योंकि यह ताज़ा करने के लिए मजबूर करता है।

मुझे आश्चर्य है कि क्या इस डुप्लिकेशंस को टर्बोलिंक बंद किए बिना रोकने के लिए कोई संभावित कार्यवाही है?

map.js:

var initMap = function initMap() { 

    if (typeof mapLatLng != "undefined") { 

    // we can use this to set the map zoom 
    // in different places. 
    // use: window.setZoom = 12; 
    if (typeof setZoom ==! "undefined") { 
     var mapZoom = setZoom; 
    } else { 
     var mapZoom = 14; 
    } 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: mapZoom, 
     center: mapLatLng, 
     disableDefaultUI: true, 
     scrollwheel: false 
    }); 

    var markerSVG = { 
     path: 'M1152 640q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm256 0q0 109-33 179l-364 774q-16 33-47.5 52t-67.5 19-67.5-19-46.5-52l-365-774q-33-70-33-179 0-212 150-362t362-150 362 150 150 362z', 
     fillColor: '#f32e74', 
     fillOpacity: 1, 
     strokeWeight: 0, 
     anchor: new google.maps.Point(870,1650), 
     scale: (0.02, 0.02) 
    }; 

    var mapMarker = new google.maps.Marker({ 
     position: map.getCenter(), 
     map: map, 
     icon: markerSVG, 
    }); 
    } 
} 

दृश्य:

<% if @job.address.latitude && @job.address.longitude %> 
    <%= javascript_tag do %> 
    window.mapLatLng = {lat: <%= @job.address.latitude %>, lng: <%= @job.address.longitude %>}; 
    <% end %> 
    <% content_for :js do %> 
    <script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap"></script> 
    <% end %> 
<% end %> 

Answer 1

मैं एक ही समस्या का सामना करना पड़ा था, दुर्भाग्य से इस कई महीनों के बाद आप के लिए कोई मदद नहीं की हो सकती है।

मैं ले जाया गया:

सिर में

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places"></script> 

< के बाद टैग% = csrf_meta_tags%>, और चले गए:

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 

के बाद /शरीर टैग।

इस पेज पर आप गूगल मैप्स एपीआई कई बार शामिल किया है:

ऐसा करने से तो मैं इस समस्या का समाधान। इससे अप्रत्याशित त्रुटियां हो सकती हैं।

नेविगेशन बार में लिंक के लिए डेटा-नो-टर्बोलिंक जोड़ा गया, जिस पृष्ठ पर मेरा नक्शा है। इससे मुझे बिना किसी त्रुटि के सभी पृष्ठों में टर्बोलिंक का उपयोग करने में मदद मिली और साथ ही साथ मुझे उस पृष्ठ को एक्सेस करने के लिए मानचित्र उत्पन्न करने में मदद मिली।

Answer 2

स्क्रिप्ट टैग को data-turbolinks-eval=false जोड़ने समस्या

अधिक जानकारी के https://github.com/turbolinks/turbolinks-classic#evaluating-script-tags

Answer 3

यह भी प्रयास करें के लिए turbolinks मणि की नाव देखें हल करती है ....

google.maps.event.addDomListener(window, 'turbolinks:load', initialize);

और याद है, सभी गूगल स्क्रिप्ट, Turbolink के बाद रहने के लिए है इस तरह:

= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' 
= javascript_include_tag 'https://maps.googleapis.com/maps/api/js', 'data-turbolinks-track': 'reload' 
= javascript_include_tag 'gmap', 'data-turbolinks-track': 'reload' 

पर अधिक देखें: https://github.com/turbolinks/turbolinks

Answer 4

के बजाय

<script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap"></script> यह एक नियमित रूप से <script></script> टैग बनाने के लिए और नीचे निम्नलिखित जोड़ें अपने initMap समारोह:

if(window.google){ 
    initMap(); 
} else{ 
    $.ajax('https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap', { 
    crossDomain: true, 
    dataType: 'script' 
    }); 
} 

आप jQuery का उपयोग नहीं कर रहे हैं तो बस के बजाय XMLHttpRequest का उपयोग करें।

Answer 5

स्क्रिप्ट टैग में data-turbolinks-eval="false" जोड़ना टर्बोलिंक को फिर से मूल्यांकन नहीं करेगा।

<script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap" data-turbolinks-eval="false"></script> 

देखें https://github.com/turbolinks/turbolinks#working-with-script-elements

हमारे मामले में, जहां हमारे सभी स्क्रिप्ट टैग turbolinks डॉक्स के अनुसार <head> में थे में काम किया।