Loading on top of the map

Asked

Viewed 166 times

2

I have the following code drawn 2 polygons on the map. See:

function initialize() {
  // Define the LatLng coordinates for the polygon's path.
  var bounds = new google.maps.LatLngBounds();
  var i;

  var polygonCoords = [
     new google.maps.LatLng(25.774252, -80.190262),
     new google.maps.LatLng(18.466465, -66.118292),
     new google.maps.LatLng(32.321384, -64.757370)
  ];
  

  for (i = 0; i < polygonCoords.length; i++) {
     bounds.extend(polygonCoords[i]);
  }

  var map = new google.maps.Map(document.getElementById("map_canvas2"), {
    zoom: 4,
    center: bounds.getCenter(),
    mapTypeId: "roadmap"
  });


  var triangle1 = new google.maps.Polygon({
    paths: polygonCoords,
    strokeColor: '#0000ff',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000ff',
    fillOpacity: 0.35
  });
  triangle1.setMap(map);
  
  var polygonCoords2 = [
     new google.maps.LatLng(25.774252, -80.190262),
     new google.maps.LatLng(18.466465, -66.118292),
     new google.maps.LatLng(14.979063, -83.500871)
  ];

  var triangule2 = new google.maps.Polygon({
    paths: polygonCoords2,
    strokeColor: '#0000ff',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000ff',
    fillOpacity: 0.35
  });
  triangule2.setMap(map);
  
}
#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.loader{
	margin:100px auto;
}
h1{
	font-family: 'Actor', sans-serif;
	color:#000;
	font-size:16px;
	letter-spacing:1px;
	font-weight:200;
	text-align:center;
}
.loader span{
	width:16px;
	height:16px;
	border-radius:50%;
	display:inline-block;
	position:absolute;
	left:50%;
	margin-left:-10px;
	-webkit-animation:3s infinite linear;
	-moz-animation:3s infinite linear;
	-o-animation:3s infinite linear;
	
}


.loader span:nth-child(2){
	background:#E84C3D;
	-webkit-animation:kiri 1.2s infinite linear;
	-moz-animation:kiri 1.2s infinite linear;
	-o-animation:kiri 1.2s infinite linear;
	
}
.loader span:nth-child(3){
	background:#F1C40F;
	z-index:100;
}
.loader span:nth-child(4){
	background:#2FCC71;
	-webkit-animation:kanan 1.2s infinite linear;
	-moz-animation:kanan 1.2s infinite linear;
	-o-animation:kanan 1.2s infinite linear;
}


@-webkit-keyframes kanan {
    0% {-webkit-transform:translateX(20px);
    }
   
	50%{-webkit-transform:translateX(-20px);
	}
	
	100%{-webkit-transform:translateX(20px);
	z-index:200;
	}
}
@-moz-keyframes kanan {
    0% {-moz-transform:translateX(20px);
    }
   
	50%{-moz-transform:translateX(-20px);
	}
	
	100%{-moz-transform:translateX(20px);
	z-index:200;
	}
}
@-o-keyframes kanan {
    0% {-o-transform:translateX(20px);
    }
   
	50%{-o-transform:translateX(-20px);
	}
	
	100%{-o-transform:translateX(20px);
	z-index:200;
	}
}




@-webkit-keyframes kiri {
     0% {-webkit-transform:translateX(-20px);
	z-index:200;
    }
	50%{-webkit-transform:translateX(20px);
	}
	100%{-webkit-transform:translateX(-20px);
	}
}

@-moz-keyframes kiri {
     0% {-moz-transform:translateX(-20px);
	z-index:200;
    }
	50%{-moz-transform:translateX(20px);
	}
	100%{-moz-transform:translateX(-20px);
	}
}
@-o-keyframes kiri {
     0% {-o-transform:translateX(-20px);
	z-index:200;
    }
	50%{-o-transform:translateX(20px);
	}
	100%{-o-transform:translateX(-20px);
	}
}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

<body onload="initialize()">
 
  <div class="loader">
    <h1>CARREGANDO</h1>
    <span></span>
    <span></span>
    <span></span>  
</div>
 <div id="map_canvas2" style="height: 100vh; width:100vw"></div>
</body>

I would like the load stay on top of the map until charging or for a fixed time, for example about 5 seconds.

What better way to do it?!

javascript jquery css google-maps

2 answers

1


I don’t know if this is the best way, because I used css to position the Download on top of the map, maybe there may be some native way from google maps to add a download.

