I'm creating a website that grabs the location input (Origin & Destination) and relays it to the map which in turn would show the path using the MapBox API. So the problem I'm facing here is that how do I grab the input values and convert them to coordinates and show them on the map. Later on, the program will calculate the distance between the two endpoints and put it out there.
Here's my HTML code which contains the input fields:
<!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">
<script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta charset="utf-8">
<title>Distance btw Cities App</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="styling.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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]-->
</head>
<body>
<div class="jumbotron">
<div class="container-fluid">
<h1>Distance between cities App.</h1>
<p>Our app will help you calculate travelling distances.</p>
<form class="form-horizontal">
<div id='geocoder-container' class="form-group">
<label for="from" class="col-xs-2 control-label">From:</label>
<div class="col-xs-10">
<input type="text" id="from" placeholder="Origin" class="form-control">
</div>
</div>
<div class="form-group">
<label for="to" class="col-xs-2 control-label">To:</label>
<div class="col-xs-10">
<input type="text" id="to" placeholder="Destination" class="form-control">
</div>
</div>
</form>
<div class="col-xs-offset-2 col-xs-10">
<button class="btn btn-info btn-lg" onclick="calcRoute();">Submit</button>
</div>
</div>
<div class="container-fluid">
<div id="googleMap">
</div>
<div id="output">
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script
src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css" type="text/css">
<!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise#4/dist/es6-promise.auto.min.js"></script>
<script src="javascript.js"></script>
</body>
</html>
And here's my JS code:
mapboxgl.accessToken = 'Token';
// Get Current Location
navigator.geolocation.getCurrentPosition(successLocation, errorLocation, { enableHighAccuracy: true })
// Live Coordinates
function successLocation(position) {
setupMap([position.coords.longitude, position.coords.latitude])
}
// Default Coordinates if location fails
function errorLocation() {
setupMap([38.189980, 24.023176])
}
// Create Map
function setupMap(center) {
var map = new mapboxgl.Map({
container: 'googleMap',
style: 'mapbox://styles/mapbox/streets-v11',
center: center,
zoom: 12,
})
// Navigation Controls
const nav = new mapboxgl.NavigationControl()
map.addControl(nav)
var geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken });
document.getElementById('from').appendChild(geocoder.onAdd(map))
}
Also, I dunno how to tell the program which input is my origin and which one is the destination. On following this code, . This is really messed up cuz I'm not able to make my input fields as my location finder. Neither this location will reflect on the map. Please someone help me solve this issue, It's really frustrating.
Related
I am using Google App Script to build a little web app. I'm just at the very start and the page charges well on both Chrome and Firefox but I can't get anything to happen on click of the log in button. I don't get any log to the logger, neither do I get the alert to pop up. Does anyone have any idea why?
This it the HTML of HTML_StockManagementLogInPage:
<!DOCTYPE html>
<html>
<head>
<base target = "_top">
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/yourscript.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<center><h4> Stock Management Log In </h4></center>
<div class="row">
<center>
<div class="input-field col s3"></div>
<div class="input-field col s3">
<input id="first_name" type="text" class="validate">
<label for="first_name">First Name</label>
</div>
<div class="input-field col s3">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
</center>
</div> <!-- END OF ROW -->
<div class="row">
<center><button class="btn waves-effect waves-light" type="submit" id="LogInButton">Log In
<i class="material-icons right">send</i>
</button></center>
</div> <!-- END OF ROW -->
</div> <!-- END OF CONTAINER -->
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.getElementByID("LogInButton").addEventListener("click",LogInClicked);
function LogInClicked(){
var UserName1 = {};
UserName1.FirstName = document.getElementByID("first_name").value;
UserName1.LastName = document.getElementByID("last_name").value;
alert(UserName1.FirstName + " " + UserName1.LastName);
google.script.run.UserLoggedIn(UserName1);
} // END FUNCTION LOGIN
</script>
</body>
</html>
And this is the code:
function doGet() {
return HtmlService.createTemplateFromFile("HTML_StockManagementLogInPage").evaluate();
//return HtmlService.createHtmlOutputFromFile("HTML_StockManagementInterfacePage");
}
function InsertHTMLScript(HTMLFilename) {
return HtmlService.createHtmlOutputFromFile(HTMLFilename).getContent();
}
function UserLoggedIn(UserName){
logger.log(UserName.FirstName + " clicked the button");
return HtmlService.createTemplateFromFile("HTML_StockManagementMenu").evaluate();
}
And just in case, this is the HTML for HTML_StockManagementMenu, just displaying a title for now:
<!DOCTYPE html>
<html>
<head>
<base target = "_top">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="container">
<h1> Stock Management Menu </h1>
</div> <!-- END OF CONTAINER -->
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
I tried earlier to break down my code with the fuction InsertHTMLScript that I have written in the code, inserting <?!= InsertHTMLScript("HTML_CSS"); ?> into the HTML code and it didn't work either. I don't known if it's related but I just resolve not to use it to make things easier.
Thank you in advance
You misspelled getElementById
You have:
document.getElementByID('LogInButton');
It should be:
document.getElementById('LogInButton');
Here is the official docs: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
<!DOCTYPE html>
<!-- Html -->
<html lang="en">
<!-- Head -->
<head>
<title>Coming soon</title>
<!-- Meta tags -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Meta tags -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" /><!-- stylesheet -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script><!-- Supportive-JavaScript -->
<!--fonts-->
<link href="//fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext" rel="stylesheet">
<!--/fonts-->
</head>
<!-- //Head -->
<!-- Body -->
<body>
<!-- main-section -->
<div class="container clock">
<div class="content">
<div id="large-header" class="large-header">
<canvas id="myCanvas"></canvas>
<div class="main-title">
<h1>Temperature Sensor <br /> coming soon</h1>
<div class="between"></div>
<p class="agileinfo txt-center"> © Janneke 2018</p>
</div>
</div>
</div>
</div>
<!-- /main-section -->
<!-- Counter required files -->
<link rel='stylesheet' href='css/dscountdown.css' type='text/css' media='all' />
<script type="text/javascript" src="js/dscountdown.min.js"></script>
<script src="js/clock.js"></script>
<script>
jQuery(document).ready(function($){
$('.between').dsCountDown({
endDate: new Date("Januari 17, 2018 17:30:00"),
theme: 'black'
});
});
</script>
<!-- //Counter required files -->
<!-- particles effect -->
<script src="js/particles.min.js"></script>
<script>
window.onload = function() {
Particles.init({
selector: '#myCanvas',
color: '#6a446b',
connectParticles: true,
minDistance: 70
});
};
</script>
<!-- //particles effect -->
</body>
<!-- //Body -->
</html>
<!-- //Html -->
How can i get a redirect in this code, tried alot of solutions from the internet even with the setTimeout, but when adding a setTimeout the page will only show the text Temperature Sensor coming soon but it wont show the time and date anymore, the page has an particle effect but i need to know how to get an redirect in the countdown part.
Anybody that can gelp me to get it redirecting to a new page
From what I can gather is that you are struggling to redirect your page at the end of the countdown?
You've missed a property method onFinish in your countdown script. It goes like this:
onFinish: function(){
window.location = "https://www.google.com";
}
I've set up a sample application based on your code here, which redirects to google after 1 minute: https://jsfiddle.net/fatgamer85/a6dhjs2y/1/
Hope this helps?
It's simple, you can use the onFinish option of the dsCountdown plugin.
$('.between').dsCountDown({
endDate: new Date("Januari 17, 2018 17:30:00"),
theme: 'black',
onFinish: function() {
window.location.assign('http://your-page.it');
}
});
I found this option (onFinish) in the dsCountdown library, here:
https://github.com/iwayanwirka/dscountdown/blob/master/dscountdown.js
A piece of code of how I do it, I hope it's going to help you.
window.setTimeout(function(){
// Move to a new location or you can do something else
window.location.href = "https://www.google.co.in";
}, 5000);
I use bootstrap and have a simple layout including a button. I tried the code solution from here but it is not working. This is my code, it is not even showing 'test' after clicking the search button.
<!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">
<!-- Die drei oberen meta tags *müssen* zuerst im Head-Tag angegeben werden; alle anderen Tags können anschließend eingefügt werden -->
<title>Search</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<h1>Welcome!</h1>
</br>
<button id="search" type="button" class="btn btn-primary">Suchen</button>
<p><br/></p>
<p id="output"></p>
</div>
<script type="text/javascript">
$('#search').on('click', function (e) {
document.getElementById('#output').innerHTML = "test";
var EventSearch = require("facebook-events-by-location-core");
var es = new EventSearch({
"lat": 40.710803,
"lng": -73.964040
});
es.search().then(function (events) {
console.log(JSON.stringify(events));
document.getElementById('output').innerHTML = JSON.stringify(events);
}).catch(function (error) {
console.error(JSON.stringify(error));
});
})
</script>
<!-- jQuery (notwendig für Bootstraps JavaScript plugins) -->
<script src="js/jquery-3.2.1.min"></script>
<!-- Alle kompilierten plugins einbeziehen -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
When using document.getElementByid(), you dont need the # before the id.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!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">
<!-- Die drei oberen meta tags *müssen* zuerst im Head-Tag angegeben werden; alle anderen Tags können anschließend eingefügt werden -->
<title>Search</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<h1>Welcome!</h1>
</br>
<button id="search" type="button" class="btn btn-primary">Suchen</button>
<p><br/></p>
<p id="output"></p>
</div>
<script type="text/javascript">
$('#search').on('click', function (e) {
document.getElementById('output').innerHTML = "test";
// I removed the event search code because I do not have the files and it was breaking the example.
})
</script>
<!-- jQuery (notwendig für Bootstraps JavaScript plugins) -->
<script src="js/jquery-3.2.1.min"></script>
<!-- Alle kompilierten plugins einbeziehen -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
First of all, don't use the "#" sign when using document.getElementById. Secondly, you need to add the "require" reference.
Check the console message:
$('#search').on('click', function (e) {
document.getElementById('output').innerHTML = "test";
var EventSearch = require("facebook-events-by-location-core");
var es = new EventSearch({
"lat": 40.710803,
"lng": -73.964040
});
es.search().then(function (events) {
console.log(JSON.stringify(events));
document.getElementById('output').innerHTML = JSON.stringify(events);
}).catch(function (error) {
console.error(JSON.stringify(error));
});
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<h1>Welcome!</h1>
</br>
<button id="search" type="button" class="btn btn-primary">Suchen</button>
<p><br/></p>
<p id="output"></p>
</div>
I'm new to HTML/CSS, I recently purchased a bootstrap theme and I'm trying to create my own homepage using segments of HTML code they provided.
I copy/pasted a section of code and the file paths for the JS but it doesn't work at all. The assets(text, images, videos) all appear but none of it is styled and it's all static. Neither the CSS nor the JS is working on that segment.
This is a live demo of how it's supposed to look:
http://htmlstream.com/preview/unify-v1.7/index.html
This is how mine looks currently:
http://i.gyazo.com/7f8caf3b13c10c3dbfd340afd3fcb1db.png
This is the HTML segment for the slider:
<!--=== Slider ===-->
<div class="slider-inner">
<div id="da-slider" class="da-slider">
<div class="da-slide">
<h2><i>CLEAN & FRESH</i> <br /> <i>FULLY RESPONSIVE</i> <br /> <i>DESIGN</i></h2>
<p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i> <br /> <i>veniam omnis </i></p>
<div class="da-img"><img class="img-responsive" src="assets/plugins/parallax-slider/img/1.png" alt=""></div>
</div>
<div class="da-slide">
<h2><i>RESPONSIVE VIDEO</i> <br /> <i>SUPPORT AND</i> <br /> <i>MANY MORE</i></h2>
<p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i></p>
<div class="da-img">
<iframe src="http://player.vimeo.com/video/47911018" width="530" height="300" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
<div class="da-slide">
<h2><i>USING BEST WEB</i> <br /> <i>SOLUTIONS WITH</i> <br /> <i>HTML5/CSS3</i></h2>
<p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i> <br /> <i>veniam omnis </i></p>
<div class="da-img"><img src="assets/plugins/parallax-slider/img/html5andcss3.png" alt="image01" /></div>
</div>
<div class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</div>
</div>
</div><!--/slider-->
<!--=== End Slider ===-->
This is the HEAD section of my HTML file:
<head>
<title>Ideal Improvements South West LTD | Home</title>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Web Fonts -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin">
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS Header and Footer -->
<link rel="stylesheet" href="assets/css/headers/header-v3.css">
<link rel="stylesheet" href="assets/css/footers/footer-v1.css">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/animate.css">
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/theme-colors/default.css" />
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
This is the JS section at the bottom of my file:
<!-- JS Global Compulsory -->
<script type="text/javascript" src="assets/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- JS Implementing Plugins -->
<script type="text/javascript" src="assets/plugins/back-to-top.js"></script>
<script type="text/javascript" src="assets/plugins/smoothScroll.js"></script>
<script type="text/javascript" src="assets/plugins/parallax-slider/js/modernizr.js"></script>
<script type="text/javascript" src="assets/plugins/parallax-slider/js/jquery.cslider.js"></script>
<script type="text/javascript" src="assets/plugins/owl-carousel/owl-carousel/owl.carousel.js"></script>
<!-- JS Customization -->
<script type="text/javascript" src="assets/js/custom.js"></script>
<!-- JS Page Level -->
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/plugins/owl-carousel.js"></script>
<script type="text/javascript" src="assets/js/plugins/parallax-slider.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
App.init();
OwlCarousel.initOwlCarousel();
StyleSwitcher.initStyleSwitcher();
ParallaxSlider.initParallaxSlider();
});
</script>
<!--[if lt IE 9]>
<script src="assets/plugins/respond.js"></script>
<script src="assets/plugins/html5shiv.js"></script>
<script src="assets/plugins/placeholder-IE-fixes.js"></script>
<![endif]-->
I get 7 errors in the chrome dev tools console. 4 are "Uncaught syntaxerror: unexpected token illegal"
2 are "failed to load resource: err_cache_missing and err_file_not_found (The cache one links to the vimeo video link and the file not found links to google fonts.)
The last is "uncaught referenceerror: style switcher is not defined" I believe this is to do with the way I copied some of the code, if you look at the live demo site it has a style switcher on the top right corner.
I took one of the demo html files and put it into my site director and it accesses the JS and CSS fine using the same file paths.
hello you seen your code properly i think something wrong
<script type="text/javascript" src="assets/plugins/parallax- slider/js/modernizr.js"></script>
Space between js name i think this is problem.
or anything else please share your website link or demo code slider
In a twitter bootstrap page, I have a 12 wide column inside a row. Above the 12 wide column is the navbar. In the column is an open layers map and I need that column to take up the entire vertical space that remains under the navbar. This does not work. the map div shows up with 0px height. The only work around I found online is to add a width of 100% on html, body and the map div. that makes the map div span the entire document not just the column it is in. Thanks for any helpful pointers.
bootstrap version : 3.0.3
ol version: 2.13.1
This does not help http://openlayers.org/dev/examples/bootstrap.html
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Fixed Top Navbar Example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body class="">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Nav</a>
</div>
</nav>
<div style="padding: 0 15px">
<div class="row" style="">
<div class="col col-md-12">
<div id="mapDiv"></div>
</div>
</div>
</div>
<!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/js/OpenLayers/OpenLayers.debug.js"></script>
<script src="/js/jquery-1.10.2.js"></script>
<script src="/bootstrap/js/bootstrap.js"></script>
<script src="/view/home/presenter.js"></script>
<script>
(function () {
console || console.log(mapDiv);
var osm = new OpenLayers.Layer.OSM();
var map = new OpenLayers.Map({
div: "mapDiv",
layers:[osm]
});
map.zoomToMaxExtent();
})();
</script>
</body>
</html>
The example you refer to use Bootstrap version 2.2.1. your are using Bootstrap 3.0.3. There are many changes between version 2 and 3 of Twitter's Bootstrap, see also: Updating Bootstrap to version 3 - what do I have to do?
In your case start reading: http://getbootstrap.com/getting-started/#third-parties
The Openlayers' javascript add a class olMap to <div id="mapDiv"></div> use CSS to set it's height / width, like:
div.olMap
{
cursor: default;
height: 500px;
margin: 0 !important;
padding: 0 !important;
width: 100%;
z-index: 0;
}
NB your html for the row and column looks strange, try:
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="mapDiv"></div>
</div>
</div>
</div>