When visiting the website here and clicking on the contact link, you should see a Google map. However, for some unknown reason, it does not display.
The strange part is that when I open the contact.html file directly, the map works perfectly fine. It seems to be a problem only when viewing the website online.
If anyone has any insights on how to resolve this issue, I would greatly appreciate the assistance!
Encountering this issue:
Mixed Content: The webpage at 'https://www.leeshewan.tech/contact.html' was loaded via HTTPS, but attempted to load an insecure resource 'http://maps.google.com/maps?hl=en&ie=UTF8&ll=37.0625,-95.677068&spn=56.506174,79.013672&t=m&z=4&output=embed'. As a result, this request has been blocked and the content needs to be accessed over HTTPS.
The map must be served over HTTPS. Please make the necessary changes as follows :)
Update the URL in your code :
http://maps.google.com/maps?hl=en&ie=UTF8&ll=37.0625,-95.677068&spn= 56.506174,79.013672&t=m&z=4&output=embedto
https://maps.google.com/maps?hl=en&ie=UTF8&ll=37.0625,-95.677068&spn=56.506174,79.013672&t=m&z=4&output=embedHope this helps!
Not only are you facing a mixed content issue, but it seems like there is an error in including the jquery path correctly. The URL cannot be accessed.
Your index page references the jquery file as vendor/jquery/jquery.min.js. Make sure to upload this file to your server with the same relative path as your index file, otherwise, the page will not work properly (for example, the slider may stop functioning).
Utilize your web browser's Developer Tools to check for syntax errors, javascript issues, and network requests. This will be extremely helpful in debugging your web applications effectively.
Can you tell me what the default background and border color is for a toggle button? Here’s an example of code that changes the background color of a toggle button: i.toggle11.setOnAction(e->{ if(i.toggle11.isSelected()){ i.toggle ...
Here is a php function that generates an SVG image. public function actionJsTest() { header('Content-Type: image/svg+xml'); $svg = ''; $svg .= '<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/ ...
Currently, I have a player that exists in both Flash and HTML5 versions. When calling a page through an iframe, the browser and device are detected automatically to load the player accordingly, and this setup is functioning correctly. Prior to implementin ...
Here's what's going on with this code snippet: HTML <div class="one"> <div class="will-overflow"> </div> </div> CSS html, body { width: 100%; height: 100%; } .one { height: 100%; background: r ...
For my Rest API, I am working on enabling the retrieval of data within a specific bounding box. Since the bounding box requires four coordinates, I intend to structure the GET requests in a way that allows them to accept the bounding box as JSON. This mean ...
I attempted to utilize the Google Analytics Management API in order to create views. Through OAuth Playground, I successfully obtained an access token using the scope analytics.edit. Despite verifying the validity of the token, I continue to encounter a 40 ...
Is it better to use iText or Puppeteer when generating PDFs from an HTML page and creating a service in either Node.js or Java? Which one offers superior features and performance? Additionally, does Selenium provide the same PDF generation capabilities as ...
It's a bit complex and I can't figure out why it's not working. My goal is to create a page with textboxes, dropdown lists, and a datagrid using easyui. The issue arises when I select something from the dropdown list - I want two actions to ...
I am currently working with an event function in JavaScript that involves a slider and a tooltip element. Here is the code snippet: //Hide the Tooltip initially tooltip.hide(); //Initialize the Slider slider.slider({ ...
Today marks my first time posting a query in this forum. I'm currently facing an issue with mod_rewrite. Below is the structure of my filesystem: site_new/stylesheets/layout.css site_new/javascript/somescript.js site_new/hallendetails.php ...
I need help with a password security check feature that changes field borders to green or red based on certain conditions. Despite successfully implementing it, the JavaScript code only selects the first field (nickname) instead of the last one. I've ...
Currently working on my portfolio website using bootstrap and sass along with a theme kit. Initially, I attempted to implement a grid column style for the intro-section but had a change of heart and deleted the style. Surprisingly, every time I refresh my ...
As I delve into learning CSS, I keep stumbling upon solutions that are almost there for what should be a simple task. Being at a very basic stage of my learning journey, I am struggling with figuring things out. My current challenge involves placing one i ...
Imagine having 3 unique classes: alpha, beta, and gamma. Each class contains 3 individual div elements like so: <div class="alpha"></div> <div class="alpha"></div> <div class="alpha"></div> <div class="beta">< ...
I've developed a custom sticky sidebar for displaying ads, but I'm facing an issue. When I scroll to the bottom of the page, it overlaps with the footer. Can someone please take a look at this? - var stickySidebar = $('.sticky'); if ...
I am struggling to apply multiple classes when the condition in the ng-class attribute evaluates to true. Here is the code I have attempted so far, but it doesn't seem to be working: <div class="col-md-4" ng-mouseover="hoverButton=true" id="plai ...
I tried to implement the jquery ui draggable and droppable features to display 3 divs within a designated area. Below is the code snippet: --CSS: #content-1 { width: 200px; height: 100px; border: 1px solid red; display: none; } #content-2 { width: ...
I recently came across the angular-split library while trying to address a specific need. It partially solved my problem, but I still have some remaining challenges. In my setup, I have divided my content into 2 sections using angular-split. The goal is f ...
Struggling to set the size of an HTML "select" field in Bootstrap 3 (latest) to normal width instead of 100%? Looking for a cleaner solution than resorting to tables or adding fields within bootstrap columns that might cause indentation issues due to borde ...
I am currently working with a PHP form that looks like this: <form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search"> <label class="assistive-text" for="s"> &l ...