I create two columns with col-md-8 and col-md-4 with col-md-4 contains my maps.
But I have a problem when I tried fixed map to col-md-4.
function init_map() {
var var_location = new google.maps.LatLng(45.430817, 12.331516);
var var_mapoptions = {
center: var_location,
zoom: 14
};
var var_marker = new google.maps.Marker({
position: var_location,
map: var_map,
title: "Venice"
});
var var_map = new google.maps.Map(document.getElementById("map-container"),
var_mapoptions);
var_marker.setMap(var_map);
}
google.maps.event.addDomListener(window, 'load', init_map);.contact {
position: absolute;
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 0);
top: 800px;
padding: 0 0px 0 0px;
margin: 0;
left: 0%;
}
#map-container { height: 50px }
.service-container {
background: url('http://images.indianexpress.com/2016/05/love-autumn-tree_759_thinkstockphotos-177812216.jpg');
height:1000px;
width: 1000px;
}
.layer {
background-color: rgba(0, 179, 0, 0.6);
width: 100%;
height: 100%;
}<div class="service-container">
<div class="layer">
<div class="contact-maps">
<div class="col-md-8 contact">
<div class="col-md-6">
<div class="col-md-6"></div>
<div class="col-md-6">
<h1>CONTACT</h1>
<h3>CENTRAL OFFICE</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae laborum cum consequuntur assumenda itaque error dolore, molestiae illo fugiat. Illo praesentium ut mollitia dolorem quis vero quisquam culpa, voluptas eos.
</p>
</div>
</div>
<!-- /.col-md-6 -->
<div class="col-md-6">
</div>
</div>
<!-- /.col-md-8 contact -->
<div class="col-md-4">
<div id="map-container"></div>
</div>
<!-- /.col-md-4 -->
</div>
<!-- /contact-maps -->
</div>
<!-- / .layer -->
</div>
<!-- service-container -->I have two question:
Why I was set <div id="map-container"> into col-md-4 but it not show?
My website must responsive, but I must change at top: 800px create blank to another element before this element can appear.
I want it to show like this:
Regarding your first question: First of all, you have to use the Bootstrap grid system properly. BS columns must always be nested in rows (BS grid tutorial).
This would be the Bootstrap conform structure for your case:
<div class="container">
<div class="row">
<div class="col-md-8 contact">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-4">
<div id="map-container"></div>
</div>
</div>
</div>
Your map doesen't shows up, because you haven't loaded the Google Maps JavaScript API.
Do that with the following code:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
You have to request an API key if you haven't so far.
PS: You should ask only one question per question.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments