Topic: When uploaded to Firebase, Google Maps do not show the maps.
When I test the .html file just opening it with the browser it works, when I upload it to Firebase, it doesn't.
The following to divs are part of the <body> and next are the scripts that are not working.
Any idea, where the problem lies?
<div class="col-md-8">
<div id="map-container" class="z-depth-1 wow fadeInUp" style="height: 400px"></div>
</div>
<div class="col-md-8">
<div id="map-container2" class="z-depth-1 wow fadeInUp" style="height: 400px"></div>
</div>
<script>
function init_map() {
var icon = 'http://maps.google.com/mapfiles/kml/shapes/sailing.png'
var var_location = new google.maps.LatLng(32.853640, -79.952062);
var var_location2 = new google.maps.LatLng(25.782800, -80.186366);
var var_mapoptions = {
center: var_location,
zoom: 14
};
var var_mapoptions2 = {
center: var_location2,
zoom: 14
};
var var_marker = new google.maps.Marker({
position: var_location,
icon: 'http://maps.google.com/mapfiles/kml/shapes/sailing.png',
map: var_map,
title: "North Charleston, SC"
});
var var_marker2 = new google.maps.Marker({
position: var_location2,
icon: 'http://maps.google.com/mapfiles/kml/shapes/sailing.png',
map: var_map2,
title: "Miami, FL"
});
var var_map = new google.maps.Map(document.getElementById("map-container"),
var_mapoptions);
var_marker.setMap(var_map);
var var_map2 = new google.maps.Map(document.getElementById("map-container2"),
var_mapoptions2);
var_marker2.setMap(var_map2);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
Add comment
Change
<script src='http://maps.google.com/maps/api/js'></script>
on
<script src='https://maps.google.com/maps/api/js'></script>
Your page use HTTPS protocol, that mean you can use scripts from others servers only with this same protocol.
It was there. This is the whole file. And you can see the problem at https://argentinenavyus.firebaseapp.com/html/frliinus.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>AGEU Argentine Naval Attaché's Office in United States of America USA - Agregaduría Naval Argentina en Los Estados Unidos EE.UU.</title>
<meta name="description" content="AGEU Argentine Naval Attache's Office in United States of America USA - Agregaduría Naval Argentina en Los Estados Unidos EE.UU.,">
<!-- Bootstrap CSS -->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="../css/mdb.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- <link rel="stylesheet" href="../css/styles.css"> -->
<!-- Sanitize CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/5.0.0/sanitize.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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
html,
body,
header,
.view {
height: 100%;
}
/* Navigation*/
.navbar {
background-color: transparent;
}
.top-nav-collapse {
background-color: #51b3f4;
}
@media only screen and (max-width: 768px) {
.navbar {
background-color: #51b3f4;
}
}
/*Intro*/
.view {
background: url("../img/FRLIfull.jpg")no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@media (max-width: 768px) {
.full-bg-img,
.view {
height: auto;
position: relative;
}
}
/*Call to action*/
.flex-center {
color: #003366;
}
/*Contact section*/
#contact .fa {
font-size: 2.5rem;
margin-bottom: 1rem;
color: #003366;
}
.description {
padding-top: 5%;
padding-bottom: 3rem;
color: #fff
}
@media (max-width: 992px) {
.description {
padding-top: 7rem;
text-align: center;
}
}
footer.page-footer {
background-color: #51b3f4;
}
</style>
</head>
<body>
<noscript>
<H3>This site requires Javascript</H3>
</noscript>
<!-- Encabezamiento-->
<!--Navbar-->
<nav class="navbar navbar-toggleable-md fixed-top navbar-dark bg-faded scrolling-navbar">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav1" aria-controls="navbarNav1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<b>ARMADA ARGENTINA</b> - AGEU
<div class="collapse navbar-collapse" id="navbarNav1">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
Naval Attaché's Authorities
<li class="nav-item active">
Fragata A.R.A. Libertad
<li class="nav-item dropdown btn-group">
Useful links
<div class="dropdown-menu dropdown" aria-labelledby="dropdownMenu1">
Gaceta Marinera
Fragata Libertad's Instruction Sail 2017
</div>
</div>
</div>
</nav><!--/.Navbar-->
<!--Mask-->
<div class="view hm-transparent">
<div class="full-bg-img flex-center">
- <h1 class="h1-responsive wow fadeInDown" data-wow-delay="0.2s">Fragata A.R.A. Libertad</h1>
- <p class="wow fadeInDown">Visit to the United States of America 2017</p>
- Charleston, SC Miami, FL
- <h5>Argentine Naval Attaché's Office</h5> <h6>630 Indiana Ave NW</h6> <h6>Washington DC 20004-2905</h6> <h6>ageu@ara.mil.ar</h6>
Paste this code
<script src="http://maps.google.com/maps/api/js"></script>
Before your script tag with init_map() function
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags