Loading over the map

Question

Loading over the map

Navigation

#1 by (1 votes)
#2 by (1 votes)

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><bodyonload="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 load to stay on top of the map until it is loaded or for a fixed time, for example about 5 seconds.

What would be the best way to do this?!

javascript jquery css google-maps

asked by anonymous 04.08.2017 / 15:18

2 answers

1

I assign% d of the divs loader, so it will overlap the rest, I MANUALLY POSTED the top and left of the div and set the index-z to 1 to overlap the canvas.

To verify that the map was uploaded, I searched in this question and get this: position:absolute . So I did a while while checking that (typeof google === 'object' && typeof google.maps === 'object') while false, will not do anything, when it becomes true, it will give a show off in div causing the loader to 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><scripttype="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script><bodyonload="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>

04.08.2017 / 15:50

How to make a function run only in IE 10 and 11? Is there an equivalent to VB.Net Call in C #?

score 1 · Accepted Answer

I do not know if this is the best way, because I used css to position the loader on top of the map, maybe there might be some native form of google maps to add a loader.

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

Note you must use the addListenerOnce method to ensure that the code runs once only.

I left the time set at 5 seconds after the map was 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><scripttype="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script><bodyonload="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>