CODEWITHSUNDEEP
csshtmlmaps
user3376521
user3376521

Reputation: 117

Have a div with a googlemaps api map canvas and div background img, having trouble displaying the image

I have a div on a website I am working on that contains a google maps map canvas, and above it I am trying to display an image as a div with a background image. However unless I explicitly provide dimensions of the background image a.g. width:300px; height:200px; it wont display at all, it seems like the maps canvas automatically displays over it if I attempt to give the image div relative dimensions.

Heres a jfiddle: http://jsfiddle.net/46andtool/vq2pf/1/ I made the background grey so you can see how the map canvas and the image leave the parent div. Heres the bit of code for the div container and the map canvas and div image:

<div id="rightside">
 <h1>Where To Find Us</h1>
 <a href="img/buildingpic.jpg"><div id="buildingpic"></div></a>
 <br>   
  <div id="map_canvas">
        <script>
            function initialize() {

                var myLatlng = new google.maps.LatLng(39.960478, -75.603013);
                var mapOptions = {
                center: myLatlng,
                zoom: 19,
                mapTypeControl: true,
                mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                },
                zoomControl: true,
                zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
                position: google.maps.ControlPosition.LEFT_TOP
                },
                mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions, marker);

                var marker = new google.maps.Marker({
                position: myLatlng,
                 map: map
                });
             }

          google.maps.event.addDomListener(window, 'load', initialize);
     </script>
</div> 
 <p id="location">information for business<br> address <br> and <br> telephone number</p>
</div>
</div>

heres the css:

#rightside {
width: 20%;
padding: 1em 0px;
display: inline-block;
background: #FFFFFF;
margin: 10px 5px 8px 10px;
border: none;
}

#rightside h1 {
 width: 90%;
 margin: 8px auto ;
 background: #FF0000;
 box-shadow: 1px 1px 1px #888888;
 text-shadow: #CCC 1px 1px 1px;
 font-size: 1.35em; 
 padding: 10px 2%;
 color: #FFFFFF; 

}

#buildingpic {
background-image: url(../img/buildingpicresize.jpg);
display: inline-block;
width: 300px;
height: 200px;
margin: 0 auto;
margin-top: 5px;
border-radius: 1px;
border: 1px 1px 1px 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 2px 2px 2px rgba(20, 20, 20, 0.2);
}

#location {
color: #878787;
font-weight: bold;
}

#map_canvas { 
display: block; 
width: 300px; 
height: 300px; 
padding: 10px; 
margin: 5px; 
padding-bottom:15px; 
background-color: #CCC; 
border-radius: 1px;
border: 1px 1px 1px 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 1px 1px 1px rgba(20, 20, 20, 0.2);
}

/* overrides the css max-width 100% browser reset("normalizer") otherwise googlemaps zoom in/out buttons dont display properly*/
#map_canvas img{
max-width: none;
}

Upvotes: 0

Views: 1042

Answers (1)

Ra Mon
Ra Mon

Reputation: 127

I cant see the full code, but in your css file you never use the z-index property. I can tell you it is possible with it. Here is a link where you can find more information about the z-index: klick here

Here is an example : http://jsfiddle.net/x8dSP/2841/

z-index: 2; // allows to draw over the map

i hope that will help you

Upvotes: 1

Related Questions