Div on Top of Div with Google Maps API

How to float a div over Google Maps?

Try this:

<style>
   #wrapper { position: relative; }
   #over_map { position: absolute; top: 10px; left: 10px; z-index: 99; }
</style>

<div id="wrapper">
   <div id="google_map">

   </div>

   <div id="over_map">

   </div>
</div>

div on top of div with Google Maps API

Can't you changed the positions of the DIVs like this:

<div id="menu"></div>
<div id="map"></div>

If not you could go something like this:

<div id="map"></div>
<div id="menu"></div>

#menu
{
    position: absolute;
    top: 10px;  /* adjust value accordingly */
    left: 10px;  /* adjust value accordingly */
}

Update 2

Cross-browser transparency style:

.dropSheet
{
    background-color: #000000;
    background-image: none;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

Just apply the class dropSheet to the element you want to make transparent.

Div over Google map

The problem is that google maps need a concrete height attribute in order to work.

Here's an example: http://jsfiddle.net/9qDhX/

Note that height: 400px; will work, but height: 100%; will leave you with a blank screen.

There are various workarounds to get a "full screen" map. The best, cross-browser ones will use some kind of jQuery to set the height of the map_canvas based on the current window size, with a listener to window resize to reset the height.

How to float a div over Google Maps and keep it in fullscreen?

I finally could solve it.
What I had to do was put the div that I want to be superimposed on the first div that is generated when the Google map is initialized.

My html code is the same, the only thing I did was move it with jquery after all the elements of the website are loaded.

My html code super explained and verified:
(Imagine that the following code is inside the basic structure of an html page)

<div class="gx-card-body">
                                    <!-- <div class="cont-fab">
                                        <a href="javascript:void(0)" class="gx-fab-btn gx-btn-primary">
                                            <i class="zmdi zmdi-account-add zmdi-hc-fw zmdi-hc-lg"></i>
                                        </a>
                                    </div> -->
                                    <div class="cont-items-monitor overlay" style="display: none">
                                        <ul>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                            <li>Seat León JMG-8823</li>
                                            <li>Seat Ibiza JMG-8823</li>
                                            <li>VW Vento JMG-8823</li>
                                            <li>Nissan Versa JMG-8823</li>
                                            <li>Nissan March JMG-8823</li>
                                            <li>Lincoln Navigator JMG-8823</li>
                                        </ul>
                                    </div>

                                    <div id="google-map"></div>
                                </div>

My JS code (jQuery):

$(document).ready(function () {
    $('.cont-items-monitor').appendTo($('#google-map').find('div')[0]);
});

I hope it serves someone else

Google Maps API v3 inside another Div

The changes I made were:

• triggering a resize when the div is expanded
• centering the map after the resize
• making map and locations variables global.

The jsfiddle is here:

http://jsfiddle.net/Mgp9z/9

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body, #map_canvas { margin: 0; padding: 0; height: 100% }
    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
var map;
      var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
        mapTypeId: google.maps.MapTypeId.ROADMAP };

// CHANGED locations and map now global so they refer to the same thing in both initialize and showElement

var locations = [ 
["a", 40.2, -88.8, "k"], 
  ]; 

var map;

function initialize() {
   map = new google.maps.Map(document.getElementById('map'), { 
  // CHANGED
      zoom: 10, 
  center: new google.maps.LatLng(40.2, -88.8), 
  mapTypeId: google.maps.MapTypeId.ROADMAP
  }); 

  var infowindow = new google.maps.InfoWindow(); 

  var marker, i; 

  for (i = 0; i < locations.length; i++) {   
  marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
    map: map 
  }); 

  google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
    } 
  })(marker, i)); 
  } 

      }
function showElement(layer){
   var myLayer = document.getElementById(layer);
   if(myLayer.style.display=="none"){
   myLayer.style.display="block";
   myLayer.backgroundPosition="top";

   // *** add the trigger here ***
   google.maps.event.trigger(map, 'resize');
   var mylat=locations[0][1];
   var mylng=locations[0][2];
   map.setCenter(new google.maps.LatLng(mylat,mylng));

   } else { 
   myLayer.style.display="none";
   }
}

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
<div class=catlist>
  <table border=0 cellpadding=4>
  <tr>
Lat:   <input type="text" id="mylat" value="40.2">
Lng:   <input type="text" id="mylng" value="-88.8">
      <!-- <td valign=middle><img src="images/plus.png" onclick="javascript:showElement('ed')"></td> -->
  <td valign=middle><a href="#" onclick="javascript:showElement('ed')"><b>Edit GPS 
  Map</b></a></td>
  </tr></table>
  </div>
  <div class="qlist" id="ed" style="display:none;">

  <div id="map" style="width: 500px; height: 250px;"></div>

  </div>
  </body>
</html>

Overlay DIV on Google Maps

Ok, if you manage to get both the #over and #map-canvas2 inside a separate wrapper, you can pull it off pretty easy like so:

• this wrapper that holds both these ids, set it to relative positioned, so that any absolute positioned children, will be bound to this parent;
• the overlay thingy, #over, set it to position: absolute, and if you want it to stretch to its parent height, then either use 100% height, or use top and bottom props.(dont forget to take into account any borders,margins etc.)
• and that should do it.

Check out the example here and hopefully this will help you out.

---

Related Topics