This question already has answers here:
Google Map not shown
(2 answers)
google map not displaying on my webpage
(1 answer)
Closed 1 year ago.
So maybe this mistake is pretty naïve, but I can't load a javascript map from the Google Maps API.
What I'm trying to accomplish is to make a map appear at the right side of the buttons. But...I can't.
Here's my code.
HTML
<!DOCTYPE html>
<html>
<head>
<title>salgamos</title>
<link rel="stylesheet" href="{{ url_for('static', filename= 'css/en_corto.css') }}">
<script> </script>
</head>
<body>
<div class="domainhome">
<p>salgamos.com.mx</p>
</div>
<div class="flex-container">
<div class="left-bar">
<div>
<button class="adondequieresir"><p>¿a dónde quieres ir?</p></button>
</div>
<div>
<button class="agregarubicacion">
<p style="float: left;">¡agrega tu ubicación?</p>
</button>
</div>
<div>
<button class="personasunidas">
<p style="float: left;">(n) personas unidas</p>
</button>
</div>
</div>
<div class="right-bar">
<div id="map">
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=&v=weekly"
async
></script>
</div>
</div>
</div>
JS
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
I've found similar posts, but for things far more complex, and their answers only confused me. I would kindly appreciate if someone could help me.
The script tag should not be wrapped inside the div#map tag.
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAzw5lUQhZWbnyya36w_UiP-DjcdGj6Sfw&callback=initMap&libraries=&v=weekly" async></script>
I am using handlebars and it is working fine in development. When I upload to github-pages, The handlebars template still works if i open directly to the page. But if I go to a page in a link, the handlebars loop doesn't work. Here is my code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="../bower_components/handlebars/handlebars.min.js"></script>
</head>
<div id="content-placeholder"></div>
<script id="some-template" type="text/x-handlebars-template">
{{#each this}}
<div class=" col-md-4 col-sm-6 " data-animation-type="fadeIn" data-animation-delay="0.5s" data-animation-duration="2s">
<div class="item-wrap">
<figure class="">
<div class="popup-call">
<i class="flaticon-arrows-4"></i>
</div>
<img src="{{this.picture.picture.url}}" class="img-responsive" style="height: 200px" alt="img11"/>
<figcaption>
<div class="post-header">
<h5>{{this.name}}</h5>
</div>
</figcaption>
</figure>
</div>
</div>
{{/each}}
</script>
<script>
$(document).ready(function(){
var source = $("#some-template").html();
var template = Handlebars.compile(source);
$.getJSON('https://my-url.com/teams.json', function(data){
console.log(data);
$("#content-placeholder").html(template(data));
});
});
</script>
I've tried doing it without the document.ready() but that doesn't change anything.
It's fairly clear that the handlebars.js isn't loading, because of the relative path in the script tag:
<script src="../bower_components/handlebars/handlebars.min.js"></script>
Replace src="" with your favorite CDN location:
For example
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
I don't think Handlebars works with Github pages. At least mine does not.
I like to use jQ Mobile Autocomplete https://github.com/commadelimited/autoComplete.js. But when I copy the example of jQM from http://andymatthews.net/code/autocomplete/local_complex.html to local server i always get the error: Uncaught TypeError: $(...).autocomplete is not a function. Here is the code i tryed:
<!DOCTYPE html>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="jqm.autoComplete-1.5.2-min.js"></script>
<script src="code.js"></script>
<div data-role="page" id="mainPage">
<div data-role="header">
<h1>jQM Autocomplete</h1>
<div>
</div>
</div>
<div data-role="content">
<h3>Local Complex Data</h3>
<p>
In this example autoComplete returns an array of objects from a local variable, each with a label and a value key.
</p>
<p>
<input type="text" id="searchField" placeholder="Categories">
<ul id="suggestions" data-role="listview" data-inset="true"></ul>
</p>
<p>
Download the code
</p>
</div>
</div>
<script>
$("#mainPage").bind("pageshow", function(e) {
autocompleteData = $.parseJSON('[{"value":"1.0","label":"Alabama"},{"value":"2.0","label":"Alaska"},{"value":"3.0","label":"American Samoa"},{"value":"4.0","label":"Arizona"},{"value":"5.0","label":"Arkansas"},{"value":"6.0","label":"California"},{"value":"7.0","label":"Colorado"},{"value":"8.0","label":"Connecticut"},{"value":"9.0","label":"Delaware"},{"value":"10.0","label":"District of Columbia"},{"value":"11.0","label":"Florida"},{"value":"12.0","label":"Georgia"},{"value":"13.0","label":"Guam"},{"value":"14.0","label":"Hawaii"},{"value":"15.0","label":"Idaho"},{"value":"16.0","label":"Illinois"},{"value":"17.0","label":"Indiana"},{"value":"18.0","label":"Iowa"},{"value":"19.0","label":"Kansas"},{"value":"20.0","label":"Kentucky"}, {"value":"21.0","label":"Louisiana"}, {"value":"22.0","label":"Maine"},{"value":"23.0","label":"Maryland"},{"value":"24.0","label":"Massachusetts"},{"value":"25.0","label":"Michigan"},{"value":"26.0","label":"Minnesota"},{"value":"27.0","label":"Mississippi"},{"value":"28.0","label":"Missouri"},{"value":"29.0","label":"Montana"},{"value":"30.0","label":"Nebraska"},{"value":"31.0","label":"Nevada"},{"value":"32.0","label":"New Hampshire"},{"value":"33.0","label":"New Jersey"},{"value":"34.0","label":"New Mexico"},{"value":"35.0","label":"New York"},{"value":"36.0","label":"North Carolina"},{"value":"37.0","label":"North Dakota"},{"value":"38.0","label":"Northern Marianas Islands"},{"value":"39.0","label":"Ohio"},{"value":"40.0","label":"Oklahoma"},{"value":"41.0","label":"Oregon"},{"value":"42.0","label":"Pennsylvania"},{"value":"43.0","label":"Puerto Rico"},{"value":"44.0","label":"Rhode Island"},{"value":"45.0","label":"South Carolina"},{"value":"46.0","label":"South Dakota"},{"value":"47.0","label":"Tennessee"},{"value":"48.0","label":"Texas"},{"value":"49.0","label":"Utah"},{"value":"50.0","label":"Vermont"},{"value":"52.0","label":"Virgin Islands"},{"value":"51.0","label":"Virginia"},{"value":"53.0","label":"Washington"},{"value":"54.0","label":"West Virginia"},{"value":"55.0","label":"Wisconsin"},{"value":"56.0","label":"Wyoming"}]');
$("#searchField").autocomplete({
target: $('#suggestions'),
source: autocompleteData,
link: 'target.html?term=',
minLength: 1
});
});
</script>
I am building a WebWorks app that starts with a login form and if login is successful a second page with the id='map' is supposed to be shown. I tried using $.mobile.changePage to display the page but it only reloads the login page. Why is't it loading the second page?
I stripped out all the login validation code to simplify things so I could figure out why the changePage isn't working.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="lib/BlackBerry-JQM-all-1.0.0.css" />
<script src="lib/BlackBerry-JQM-all-1.0.0.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHGb5Si_2oXtOLCo_IzRIJPtrKkhyFPsU&sensor=false"></script>
</head>
<body>
<div data-role="page" id="login">
<div data-role="header">
<h1>TCOB - Login</h1>
</div>
<!-- /header -->
<div data-role="content">
<div class="BB10Container">
<form method="post">
<label for="username">Username</label>
<input type="text" name="user-input" id="username" placeholder="Username"/>
<label for="basic">Password</label>
<input type="password" name="pass-input" id="password" placeholder="Password"/>
<input type="submit" data-role="button" data-inline="true" data-icon="check" value="Submit" id="submit">
</form>
</div>
</div>
<!-- /content -->
<div data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="map" >
<div data-role="header">
<h1>TCoB</h1>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</div>
<script>
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.backBtnText = "Zurück";
});
$('#username').keyup(function(){
$.get("http://www.hedonsoft.com/tcob/php/check_user.php",{username: $("#username").val()},function(data){
if(data == true){
$('#username').css("background-color","#00FFFF").css("color","#000000");
}else{
$('#username').css("background-color","#000000").css("color","#FFFFFF");
}
});
});
$('#submit').click(function(){
$.mobile.changePage("#map");
});
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
function getLocation(){
}
</script>
</body>
</html>
The problem is that you are both using a custom click handler and using a <form> to submit the form.
The custom click handler will navigate to #map and you can actually see that page flash up very briefly, but since your form has no action attribute, it will redirect to the same page – which is the login page, causing a second navigation and thus resulting in the weird behavior you are experiencing.
See this fiddle without a form to see that it works.
However, note that $.mobile.changePage is marked as deprecated as of 1.4.0 RC1.
I have 3 button-images in one page, such that when you press 1, it should show the iFrame related to it, and hide the others. I just started learning about webdev, and I've browsed online, but i can't seem to make it work. :o
Here's my code:
<div id="tabs">
<div id="overview">
Overviews
</div>
<div id="gallery">
Gallery
</div>
</span>
<div id="reviews">
Reviews
</div>
</div>
Each wrapper# is the id of a div that contains the iFrame. The divs contained in the tabs div above are button-images.
How can I show 1 frame 1st, then when the other button-image is clicked, that iFrame will hide, and the iFrame corresponding to the button clicked will be the only 1 showing?
Thank you so much in advance!! :)
P.S. you can check out my website www.giroapps.com to get a better picture of what i'm trying to achieve. :)
There is a neat solution for you: http://www.stilbuero.de/jquery/tabs_3/
Quick example:
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="fragment-1">
<iframe>IFrame1</iframe>
</div>
<div id="fragment-2">
<iframe>IFrame2</iframe>
</div>
<div id="fragment-3">
<iframe>IFrame3</iframe>
</div>
</div>
</body>
Update
In regards of your application:
<SCRIPT type="text/javascript">
$(document).ready(function(){
$("#tabs a").click( function() {
$("#tabs-1").load(this.href);
return false ;
} ) ;
$("#tabs a:first").click() ;
});
</SCRIPT>
<DIV id="tabs">
<DIV id="overview">
<A class="imagelink lookA" href="./toframe.html">Overviews</A>
</DIV>
<DIV id="gallery">
<A class="imagelink lookA" href="./tawagpinoygallery.html">Gallery</A>
</DIV>
<DIV id="reviews">
<A class="imagelink lookA" href="./trframe.html">Reviews</A>
</DIV>
</DIV>
<div id="tabs-1"></div>