I added the call to the event tilesloaded that runs when the map loads, through searches and tests saw that the event Idle could also be used in this case.

Note it is necessary to use the method addListenerOnce, to ensure that the code is executed only once.

I left the time fixed in 5 seconds, after the map is loaded, wait 5 seconds and hide the .loader.

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
    setTimeout(function() {
      $(".loader").css("display", "none");
    }, 5000);
 });


function initialize() {
  // Define the LatLng coordinates for the polygon's path.
  var bounds = new google.maps.LatLngBounds();
  var i;

  var polygonCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.757370)
  ];


  for (i = 0; i < polygonCoords.length; i++) {
    bounds.extend(polygonCoords[i]);
  }

  var map = new google.maps.Map(document.getElementById("map_canvas2"), {
    zoom: 4,
    center: bounds.getCenter(),
    mapTypeId: "roadmap"
  });


  var triangle1 = new google.maps.Polygon({
    paths: polygonCoords,
    strokeColor: '#0000ff',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000ff',
    fillOpacity: 0.35
  });
  triangle1.setMap(map);

  var polygonCoords2 = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(14.979063, -83.500871)
  ];

  var triangule2 = new google.maps.Polygon({
    paths: polygonCoords2,
    strokeColor: '#0000ff',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000ff',
    fillOpacity: 0.35
  });
  triangule2.setMap(map);

  google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
    setTimeout(function() {
      $(".loader").css("display", "none");
      $(".divFundo").css("display", "none");
    }, 5000);
  });

}
#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.loaderPosition {
  position: absolute;
  left: 50%;
  top: 45%;
}

.loader {
  position: relative;
  left: -50%;
  z-index: 2;
}

.divFundo {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.4;
  z-index: 1;
}

h1 {
  font-family: 'Actor', sans-serif;
  color: #000;
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: 200;
  text-align: center;
}

.loader span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: 50%;
  margin-left: -10px;
  -webkit-animation: 3s infinite linear;
  -moz-animation: 3s infinite linear;
  -o-animation: 3s infinite linear;
}

.loader span:nth-child(2) {
  background: #E84C3D;
  -webkit-animation: kiri 1.2s infinite linear;
  -moz-animation: kiri 1.2s infinite linear;
  -o-animation: kiri 1.2s infinite linear;
}

.loader span:nth-child(3) {
  background: #F1C40F;
  z-index: 100;
}

.loader span:nth-child(4) {
  background: #2FCC71;
  -webkit-animation: kanan 1.2s infinite linear;
  -moz-animation: kanan 1.2s infinite linear;
  -o-animation: kanan 1.2s infinite linear;
}

@-webkit-keyframes kanan {
  0% {
    -webkit-transform: translateX(20px);
  }
  50% {
    -webkit-transform: translateX(-20px);
  }
  100% {
    -webkit-transform: translateX(20px);
    z-index: 200;
  }
}

@-moz-keyframes kanan {
  0% {
    -moz-transform: translateX(20px);
  }
  50% {
    -moz-transform: translateX(-20px);
  }
  100% {
    -moz-transform: translateX(20px);
    z-index: 200;
  }
}

@-o-keyframes kanan {
  0% {
    -o-transform: translateX(20px);
  }
  50% {
    -o-transform: translateX(-20px);
  }
  100% {
    -o-transform: translateX(20px);
    z-index: 200;
  }
}

@-webkit-keyframes kiri {
  0% {
    -webkit-transform: translateX(-20px);
    z-index: 200;
  }
  50% {
    -webkit-transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(-20px);
  }
}

@-moz-keyframes kiri {
  0% {
    -moz-transform: translateX(-20px);
    z-index: 200;
  }
  50% {
    -moz-transform: translateX(20px);
  }
  100% {
    -moz-transform: translateX(-20px);
  }
}

