I am having trouble with getting the Google Map API to function properly. I am getting and error that says "This page can't load Google Maps correctly." I believe my key is set up correctly and I believe the code is correct. I think I need a fresh pair of eyes to correct the issue(s). Any help would be appreciated. The webpage is https://bplsv.com/contact.html
Thank you!
<section class="cd-section">
<div class="cd-block">
<div class="contact-top">
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY KEY&callback=initMap type="text/javascript"></script>
<div id="cd-google-map">
<div id="google-container"></div>
<div id="cd-zoom-in"></div>
<div id="cd-zoom-out"></div>
<address>7200 Polar Bear<br>San Antonio, Texas 78238</address>
</div>
</div>
</div>
</section>
Related
I am using VS2022.
I am getting this error and I didn't think it was possible. :)
Anyone knows what could cause this? I tried to comment out the #RenderBody in my _Layout.cshtml, but the error persists...very weird. Any help is greatly appreciated.
MainLayout.razor
#inherits LayoutComponentBase
<PageTitle>TestCoreRazor</PageTitle>
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4">
About
</div>
<article class="content px-4">
#Body
</article>
</main>
</div>
Index.razor
#page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, Developer!</h1>
<p>If you are reading this, you must be building a custom component.</p>
SOLVED!
I found another post that has the same symptom and the culprit is the exactly same:
check the page directive in ALL your page Razor component...you might have a duplicate
If you have recently added a component, check all the values that assigned to the properties of the components have been defined correctly.
I was trying to use a DateTimePicker in the Asp.net core Razor page.
I searched the internet and found this page seems works good.
So, I went to the NuPackage and found Bootstrap.v3.datetimepicker 4.17.45, and downloaded it.
After install, I got a warning:
Bootstrap.v3.Datetimepicker 4.17.45 depends on bootstrap.less (>= 3.3.0) but bootstrap.less 3.3.0 was not found. An approximate best match of bootstrap.less 3.3.5 was resolved.
Since the bootstrap version in the project is 3.3.5, and it is a warning instead an error, so I think it should be fine. I copied the sample code into my cshtml file, and run it.
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>
The DateTimePicker showed up. How ever, when I clicked on the calendar button, nothing happened. It seems javascript is not running?
I searched everywhere, and I found this part in the layout page.
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
It seems I need to include the js file which contains the datetimepicker here. However, I search the whole project, cannot find any js file contains 'datetimepicker' string.
I am not familiar with front-end structure. what I did wrong or missing? Is my datetimepicker installation not success? is the js script not working on my razor page? How do I diagnose it?
Added:
I enabled the javascript debugging, and I got the following exception. It looks really wired as exception comes from the sample code, which runs with no problem on the original webpage.
The DateTimePicker.js NuGet package itself will be in the %UserProfile%\.nuget\packages directory if you need to get the javascript files.You could copy it in your project and add #section Scripts { and } in your project.
The better way is to use either LibMan or npm to get your client-side libraries.
Here is a simple sample in my project as below.Anyway,the version up to you:
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
#section Scripts
{
<link rel="stylesheet" href="~/lib/bootstrap/3.3.0/content/Content/bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/bootstrap/3.3.0/content/Content/bootstrap-theme.min.css" />
<script type="text/javascript" src="~/lib/jquery/1.9.1/Content/Scripts/jquery-1.9.1.js"></script>
<script src="~/lib/moment.js/2.9.0/Content/Scripts/moment.min.js"></script>
<script src="~/lib/bootstrap/3.3.0/content/Scripts/bootstrap.min.js"></script>
<script src="~/lib/bootstrap.v3.datetimepicker/4.17.45/content/Scripts/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker();
});
</script>
}
Note: moment.js should render before the datetimepicker.js
I am using the (pretty cool) so far Framework7 lib for an hybrid mobile app...but I came to an issue.
In the JS, I've put a line for the swiper
var slider=new Swiper(".swiper-container");
In the HTML, I have a page inside a view that is like this
<div class="pages navbar-through toolbar-through">
<!-- Page, "data-page" contains page name -->
<div class="page">
<!-- Scrollable page content -->
<div class="page-content">
<!-- Slider -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="content-block">
<div class="creator" style="float:left">
<img src="http://onexchange-dev.azurewebsites.net/image/julien_boyreau.jpg">
</div>
<div style="float:left;margin-top:2%;margin-left:2%">Julien Boyreau</div>
<div style="float:right;width:20%">Trust</div>
<br>
</div>
<div class="content-block">
<div class="content-block-inner">
<h2>Can we save the Internet ?</h2>
<img style="width:100%" class="teaser" src="http://www.savetheinternet.com/sites/default/files/styles/1275_wide/public/topics/topic_internet-freedom.png?itok=O7Tiv8Vv">
<p>
Back in 1964, in a time of cold war, Paul Baran invented packet-switching communications. This paved the way to a radically new way of distributed communications and a formidable move to democratization.
</p>
<p>
10 years later, Bob Kahn and Vint Cerf standardized eventually this approach with TCP/IP protocols. This provided a common stack onto which one could build at the edge whatever applications, where the network would only transmit the packets.
</p>
<p>
15 years later, Tim Berners-Lee built one of these applications, WWW. Many have forgotten that this was half the coin of what he was working on, the consumption part, leaving aside the other half, the creation part, who was baked into ENQUIRE.
</p>
<p>
In the next 15 years, the Internet grew on top of these technologies, thanks to decentralized PCs to start the digital revolutionnary era.
</p>
<p>Since then, the Internet has mostly moved backwards.</p>
<p>
ISPs, having never accepted the logical consequence of Baran’s invention (the best IP network is the dumbest one), have focused their profits to integrate upward to “Services” and “Content” instead of downward to faster & cheaper & more pervasive utilitarian IP service (In 2016, IPv6 is still not pervasive and I have no 4G in Paris’ subway).
</p>
</div>
</div>
</div>
<div class="swiper-slide">
<p style="text-align:center">Slide 2</p>
</div>
</div>
</div>
</div>
</div>
When I load that, I can see my first slide, but if I swipe to the right, I don't have any effect : the second slide is coming but attached to my finger, like if the 2 swiper-slide was sticked.
Even more bizarre, if I put this in the page :
<div class="pages navbar-through toolbar-through">
<!-- Page, "data-page" contains page name -->
<div class="page">
<!-- Scrollable page content -->
<div class="page-content">
<!-- Slider -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
slide 1
</div>
<div class="swiper-slide">
<p style="text-align:center">Slide 2</p>
</div>
</div>
</div>
</div>
</div>
</div>
I can't swipe at all anymore to see the "slide 2".
Does anybody have a clue to help me ? It's driving me nuts...
Thanks for your help,
J.
If your slider is in index page. then you need to call update swiper to work. You have intialised swiper in js. u can also do the same in html too. for update the swiper you can use below code
$$('.swiperTab').on('show', function(){
$$(this).find('.swiper-container')[0].swiper.update();
});
Here swiper tab is the class name for swiper container.
It should work fine.
Well, first thing that is obvious is that you miss swiper pagination. If this doesn't help, it might be a second carousel on the same page. Don't have other ideas and the code is insufficient for an exact resolution
I am using materialize css for my app, and I using materialize v0.97.0
When I try to use slider it always shows grey background, I have also initialised the slider().
Here's my markup
HTML
<div class="row">
<div class="col s12">
<div class="slider">
<ul class="slides">
<li>
<img src="../images/bg3.jpg" alt="slider image"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
</div>
JS
$(document).ready(function () {
// Plugin initialization
$('.slider').slider();
})
I have also tried various solutions, but nothing worked
Your code is alright assuming that you initialize javascript correctly. Open the page, where your slider is, right click on the grey block and choose view image. If it does not show the image it is supposed to show, then problem is with your image source. Try using source image from the web.
If it shows the image when clicking - view image, the problem is with the initialization of the javascript. Check if your webpage loads correct javascript file.
In JS I wrote following code and it worked.
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
You need to actually set the transition times in the javascript to make it work
Put this after the jQuery plugin import
<script type="text/javascript">
$(document).ready(function() {
$('.slider').slider({
full_width: false,
interval: 5000,
transition: 800,
});
});
</script>
Any error in your JavaScript will prevent to let the slider shows , so check your console when you refresh the page and solve them and you will be fine :)
My best guess is that the source of your tag is pointing to a wrong path.
Just tried your code with a working image path and it worked like a charm.
Please, check if your source path is pointing to the right place. For testing purposes you should try changing your source to the following:
src="https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<div class="slider">
<ul class="slides">
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/1">
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/2">
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
Simply Use this class transparent
<ul class="slides transparent" style="height: 400px;">
iam using these codes in my website to make a bxsilder
<script src="js/jquery-latest.js" type="text/javascript"></script>
<script src="js/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider1').bxSlider({
mode: 'fade'
});
});
</script>
<div id="slider1">
<div class="slide">
<img src="images/thumbnails/slide1.png">
</div>
<div class="slide">
<img src="images/thumbnails/slide2.png">
</div>
<div class="slide">
<img src="images/thumbnails/slide3.png">
</div>
<div class="slide">
<img src="images/thumbnails/slide4.png">
</div>
<div class="thumbs">
<img src="images/thumbnails/slide1-thumb.png" />
<img src="images/thumbnails/slide2-thumb.png" />
<img src="images/thumbnails/slide3-thumb.png" />
<img src="images/thumbnails/slide4-thumb.png" />
</div>
</div>
CSS
#slider1{
width:500px;
height:400px;
background-color:#ccc;
}
.slide {
width:500px;
height:350px;
}
.slide img {
width:500px;
height:350px;
}
.thumbs {
width:125px;
height:75px;
}
But nothing appear in the page! except prev & next words
what's wrong with this code?
the post is refused because of this message "Your post does not have much context to explain the code sections; please explain your scenario more clearly."
so that iam repeating these words till it's accepted!
"Your post does not have much context to explain the code sections; please explain your scenario more clearly."
"Your post does not have much context to explain the code sections; please explain your scenario more clearly."
I tested you code with bxslider un jquery - ir works "fine". Are You sure, You have Your images correctly added?
Test Your site with Chrome Developer tools, look into Networking and Console - does it shows any errors?
Are the paths to the 2 .js files correct? That is, do you have a folder named "js" with the two files in there? Or did you just copy/paste the code from web examples??