Databases
StackOverflow2013
Postsdbo
POGoogle maps doesn't show until I refresh
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGoogle maps doesn't show until I refresh
    text
    copied!<p>I was following these simple instructions in official documentation: <a href="https://developers.google.com/maps/documentation/javascript/tutorial" rel="noreferrer">https://developers.google.com/maps/documentation/javascript/tutorial</a></p> <p>Everything works fine when I open the site for the first time. Map shows normally. The problem is when I navigate to other parts of the site. After I return to the location where map should be, the map doesn't show.</p> <p>Here is the basic structure:</p> <pre><code>&lt;ul&gt; &lt;li&gt;&lt;%= link_to "Home", root_path %&gt;&lt;/li&gt; &lt;li&gt;&lt;%= link_to "About", about_path %&gt;&lt;/li&gt; &lt;li&gt;&lt;%= link_to "Contact", contact_path %&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Javascript inside "Contact":</p> <pre><code> &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=xxx&amp;sensor=false"&gt; &lt;/script&gt; &lt;script type="text/javascript"&gt; 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); &lt;/script&gt; &lt;h1&gt;Contact&lt;/h1&gt; &lt;p&gt; Address &amp; phone number &lt;/p&gt; &lt;div id="map-canvas" style="width: 35em; height: 35em;"/&gt; </code></pre> <p>So, if I open the site on "Home" page and then navigate to "Contact", there is no map. But if I refresh the "Contact" site, map appears. What could be a problem?</p> <p>Thank you.</p> <p><strong>EDIT1:</strong></p> <p>I tried to put my code inside ready function:</p> <pre><code>$.getScript('https://maps.googleapis.com/maps/api/js?key=xxx&amp;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); </code></pre> <p>But when I do it like that, code breaks at this line:</p> <pre><code>center: new google.maps.LatLng(-34.397, 150.644), </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload