Topic: When uploaded to Firebase, Google Maps do not show the maps.

pro asked 5 years ago


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>

pro answered 5 years ago


Thank you so much!

Rafał Rogulski free answered 5 years ago


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.

pro answered 5 years ago


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
</div> </div> <!--/.Mask--> <!-- Main container--> <div class="container"> <div class="divider-new"> <h2 class="h2-responsive wow bounceIn">Charleston, SC</h2> </div> <!--Section: Contact--> <section id="contact"> <div class="row"> <!--First column--> <div class="col-md-4"> <ul class="text-center"> <li class="wow fadeInUp" data-wow-delay="0.2s"><i class="fa fa-map-marker"></i> <p>“Old” Navy Base, North Charleston, SC</p> <ul class="text-center"> <li class="wow fadeInUp" data-wow-delay="0.2s"> <p>Fragata A.R.A. Libertad will be participating at <i>Tall Ships Charleston 2017</i>.</p> <ul class="text-center"> <li class="wow fadeInUp" data-wow-delay="0.2s"> <p>The ship will be open to the public on May 20 & 21, from 10:00 a.m. to 6:00 p.m. </p> </div> <!--/First column--> <!--Second column--> <div class="col-md-8"> <div id="map-container" class="z-depth-1 wow fadeInUp" style="height: 400px"></div> </div> <!--/Second column--> </div> </section> <!--Section: Contact--> <div class="divider-new"> <h2 class="h2-responsive wow bounceIn">Miami, FL</h2> </div> <!--Section: Contact--> <section id="contact"> <div class="row"> <!--First column--> <div class="col-md-4"> <ul class="text-center"> <li class="wow fadeInUp" data-wow-delay="0.2s"><i class="fa fa-map-marker"></i> <p>Museum Park, Miami, FL</p> <ul class="text-center"> <li class="wow fadeInUp" data-wow-delay="0.2s"> <p>The ship will be open to the public on May 25 & 26, from 10:00 a.m. to 6:00 p.m.</p> </div> <!--/First column--> <!--Second column--> <div class="col-md-8"> <div id="map-container2" class="z-depth-1 wow fadeInUp" style="height: 400px"></div> </div> <!--/Second column--> </div> </section> <!--Section: Contact--> </div> <!--/ Main container--> <!--Footer--> <footer class="page-footer center-on-small-only"> <!--Call to action--> <div class="call-to-action">
  • <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>
</div> <!--/.Call to action--> <!--Copyright--> <div class="footer-copyright"> <div class="container-fluid"> © 2017 Copyright: Argentine Naval Attaché's Office </div> </div> <!--/.Copyright--> </footer> <!--/.Footer--> <!-- Scripts are added at the end --> <!-- JQuery (necessary for Bootstrap's JavaScript plugins) --> <script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="../js/tether.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="../js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="../js/mdb.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script type="text/javascript" src="../js/ie10-viewport-bug-workaround.js"></script> <!--Google Maps--> <script src="http://maps.google.com/maps/api/js"></script> <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: "Fragata A.R.A. Libertad in 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: "Fragata A.R.A. Libertad in 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> <!-- Animations init--> <script> new WOW().init(); </script> </body> </html>

Rafał Rogulski free answered 5 years ago


Paste this code <script src="http://maps.google.com/maps/api/js"></script> Before your script tag with init_map() function

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags