Im working on a webpage that should look like this: https://imgur.com/a/eW3gK
And I'm trying to use bootstrap grids but the map is just not resizing and shows up right below the columns and it's not working.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="~/css/custom.css">
<script src="~/js/googleMap.js"></script>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div class="row">
<div class="col-md-6">Google Maps</div>
</div>
<div class="row">
<div class="col-md-6">Contact Information</div>
<div class="col-md-6">
<div id="map"></div>
</div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQKR41AqiPXn-2WfLS-giuXPLWpnFxLjk&callback=initMap"></script>
</body>
</html>
CSS
#map {
width: 100%;
height: 400px;
background-color: grey;
}
JS
function initMap() {
var uluru = { lat: 51.957244, lng: 4.570751 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
How can I use the Google Maps with the Bootstrap grid according to the mockup?
Check this working example http://jsbin.com/capetay/edit?output
Here is the updated html, Map and the Contact Info container should be in the same row
<div class="row body">
<div class="col-sm-6">
<div id="map"></div>
</div>
<div class="col-sm-6 text-center">
<h4>Contact Information</h4>
<ul>
<li>ABC</li>
</ul>
</div>
</div>
Here is the code snippet as well: (try running in full screen)
function initMap() {
var uluru = { lat: 51.957244, lng: 4.570751 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
#map {
width: 100%;
height: 400px;
background-color: grey;
}
.row.body > div {
padding: 30px;
border: 1px solid
}
.with-border h3 {
border: 1px solid black;
max-width: 300px;
margin: auto auto 20px auto;
padding: 15px;
}
ul {
list-style: none;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<title>Google Maps API in Bootstrap</title>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div class="row">
<div class="col-md-12 text-center with-border">
<h3>Google Maps</h3>
</div>
</div>
<div class="row body">
<div class="col-sm-6">
<div id="map"></div>
</div>
<div class="col-sm-6 text-center">
<h4>Contact Information</h4>
<ul>
<li>ABC</li>
</ul>
</div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&callback=initMap"></script>
</body>
</html>
Related
Good day, i'm hoping someone can help, i'm trying to recreate the effect on this page. About half way down the website where it says Stream your music/sports/podcasts etc
https://store.google.com/us/product/google_nest_mini?hl=en-US
I have added the bootstrap code that i have come up with, not sure if it will help but anyway.
It's not quite achieving the desired effect.
Thanks
here is a jsfiddle
https://jsfiddle.net/ev7y2tuL/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid text-light" style="height:100vh;background:#001d2f;">
<div class="row h-100">
</div>
</div>
<script>
$(window).on("load",function() {
$(window).scroll(function() {
var windowBottom = $(this).scrollTop() + $(this).innerHeight();
$(".fade").each(function() {
/* Check the location of each desired element */
var objectBottom = $(this).offset().top + $(this).outerHeight();
/* If the element is completely within bounds of the window, fade it in */
if (objectBottom < windowBottom) { //object comes into view (scrolling down)
if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
} else { //object goes out of view (scrolling up)
if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
}
});
}).scroll(); //invoke scroll-handler on page-load
});
</script>
<style>
.make-me-sticky2 {
position: -webkit-sticky;
position: sticky;
top: 0px;
padding: 0 15px;
/* z-index: 9999; */
}
.make-me-sticky {
position: -webkit-sticky;
position: sticky;
top: 55%;
padding: 0 15px;
}
.fade {
margin: 50px;
padding: 50px;
opacity: 1;
}
</style>
<div class="container-fluid text-light" style="background:#001d2f;">
<div class="row ">
<div class="col-md-12 text-center" style="background:#000;">
<div class="make-me-sticky2">
<div style="background:#f0a;height:45vh;display:flex;">
</div>
<h1>LISTEN TO YOUR</h1>
</div>
<div class="make-me-sticky">
<div class="col-md-12 my-auto text-center" style="position: relative;height:70vh; ">
<h2 class="fade">1 MUSIC</h2>
</div>
</div>
<div class="make-me-sticky">
<div class="col-md-12 my-auto text-center" style="position: relative;height:70vh; ">
<h2 class="fade">2 NEWS</h2>
</div>
</div>
<div class="make-me-sticky">
<div class="col-md-12 my-auto text-center" style="position: relative;height:70vh; ">
<h2 class="fade">3 PODCASTS</h2>
</div>
</div>
</div>
<div class="col-md-12 text-center">
<h2 class="fade">Play music and entertainment from your favorite apps with your voice</h2>
</div>
</div>
</div>
</body>
I'm a absolute beginner to Tizen. I want to make a little app. For this app, I want to add "More Options". It's not working and I really don't know. I followed each step in the documentation (I also followed this: https://developer.tizen.org/ko/development/guides/web-application/user-interface/tizen-advanced-ui/applications-circular-ui/implementing-more-options) but this didn't help me either. Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>List</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<link rel="stylesheet" href="css/more_options.css">
</head>
<body>
<div id="moreoptionsPage" class="ui-page">
<header class="ui-header ui-has-more">
<h2 class="ui-title">Einkaufsliste</h2>
<button type="button" class="ui-more ui-icon-overflow">More Options</button>
</header>
<div class="ui-content">
<ul class="shopping_list ul-listview">
</ul>
</div>
<!--Rectangular profile-->
<div id="moreoptionsPopup" class="ui-popup" data-transition="slideup">
<div class="ui-popup-header">Options</div>
<div class="ui-popup-content">
<ul class="ui-listview">
<li>Hinzufügen</li>
<li>Entfernen</li>
</ul>
</div>
</div>
<!--Circular profile-->
<div id="moreoptionsDrawer" class="ui-drawer" data-drawer-target="#moreoptionsPage" data-position="right" data-enable="true" data-drag-edge="1">
<div id="selector" class="ui-selector">
<div class="ui-item add-icon" data-title="Hinzufügen"></div>
<div class="ui-item remove-icon" data-title="Entfernen"></div>
</div>
</div>
</div>
</body>
<script src="lib/tau/wearable/js/tau.min.js"></script>
<script src="js/circle-helper.js"></script>
<script src="js/app.js"></script>
<script src="js/lowBatteryCheck.js"></script>
<script src="js/more_options.js"></script>
</html>
here's my more_options.js:
(function() {
var page = document.querySelector('#moreoptionsPage'),
popup = page.querySelector('#moreoptionsPopup'),
handler = page.querySelector('.ui-more'),
drawer = page.querySelector('#moreoptionsDrawer'),
selector = page.querySelector('#selector'),
helper,
clickHandlerBound;
function clickHandler(event) {
alert("calling");
if (tau.support.shape.circle) {
tau.openPopup(popupCircle);
} else {
tau.openPopup(popup);
}
}
page.addEventListener('pagebeforeshow', function() {
if (tau.support.shape.circle) {
helper = tau.helper.DrawerMoreStyle.create(drawer, {
handler: '.drawer-handler'
});
} else {
/* Shape is square */
clickHandlerBound = clickHandler.bind(null);
handler.addEventListener('click', clickHandlerBound);
}
});
page.addEventListener('pagebeforehide', function() {
if (tau.support.shape.circle) {
handler.removeEventListener('click', clickHandlerBound);
helper.destroy();
}
});
})();
and here's my more_options.css:
#moreoptionsDrawer {
display: none;
}
#media all and (-tizen-geometric-shape: circle) {
#moreoptionsDrawer {
display: block;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 100%;
}
#moreoptionsPopup {
display: none;
}
}
I get errors when using tau.helper.DrawerMoreStyle.create and in the examples on Github it is not used at all. Check it out:
https://github.com/Samsung/TAU/tree/tau_1.2/examples/wearable/UIComponents/contents/assistviews
I am trying to get on my website the gmaps with few markers but i am getting the grey screen or partially grey screen.Before, I used google maps API the same way and everythings works fine. If you can help me I would be grateful.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Zadanie 7</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY"></script>
</head>
<body>
<div class="container-fluid" id="map" style="height: 500px;">
</div>
<div class="container-fluid">
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Zadanie 6 Martin Kranec</h4>
<ul class="nav nav-pills nav-stacked">
<li>Prvá Stránka</li>
<li>Druhá Stránka</li>
<li class="active">Tretia Stránka</li>
</ul><br>
</div>
<div class="container-fluid">
<div class='container-fluid'><div class='table-responsive'><table class='table'><thead><tr><th>Vlajka</th><th>Štát</th><th>Počet Navštevníkov</th></tr></thead><tbody><tr><td>World</td><td>World</td><td>2</td></tr><tr><td><img class='flag' src='http://www.geonames.org/flags/x/sk.gif'></td><td><a href='countrystatistics.php?countrycode=sk'>Slovensko</a></td><td>2</td></tr></tbody></table></div></div> </div>
</div>
</div>
<footer class="container-fluid">
<p>©Martin Kranec Webové technológie</p>
</footer>
<script type='text/javascript'>
var lat=[];
var lon=[];
lat.push(48.15);
lon.push(17.1167);
lat.push(48.1704);
lon.push(17.4209);
</script>
<script>
function initMap() {
//alert(lat[1]);
var mapProp = {
center: new google.maps.LatLng(89, -25),
zoom: 4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
var count = lat.length;
for (var i = 0; i < count; i++) {
var myLatLng = {lat: lat[i], lng: lon[i]};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: ''
});
}
}
initMap();
//initMap();
</script>
<!--<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=initMap"></script>-->
</body>
</html>
and here is my website where I work on this project http://147.175.98.165/zadanie7/thirdpage.php
Google maps has a lot of race conditions. I use this code a lot to display them instead. This code should be in a ready event like jquery ready.
new Promise(function (resolve, reject) {
if (!document.getElementById('google-maps')) {
var fileref = document.createElement('script');
fileref.setAttribute("type", "text/javascript");
var link = "https://maps.googleapis.com/maps/api/js?key=AIzaSyDPAizH-vug5nDhwYi0C5Km-pCiQRx7wpY&callback=mapsFinishedLoading";
fileref.setAttribute("async", "async");
fileref.setAttribute("defer", "defer");
fileref.setAttribute("src", link);
fileref.setAttribute("id", 'google-maps');
window.mapsFinishedLoading = resolve;
document.getElementsByTagName("body")[0].appendChild(fileref);
} else {
resolve();
}
}).then(function (result) {
//Your map should be available now
mapOptions={};//put your options here
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
});
Make sure your map div is visible before calling
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
I created a simple app for Android. I have an error: "script error : $jq('#map'). panTo is not a function"
I tried so many changes but the error remains. where am I wrong?
Thanks in advance.
The code is:
<script>
//Called after application is started.
function OnStart()
{
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, {
maxZoom: 18,
attribution: osmAttrib
});
var map = L.map('map').setView([0, 0], 2).addLayer(osm);
marker= L.marker(map.getCenter()).addTo(map)//.bindPopup("<b>Actual Position</b>").openPopup();
loc = app.CreateLocator( "GPS,Network" );
loc.SetOnChange( loc_OnChange );
loc.SetRate( 0.2 ); //10 seconds.
loc.Start();
sns = app.CreateSensor( "Accelerometer" );
sns.SetOnChange( sns_OnChange );
sns.Start();
}
//Called when we get a change in location.
var $jq = jQuery.noConflict();
function loc_OnChange( data )
{
$jq('#field_GPS').text( data.provider);
$jq('#field_GPS').append("<br>Lat "+data.latitude+", Lng "+data.longitude
+", Alt "+data.altitude);
$jq('#field_GPS').append("<br>Spd "+data.speed+", Bear "+data.bearing
+", Accu "+data.accuracy);
marker.setLatLng([data.latitude, data.longitude ]).update();
$jq('#map').panTo(marker.getLatLng, 8, {animation: true});
// map.panTo([50, 30]);
//$('#map').fitBounds(marker.getBounds());
}
function sns_OnChange( x, y, z, time )
{
$jq('#field_ACC').text( "x="+x + "\n y="+y + "\n z="+z );
}
</script>
<html>
<head>
<meta name="viewport" content="width=device-width">
<script src='file:///android_asset/app.js'></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.0.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet#1.0.3/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.3.js'></script>
<script type='text/javascript' src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
//<script type="text/javascript" src="http://gc.kis.scr.kaspersky-labs.com/1B74BD89-2A22-4B93-B451-1C9E1052A0EC/main.js" charset="UTF-8"></script>
//<script src="/vendor/leaflet/addons/leaflet.markercluster.js"></script>
//<script src="/vendor/leaflet/addons/leaflet.hash.js"></script>
//<script src="/vendor/leaflet/addons/leaflet.makimarkers.js"></script>
//<script src="/vendor/leaflet/addons/leaflet.listmarkers.min.js"></script>
//<link rel="stylesheet" href="/vendor/leaflet/addons/css/leaflet.markercluster.css" />
</head>
<style>
body { background-color: #ffffff; }
.hello
{
font-size: 42;
width: 100%;
margin-top: 2em;
text-align: center;
color: blue;
}
#map {
width: 100%;
height: 400px;
}
</style>
<body onload="app.Start()">
<div data-role="page">
<div data-role="header">
<h1 style="text-align:center;">Traking Sensor</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<div id="field_GPS">GPS GOES HERE</div>
<div id="field_ACC" style="color:#0000FF">ACCELEROMETER GOES HERE</div>
<div id='map'></div>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4 style="text-align:center;">Ing. Marco Salvatori</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
panTo is a method on Leaflet map instances, but you are using it as a jQuery method - $jq('#map').panTo. You should just be using map.panTo.
Please see http://leafletjs.com/reference-1.0.3.html#map-panto for full documentation on this and other Leaflet methods.
I am trying to add google maps for my form, so after they enter the address they can view map and after that maps latitude and longitude submitted to the database. So far I couldn't implement it. I tried it on jsfiddle and it worked. But when i try to add to the page it not working.
http://jsfiddle.net/pborreli/pJgyu/
Here is the full page.
<!DOCTYPE html>
<htmllang-"en">
<head>
<meta charset="utf-8">
<title>My First Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/prettify.css" rel="stylesheet">
<!--<link href="css/docs.css" rel="stylesheet">-->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
$("#address").change(function() {
var geocoder = new google.maps.Geocoder();
var add = $("#address").val();
geocoder.geocode( { 'address': add}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var map;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
};
});
</script>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">My First Guide</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Write a review</li>
<li>Talk</li>
<li>Events</li>
<li>
<form class="navbar-search pull-left">
<!--You can put class="search-query" too.-->
<input type="text" class=".navbar-search" placeholder="Search">
</form>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- div container -->
</div><!-- div navbar-inner -->
</div><!-- navbar navbar-fixed-top -->
<div class="container">
<form class="form-horizontal">
<fieldset>
<legend>Submit Business Place</legend>
<div class="control-group">
<label class="control-label" for="input01">Business Name</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Please specify the name of business.(May
be it is a brand name)</p><br />
</div>
<div class="control-group">
<label class="control-label" for="input01">Address</label>
<div class="controls">
<input type="text" class="input-xlarge" id="ad">
<p class="help-block">To use lines please specify
‹br/› tag.</p><br/>
<div id="map"></div>
</div>
<div class="control-group">
<label class="control-label" for="textarea">Description</label>
<div class="controls">
<textarea class="input-xlarge" id="textarea" rows="10"></textarea>
</div>
</div>
<label class="control-label" for="input01">Categories</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Use comma as a separator.</p><br />
</div>
</fieldset>
</form>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap-transition.js"></script>
<script src="js/bootstrap-alert.js"></script>
<script src="js/bootstrap-modal.js"></script>
<script src="js/bootstrap-dropdown.js"></script>
<script src="js/bootstrap-scrollspy.js"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-tooltip.js"></script>
<script src="js/bootstrap-popover.js"></script>
<script src="js/bootstrap-button.js"></script>
<script src="js/bootstrap-collapse.js"></script>
<script src="js/bootstrap-carousel.js"></script>
<script src="js/bootstrap-typeahead.js"></script>
</body>
</html>
But here is javascript stuff.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
$("#address").change(function() {
var geocoder = new google.maps.Geocoder();
var add = $("#address").val();
geocoder.geocode( { 'address': add}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var map;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
};
});
</script>
And here is the div where i add my map.
<div class="control-group">
<label class="control-label" for="input01">Address</label>
<div class="controls">
<input type="text" class="input-xlarge" id="ad">
<p class="help-block">To use lines please specify
‹br/› tag.</p><br/>
<div id="map"></div>
</div>
I've done a quick scan of your code and there seem to be some basic coding problems:
You appear to create your map in an intialize function, but your initialize function appears to be embedded within the larger .change() callback function; I do not see how your map is ever going to be displayed.
Your JavaScript code is focused on a jQuery search for an element with the id: address, but there does not appear to be an element with that id in your markup.
The label you define that contains the text Address says that it is a label for: input01, but you have 2 distinct elements in your markup that have been assigned the id: input01.
There are multiple labels that have been marked as being the label for: input01.
All of the script tags you have defined at the bottom of your file are missing the type attribute.
I think you have too many basic coding errors and it looks like you may have possibly garbled the code during the process of submitting it for review? It's hard to tell, but I hope my feedback is helpful and will help you to get closer to your goal.