गूगल के नक्शे प्रदर्शित नहीं करता जब तक मैं

Question

ताज़ा मैं आधिकारिक दस्तावेज में इन सरल निर्देशों का पालन किया गया था: https://developers.google.com/maps/documentation/javascript/tutorial

सब कुछ ठीक काम करता है जब मैं पहली बार के लिए साइट खोलें। नक्शा सामान्य रूप से दिखाता है। समस्या यह है कि जब मैं साइट के अन्य हिस्सों में नेविगेट करता हूं। उस स्थान पर लौटने के बाद जहां नक्शा होना चाहिए, नक्शा दिखाई नहीं देता है।

<ul> 
    <li><%= link_to "Home", root_path %></li> 
    <li><%= link_to "About", about_path %></li> 
    <li><%= link_to "Contact", contact_path %></li> 
</ul> 

अंदर जावास्क्रिप्ट "संपर्क":

यहाँ बुनियादी संरचना है

<script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=xxx&sensor=false"> 
    </script> 
    <script type="text/javascript"> 
     function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(-34.397, 150.644), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map-canvas"), 
      mapOptions); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 

<h1>Contact</h1> 
<p> 
    Address & phone number 
</p> 

<div id="map-canvas" style="width: 35em; height: 35em;"/> 

तो, अगर मैं "घर" पृष्ठ पर साइट खोलने और फिर नेविगेट करने के लिए "संपर्क", कोई नक्शा नहीं है लेकिन अगर मैं "संपर्क" साइट रीफ्रेश करता हूं, तो मानचित्र प्रकट होता है। क्या समस्या हो सकती है?

धन्यवाद।

EDIT1:

मैं तैयार समारोह के अंदर अपने कोड डालने की कोशिश की:

$.getScript('https://maps.googleapis.com/maps/api/js?key=xxx&sensor=false'); 

     var mapOptions = { 
      center: new google.maps.LatLng(-34.397, 150.644), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map-canvas"), 
      mapOptions); 

लेकिन जब मैंने उसे ऐसा करते हैं, इस लाइन पर कोड टूट जाता है:

center: new google.maps.LatLng(-34.397, 150.644), 

Answer 1

यह कहना मुश्किल है कि क्या गलत हो रहा है। जब आप कहते हैं कि आप साइट के अन्य हिस्सों पर नेविगेट करते हैं, तो क्या वे सभी एक HTML फ़ाइल में निहित हैं? या शायद वे गतिशील रूप से AJAX के साथ लोड कर रहे हैं? मानचित्र पर एक आकार बदलने की घटना को ट्रिगर करने का प्रयास करें जब यह ठीक से प्रदर्शित नहीं हो रहा है।

google.maps.event.trigger(map, 'resize'); 

वैकल्पिक रूप से इसे कहीं भी "नेविगेट" करने के बाद कहा जा सकता है जहां यह होना चाहिए लेकिन यह प्रदर्शित नहीं हो रहा है।

Answer 2

क्या आप टर्बोलिंक सक्षम के साथ रेल 4 का उपयोग कर रहे हैं? यदि ऐसा है, तो load ईवेंट होम पेज से संपर्क पृष्ठ पर जाने पर आग नहीं लगेगा - लेकिन रीफ्रेश को पूरी तरह से लोड करने से पूरे पृष्ठ को लोड किया जाता है, इसलिए लोड इवेंट आग लगती है। यह आपके द्वारा वर्णित व्यवहार के अनुरूप होगा।

यह आपकी स्क्रिप्ट ब्लॉक के अंत में 'load' लाइन के अलावा जोड़ कर देखें,:

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

Answer 3

समस्या, अपने turbolinks साथ रहने के लिए एक समारोह में अपने सभी गतिविधियों के लिए बाध्य और फोन है कि लगता है document.ready पर साथ ही साथ document.page:load ईवेंट पर कार्य करें।

$(document).ready(PageSetupFunction); 
$(document).on("page:load", PageSetupFunction); 

असल में यहां दस्तावेज़। पृष्ठ को रीफ्रेश करते समय पहले ही कॉल किया जाएगा। लेकिन पृष्ठ: एक बार जब आप इस पृष्ठ पर किसी अन्य लिंक से आते हैं तो भार ईवेंट बुलाया जाएगा।

Answer 4

बस उस फ़ंक्शन में देरी प्रदान करें जो Google मानचित्र को प्रारंभ करता है और यह ठीक काम करेगा।

setTimeout(function() { 
    //code for initializing the google map 
}, 1000); 

Answer 5

टाइमआउट को छह सेकंड में सेट करना मेरे लिए काम करता है। नक्शा जितना बड़ा होगा उतना बड़ा होगा, इसलिए अपने टाइमआउट के आधार पर अपना टाइमआउट गेज करें।

Answer 6

मैं इस ठीक करने के बाद कोड ट्रिगर करने के बाद पेज आप रेल 4 का उपयोग करते हैं jQuery

$(document).on("pageshow","#contact",function(){ 
    initialize(); 
});