I have tried everything. I can't get this map to load upon the contact tab being active. No one can figure out why this is not working for me. Can you? I'm going to post all of my code because taking snippets has not brought about a solution. Please excuse my unfinished code and formatting. The script for initializing the map is in the head and the contact tab is at the bottom of the html page.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lobster|Oswald|Titillium Web|Roboto ">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var myLatLng = {lat: 64.8370761, lng: -147.697845};
var mapOptions = {
center: myLatLng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: "Nelson's Photography"
});
}
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
initialize();
});
</script>
</head>
<body>
<nav class="navbardos navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="/images/titlegraphic.jpg" class="logo"></a>
</div>
<ul class="nav navbar-navdos">
<li><a class="number">(907)452-3116</a></li>
<li><a>606 Bentley Drive | Fairbanks, AK</a></li>
</ul>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#about">About</a></li>
<li><a data-toggle="pill" href="#services">Services</a></li>
<li><a data-toggle="pill" href="#portfolio">Portfolio</a></li>
<li><a data-toggle="pill" href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="/images/10x10reflect-lg.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Music Production Studio</h1>
<p></p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn More</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="/images/11830247_10207115344978900_1142161344_n.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Beat Gallery</h1>
<p></p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Listen</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="/images/TMPstudio.jpg" alt="Third slide" style="width: 600px;">
<div class="container">
<div class="carousel-caption">
<h1>Studio Services</h1>
<p></p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Check-It Out</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.carousel -->
</div>
<div id="about" class="tab-pane fade">
<img src="images/entry.jpg" id="AboutPic1">
<h1></h1>
<p id="lead">
Use this document as a way to quickly start any new project.<br>
All you get is this text and a mostly barebones HTML document.
</p>
</div>
<div id="services" class="tab-pane fade">
<h1>Services</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div id="portfolio" class="tab-pane fade">
<h1>Portfolio</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div id="contact" class="tab-pane fade">
<div id="map"></div>
<div id="contact-content">
<h1>We're looking forward to<br>
hearing from you!</h1><br>
<h2 style="text-decoration: underline">Phone Number:</h2>
<h2>edited</h2><br>
<h2 style="text-decoration: underline">Email:</h2>
<h2>edited</h2><br>
<h2 style="text-decoration: underline">Address:</h2>
<h2>
edited
</h2>
</div>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
CSS:
body {
padding-top: 50px;
background-color: #777
}
h1, h2, h3 {
margin-top: 0;
margin-bottom: 0;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
.navbar.navbar-inverse.navbar-fixed-top {
position: absolute;
background-color: #336699;
border: 0px;
height: 51px;
margin-top: 120px;
}
/*.nav.nav-pills{
}*/
.nav.nav-pills li a{
color: white;
font-family: Roboto, Titillium Web, Arial, Verdana, sans-serif;
padding-left: 76px;
padding-right: 76px;
font-size: 22px;
margin-top: 0px;
}
.nav-pills li a:hover{
color: grey;
}
.navbardos.navbar-inverse.navbar-fixed-top {
position: absolute;
background-color: black;
border: 0px;
height: 120px;
}
.nav.navbar-navdos{
float: right;
font-size: 13px;
margin-top: 30px;
margin-right: 24px;
width: 200px;
}
.nav.navbar-navdos li a{
padding:0px;
color: white;
}
.nav.navbar-navdos li a:hover{
background-color: black;
}
.number {
font-size: 30px;
}
.logo {
width: 400px;
margin-left: -130px;
}
#home{
margin-top: 100px;
position: absolute;
}
#about{
margin-top: 150px;
width:100%
}
#services{
margin-top: 150px;
position: absolute;
}
#portfolio{
margin-top: 150px;
position: absolute;
}
#contact{
font-family: Titillium Web, Arial, Verdana, sans-serif;
color: #E8E8E8;
}
#contact-content{
position: absolute;
float: left;
margin-top: 176px;
margin-left: 100px;
}
#map {
margin-left: 650px;
margin-top: 180px;
position: absolute;
float: right;
width: 550px;
height: 400px;
}
/* Carousel base class */
.carousel {
margin-left: 30px;
height: 500px;
width: 100%;
margin-bottom: 60px;
margin-top: 20px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
height: 500px;
}
.btn.btn-lg.btn-primary {
background-color: #FF9900 ;
}
.btn.btn-lg.btn-primary:hover {
background-color: #B22400 ;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 800px;
background-color: #777;
}
.carousel-inner > .item > img {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
height: 800px;
}
.carousel-control.right, .carousel-control.left {
background-image:none;
margin-top: 200px;
}
When I write the code this way, the map will load when clicked so I know its not the bootstrap library loading improperly:
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var myLatLng = {lat: 64.8370761, lng: -147.697845};
var mapOptions = {
center: myLatLng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: "Nelson's Photography"
});
}
google.maps.event.addDomListener(window, 'click', initialize);
</script>
