CODEWITHSUNDEEP
javascripthtmlcssgoogle-maps-api-3
user2791308
user2791308

Reputation:

How to overlay a div on a map

I am currently undergoing a mini web development project of mine and I have ran into a speed bump. At the moment I am using the Google maps API to create a full screen map background to my page. (Refer to code) I am trying to add a div on the top of the map but every time I create a div, when i load the page, i see it for a moment the it disappears? (Im just after an overlaid div with a solid background and a height of 80% and width of 100%)

  <style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0; background-color:#f6f6f6; }
 #map-canvas { 
  height: 100%;
  width:100%;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
      }

</style>
<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=***********&sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-37.8136, 144.9631),
      zoom: 16,
      mapTypeControl: false,
  draggable: false,
  scaleControl: false,
  scrollwheel: false,
      disableDefaultUI: true
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Upvotes: 0

Views: 2908

Answers (3)

Premshankar Tiwari
Premshankar Tiwari

Reputation: 3106

try manipulating your z-indexes of map and div...or better try jquery ui dialog plugin

Upvotes: 1

davidkonrad
davidkonrad

Reputation: 85528

z-index would do it, but you could take advantage of the builtin functionality designed for exactly this, instead of reinventing the wheel. Take a look at Map Controls.

To achieve what you want ("Im just after an overlaid div with a solid background and a height of 80% and width of 100%") :

css :

  #overlay {
      background-color: white;
      height: 80%;
      width: 100%;   
    }

markup :

<div id="overlay"><h2>I am an overlay-div</h2></div>

add the overlay to the map

map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(
   document.getElementById('overlay')
);

see fiddle -> http://jsfiddle.net/M6a7q/

Upvotes: 0

David Ansermot
David Ansermot

Reputation: 6112

Did you tried to size the z-index property of your div to a very high value ?

Upvotes: 1

Related Questions