Note that there are some explanatory texts on larger screens.

plurals
  1. POgoogle maps not showing correctly after .show()
    primarykey
    data
    text
    <p>Hello everyone I am building a website and it has a checkbox if that box is checked it would display google map and if not it will hide it. When I load it without <code>.hide()</code> and <code>.show()</code> it works correctly but when I use <code>hide()</code> and <code>show()</code> methods it would load a portion of the map.</p> <p>The code</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script src="http://code.jquery.com/jquery-1.8.3.min.js"&gt;&lt;/script&gt; &lt;script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&amp;sensor=false"&gt;&lt;/script&gt; &lt;script&gt; var MAPID = "map"; function initialize(){ var loc = new google.maps.LatLng(23.70656905403075,-53.58581517968753); var options = { zoom : 8, center : loc, mapTypeId : google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(MAPID),options); var marker = new google.maps.Marker({ position : loc, map : map, draggable : true, animation : google.maps.Animation.DROP, title : "Hello world" }); google.maps.event.addListener(marker,"dragend",function(e){ updateloc(this.position); }); marker.setMap(map); } function updateloc(loc){ $("#lat").val(loc.lat()); $("#long").val(loc.lng()); } $(document).ready(function(){ $("#map_canvas").hide(); $("#lat").hide(); $("#long").hide(); $("#theMap").change(function(){ if(this.checked) $("#map_canvas").show(); else $("#map_canvas").hide(); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body onload="initialize();" &gt; &lt;form&gt; &lt;input type="checkbox" id="theMap"&gt; &lt;div id="map" style="width:400px;height:400px"&gt;&lt;/div&gt; &lt;input id="lat" /&gt; &lt;input id="long" /&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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