@-o-keyframes kiri {
  0% {
    -o-transform: translateX(-20px);
    z-index: 200;
  }
  50% {
    -o-transform: translateX(20px);
  }
  100% {
    -o-transform: translateX(-20px);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

<body onload="initialize()">
  <div class="divFundo"></div>
  <div class="loaderPosition">
    <div class="loader">
      <h1>CARREGANDO</h1>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
  <div id="map_canvas2" style="height: 100vh; width:100vw"></div>
</body>

  • It was right! Vlw+1

1

I assign position:absolute on Divs Upload, so it will override the rest, I MANUALLY positioned it by choosing the top and left of the div and I set the index-z at 1 to overlay the canvas.

To check if the map was uploaded, I searched in that question and I got this: (typeof google === 'object' && typeof google.maps === 'object'). So I did a while checking whether loaded = true as long as it is fake, it will do nothing, when it becomes true, it will give a show off in the div making the Loader disappear.

   
function initialize() {
  // Define the LatLng coordinates for the polygon's path.
  var bounds = new google.maps.LatLngBounds();
  var i;

  var polygonCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.757370)
  ];


  for (i = 0; i < polygonCoords.length; i++) {
    bounds.extend(polygonCoords[i]);
  }

  var map = new google.maps.Map(document.getElementById("map_canvas2"), {
    zoom: 4,
    center: bounds.getCenter(),
    mapTypeId: "roadmap"
  });


  var triangle1 = new google.maps.Polygon({
    paths: polygonCoords,
    strokeColor: '#0000ff',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000ff',
    fillOpacity: 0.35
  });
  triangle1.setMap(map);

  var polygonCoords2 = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(14.979063, -83.500871)
  ];

  var triangule2 = new google.maps.Polygon({
    paths: polygonCoords2,
    strokeColor: '#0000ff',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000ff',
    fillOpacity: 0.35
  });
  triangule2.setMap(map);
  
  var Loaded = false;
  $(".loader *").show();
  
  while(!Loaded){
  
       Loaded = (typeof google === 'object' && typeof google.maps === 'object');

       if(Loaded){
        $(".loader *").hide();
       }
  }

 
}
#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.loader {
  margin: 100px auto;
  position:absolute;
  z-index: 1;
  top:10px;
  left:200px
}

h1 {
  font-family: 'Actor', sans-serif;
  color: #000;
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: 200;
  text-align: center;
}

.loader span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: 50%;
  margin-left: -10px;
  -webkit-animation: 3s infinite linear;
  -moz-animation: 3s infinite linear;
  -o-animation: 3s infinite linear;
}

.loader span:nth-child(2) {
  background: #E84C3D;
  -webkit-animation: kiri 1.2s infinite linear;
  -moz-animation: kiri 1.2s infinite linear;
  -o-animation: kiri 1.2s infinite linear;
}

.loader span:nth-child(3) {
  background: #F1C40F;
  z-index: 100;
}

.loader span:nth-child(4) {
  background: #2FCC71;
  -webkit-animation: kanan 1.2s infinite linear;
  -moz-animation: kanan 1.2s infinite linear;
  -o-animation: kanan 1.2s infinite linear;
}

@-webkit-keyframes kanan {
  0% {
    -webkit-transform: translateX(20px);
  }
  50% {
    -webkit-transform: translateX(-20px);
  }
  100% {
    -webkit-transform: translateX(20px);
    z-index: 200;
  }
}

@-moz-keyframes kanan {
  0% {
    -moz-transform: translateX(20px);
  }
  50% {
    -moz-transform: translateX(-20px);
  }
  100% {
    -moz-transform: translateX(20px);
    z-index: 200;
  }
}

@-o-keyframes kanan {
  0% {
    -o-transform: translateX(20px);
  }
  50% {
    -o-transform: translateX(-20px);
  }
  100% {
    -o-transform: translateX(20px);
    z-index: 200;
  }
}

@-webkit-keyframes kiri {
  0% {
    -webkit-transform: translateX(-20px);
    z-index: 200;
  }
  50% {
    -webkit-transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(-20px);
  }
}

@-moz-keyframes kiri {
  0% {
    -moz-transform: translateX(-20px);
    z-index: 200;
  }
  50% {
    -moz-transform: translateX(20px);
  }
  100% {
    -moz-transform: translateX(-20px);
  }
}

@-o-keyframes kiri {
  0% {
    -o-transform: translateX(-20px);
    z-index: 200;
  }
  50% {
    -o-transform: translateX(20px);
  }
  100% {
    -o-transform: translateX(-20px);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

<body onload="initialize()">

  <div class="loader">
    <h1>CARREGANDO</h1>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div id="map_canvas2" style="height: 100vh; width:100vw">
  <div class="loader">
    <h1>CARREGANDO</h1>
    <span></span>
    <span></span>
    <span></span>
  </div>
  </div>
</body>

Browser other questions tagged javascript jquery css google-maps

You are not signed in. Login or sign up in order to post.