CODEWITHSUNDEEP
htmlcsswordpressgoogle-maps
Richard Son
Richard Son

Reputation: 31

Put a div on top of a googlemap?

Is there a plugin to do this or method to do this?

See, I have this site and if you scroll to the bottom, you'll see a map. What I want to do is to place a small box on top of the map, just like an overlay that will contain contact information.

Edit: Box will be on top of the watery part. :)

Upvotes: 0

Views: 181

Answers (2)

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

You can try this:

<div class="section" id="contact">
    <div style="width:100px; height:200px; background:#ccc;z-index:999999;position:absolute;">test</div>
</div>

Add a div after your section div as my above code...and position set as you want from top and left..(eg: Add this - top:"you need"; left:"you need";)

Good luck

Upvotes: 1

Max Bates
Max Bates

Reputation: 1278

Something like this (without using inline styles obviously):

<div id="googleMapContainer" style="height: 400px; position: relative;">
    <div id="overlay" style="height: 300px; width: 25%; max-width: 340px; position: absolute; top: 50px; left: 0px; background-color: rgba(0, 0, 0, 0.7); box-sizing: border-box; padding: 20px; color: #ffffff;">
        <p><a style="color: #f1f1f1;">Here's a link in your overlay</a></p>
    </div>
    <div class="google_map" id="map_canvas" style="width: 100%; height: 400px; margin: 0;"></div>
</div>

Upvotes: 0

Related Questions