StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POGoogle Maps API v3 controls showing up behind map
text
Body
copied!<p>greetings & salutations, </p> <p>this is my first run with the google maps API, i'm using WordPress and the Genesis Framework,</p> <p>i'm working through a tutorial on <a href="http://tympanus.net/codrops/2011/04/13/interactive-google-map/" rel="nofollow">http://tympanus.net/codrops/2011/04/13/interactive-google-map/</a></p> <p>and i've gotten a google map to show up on the map page, </p> <p><a href="http://www.foodtrucksnashville.com/map/" rel="nofollow">http://www.foodtrucksnashville.com/map/</a></p> <p>however, you'll notice the map controls are underneath the map. hmmm. </p> <p>no idea. need help / nudge in teh right direction.</p> <p>thx again, stackoverflow community.</p> <p>here's the code in the init.js:</p> <pre><code>var map, geocoder, marker, ey, my, mouseDown = false; var o = { init: function () { this.map.init(); }, map: { size: function () { // so it's a loverly sqware. var w = jQuery('.content-sidebar #content').width(), h = 440; return { width: w, height: h } }, data: { zoom: 13, center: new google.maps.LatLng(36.165389, -86.783237), // Nashville TN Capitol BLDG scrollwheel: false, mapTypeId: google.maps.MapTypeId.ROADMAP }, init: function () { // get the map size var size = o.map.size(); // add some css to the #map div based on the size jQuery('#map').css({ width: size.width, height: size.height, }); // make a new google map in the #map div and pass it the map data map = new google.maps.Map(document.getElementById('map'), o.map.data), geocoder = new google.maps.Geocoder(); /* // add eventlistener to map to hide posts when dragging? google.maps.event.addListener(map, 'dragstart', function () { jQuery('.posts').hide(); }); */ } } // end map } // end o object jQuery(window).load(function () { o.init(); }); </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