All geek questions in one place

Google Maps v2 div inside or above the map

I just need to put one div (or more) inside or above the map, something like a menu inside the map area,

I need, when I load my map, this div is ...

css can't do it right?

that div contains php code ...

+3
source share
2 answers

Yes, this is easy to do with CSS positioning. Consider the following short example:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
  <title>Google Maps v2 API: Floating Div</title> 
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false"
          type="text/javascript"></script> 
</head> 
<body onunload="GUnload()"> 

  <div style="position: relative;">
    <div id="map_canvas" style="width: 400px; height: 300px;"></div> 
    <div style="position: absolute; top: 0px; 
                width: 100px; height: 100px; background-color: grey;">
      Menu Here
    </div>
  </div>

  <script type="text/javascript"> 
    var map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(38.00, -100.00), 3);
  </script> 
</body>
</html>

Screenshot:

Google Maps v2 API: Floating Div

+3
source

This worked for me in the Google Maps API3.

When my popup menu items now overlay the Google3 Maps API in the correct order.

This is the important css code:

.menudropdown {
  position: fixed;
  z-index:2;
}

#map {
  position: absolute;
  z-index:1;
}
0
source

Source: https://habr.com/ru/post/1754155/

More articles:


All Articles