Sea-Fi| Internet on the Ocean

Team Updates

<styletype="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0;
}
#mapDiv {
width: 100%;
height: 500px;
}
</style>
<!--Link do API do Google com a chave gerada no Firebase-->
<scriptsrc="https://maps.googleapis.com/maps/api/js?key=PUT_YOUR_KEY_FIREBASE"></script>
<divid="mapDiv"></div>
<scripttype="text/javascript">
var draw_circle =null; //Redesenhando o objeto círculo no primeiro refresh
functionDisplayGoogleMap() {
//Configurando valores de latitude e longetude
var latitudePrincipal =-24.19937417;
var longitudePrincipal =-46.18103027;
var latitude001 =-25.399708;
var longitude001 =-47.685516;
var latitude002 =-25.886407614212853;
var longitude002 =-46.75231933593751;
var latitude003 =-24.949254;
var longitude003 =-47.177789;
var latitude004 =-25.31671837192806;
var longitude004 =-46.06842041015626;
var latitude005 =-24.595129;
var longitude005 =-46.569342;
var latitude006 =-24.946219074360084;
var longitude006 =-45.15380859375001;
var latitude007 =-24.280064;
var longitude007 =-45.866524;
var latitude008 =-24.666986385216248;
var longitude008 =-44.110107421875;
var latitude009 =-23.979273;
var longitude009 =-44.899281;
var latitude010 =-24.126701958681682;
var longitude010 =-43.13232421875;
var latitude011 =-23.486471;
var longitude011 =-44.196463;
//Configurando a latitude e longetude
var PontoPrincipal =newgoogle.maps.LatLng(latitudePrincipal, longitudePrincipal); //Não usado no MVP0
var Ponto001 =newgoogle.maps.LatLng(latitude001, longitude001);
var Ponto002 =newgoogle.maps.LatLng(latitude002, longitude002);
var Ponto003 =newgoogle.maps.LatLng(latitude003, longitude003);
var Ponto004 =newgoogle.maps.LatLng(latitude004, longitude004);
var Ponto005 =newgoogle.maps.LatLng(latitude005, longitude005);
var Ponto006 =newgoogle.maps.LatLng(latitude006, longitude006);
var Ponto007 =newgoogle.maps.LatLng(latitude007, longitude007);
var Ponto008 =newgoogle.maps.LatLng(latitude008, longitude008);
var Ponto009 =newgoogle.maps.LatLng(latitude009, longitude009);
var Ponto010 =newgoogle.maps.LatLng(latitude010, longitude010);
var Ponto011 =newgoogle.maps.LatLng(latitude011, longitude011);
//Opções iniciais do Google Maps
var mapOptions = {
center: PontoPrincipal,
zoom:7.5,
zoomControl:true,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
//Mostre o Google Maps na DIV
var map =newgoogle.maps.Map(document.getElementById("mapDiv"), mapOptions);
let url ="http://maps.google.com/mapfiles/kml/pal4/icon61.png"//Endereço do ícone
let urlDesativado ="http://maps.google.com/mapfiles/kml/pal4/icon53.png"//Não usado
//Configurando a msg do balão (Não usado no MVP0)
var contentStringPrincipal ='<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Ponto Principal 1</h2>'+
'<div id="bodyContent">'+
'<p><b>Latitude:</b>'+ latitudePrincipal +'</p>'+
'<p><b>Longitude:</b>'+ longitudePrincipal +'</p>'+
'<p><b>Status:</b> Em funcionamento</p>'+
'</div>'+
'</div>';
var infowindowPrincipal =newgoogle.maps.InfoWindow({
content: contentStringPrincipal
});
//Configurando a msg do balão
var contentString001 ='<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Ponto 001</h2>'+
'<div id="bodyContent">'+
'<p><b>Latitude:</b>'+ latitude001 +'</p>'+
'<p><b>Longitude:</b>'+ longitude001 +'</p>'+
'<p><b>Status:</b> Em funcionamento</p>'+
'</div>'+
'</div>';
var infowindow001 =newgoogle.maps.InfoWindow({
content: contentString001
});
//Configurando a msg do balão
var contentString002 ='<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Ponto 002</h2>'+
'<div id="bodyContent">'+
'<p><b>Latitude:</b>'+ latitude002 +'</p>'+
'<p><b>Longitude:</b>'+ longitude002 +'</p>'+
'<p><b>Status:</b> Em funcionamento</p>'+
'</div>'+
'</div>';
var infowindow002 =newgoogle.maps.InfoWindow({
content: contentString002
});
//Configurando a msg do balão
var contentString003 ='<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Ponto 003</h2>'+
'<div id="bodyContent">'+
'<p><b>Latitude:</b>'+ latitude003 +'</p>'+
'<p><b>Longitude:</b>'+ longitude003 +'</p>'+
'<p><b>Status:</b> Em funcionamento</p>'+
'</div>'+
'</div>';
var infowindow003 =newgoogle.maps.InfoWindow({
content: contentString003
});
//Configurando a msg do balão
var contentString004 ='<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Ponto 004</h2>'+
'<div id="bodyContent">'+
'<p><b>Latitude:</b>'+ latitude004 +'</p>'+
'<p><b>Longitude:</b>'+ longitude004 +'</p>'+
'<p><b>Status:</b> Em funcionamento</p>'+
'</div>'+
'</div>';
var infowindow004 =newgoogle.maps.InfoWindow({
content: contentString004
});
//Configurando a msg do balão
var contentString005 ='<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Ponto 005</h2>'+
'<div id="bodyContent">'+
'<p><b>Latitude:</b>'+ latitude005 +'</p>'+
'<p><b>Longitude:</b>'+ longitude005 +'</p>'+
'<p><b>Status:</b> Em funcionamento</p>'+
'</div>'+
'</div>';
var infowindow005 =newgoogle.maps.InfoWindow({
content: contentString005
});
//Configurando a msg do balão
var contentString006 ='<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Ponto 006</h2>'+
'<div id="bodyContent">'+
'<p><b>Latitude:</b>'+ latitude006 +'</p>'+
'<p><b>Longitude:</b>'+ longitude006 +'</p>'+
'<p><b>Status:</b> Em funcionamento</p>'+
'</div>'+
'</div>';
var infowindow006 =newgoogle.maps.InfoWindow({
content: contentString006
});
//Configurando a msg do balão
var contentString007 ='<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Ponto 007</h2>'+
'<div id="bodyContent">'+
'<p><b>Latitude:</b>'+ latitude007 +'</p>'+
'<p><b>Longitude:</b>'+ longitude007 +'</p>'+
'<p><b>Status:</b> Em funcionamento</p>'+
'</div>'+
'</div>';
var infowindow007 =newgoogle.maps.InfoWindow({
content: contentString007
});
//Configurando a msg do balão
var contentString008 ='<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Ponto 008</h2>'+
'<div id="bodyContent">'+
'<p><b>Latitude:</b>'+ latitude008 +'</p>'+
'<p><b>Longitude:</b>'+ longitude008 +'</p>'+
'<p><b>Status:</b> Em funcionamento</p>'+
'</div>'+
'</div>';
var infowindow008 =newgoogle.maps.InfoWindow({
content: contentString008
});
//Configurando a msg do balão
var contentString009 ='<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Ponto 009</h2>'+
'<div id="bodyContent">'+
'<p><b>Latitude:</b>'+ latitude009 +'</p>'+
'<p><b>Longitude:</b>'+ longitude009 +'</p>'+
'<p><b>Status:</b> Em funcionamento</p>'+
'</div>'+
'</div>';
var infowindow009 =newgoogle.maps.InfoWindow({
content: contentString009
});
//Configurando a msg do balão
var contentString010 ='<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Ponto 010</h2>'+
'<div id="bodyContent">'+
'<p><b>Latitude:</b>'+ latitude010 +'</p>'+
'<p><b>Longitude:</b>'+ longitude010 +'</p>'+
'<p><b>Status:</b> Desativado</p>'+
'</div>'+
'</div>';
var infowindow010 =newgoogle.maps.InfoWindow({
content: contentString010
});
//Configurando a msg do balão
var contentString011 ='<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h2 id="firstHeading" class="firstHeading">Ponto 011</h2>'+
'<div id="bodyContent">'+
'<p><b>Latitude:</b>'+ latitude011 +'</p>'+
'<p><b>Longitude:</b>'+ longitude011 +'</p>'+
'<p><b>Status:</b> Em funcionamento</p>'+
'</div>'+
'</div>';
var infowindow011 =newgoogle.maps.InfoWindow({
content: contentString011
});
//Configure o maker (Não usado no MVP0)
var markerPrincipal =newgoogle.maps.Marker({
position: PontoPrincipal,
animation:google.maps.Animation.BOUNCE,
icon: {
url: url
}
});
//Evento clique para aparecer o balão (Não usado no MVP0)
markerPrincipal.addListener('click', function() {
infowindowPrincipal.open(map, markerPrincipal);
});
//Configure o maker
var marker001 =newgoogle.maps.Marker({
position: Ponto001,
animation:google.maps.Animation.BOUNCE,
icon: {
url: url
}
});
//Evento clique para aparecer o balão
marker001.addListener('click', function() {
infowindow001.open(map, marker001);
});
//Configure o maker
var marker002 =newgoogle.maps.Marker({
position: Ponto002,
animation:google.maps.Animation.BOUNCE,
icon: {
url: url
}
});
//Evento clique para aparecer o balão
marker002.addListener('click', function() {
infowindow002.open(map, marker002);
});
//Configure o maker
var marker003 =newgoogle.maps.Marker({
position: Ponto003,
animation:google.maps.Animation.BOUNCE,
icon: {
url: url
}
});
//Evento clique para aparecer o balão
marker003.addListener('click', function() {
infowindow003.open(map, marker003);
});
//Configure o maker
var marker004 =newgoogle.maps.Marker({
position: Ponto004,
animation:google.maps.Animation.BOUNCE,
icon: {
url: url
}
});
//Evento clique para aparecer o balão
marker004.addListener('click', function() {
infowindow004.open(map, marker004);
});
//Configure o maker
var marker005 =newgoogle.maps.Marker({
position: Ponto005,
animation:google.maps.Animation.BOUNCE,
icon: {
url: url
}
});
//Evento clique para aparecer o balão
marker005.addListener('click', function() {
infowindow005.open(map, marker005);
});
//Configure o maker
var marker006 =newgoogle.maps.Marker({
position: Ponto006,
animation:google.maps.Animation.BOUNCE,
icon: {
url: url
}
});
//Evento clique para aparecer o balão
marker006.addListener('click', function() {
infowindow006.open(map, marker006);
});
//Configure o maker
var marker007 =newgoogle.maps.Marker({
position: Ponto007,
animation:google.maps.Animation.BOUNCE,
icon: {
url: url
}
});
//Evento clique para aparecer o balão
marker007.addListener('click', function() {
infowindow007.open(map, marker007);
});
//Configure o maker
var marker008 =newgoogle.maps.Marker({
position: Ponto008,
animation:google.maps.Animation.BOUNCE,
icon: {
url: url
}
});
//Evento clique para aparecer o balão
marker008.addListener('click', function() {
infowindow008.open(map, marker008);
});
//Configure o maker
var marker009 =newgoogle.maps.Marker({
position: Ponto009,
animation:google.maps.Animation.BOUNCE,
icon: {
url: url
}
});
//Evento clique para aparecer o balão
marker009.addListener('click', function() {
infowindow009.open(map, marker009);
});
//Configure o maker
var marker010 =newgoogle.maps.Marker({
position: Ponto010,
icon: {
url: url
}
});
//Evento clique para aparecer o balão
marker010.addListener('click', function() {
infowindow010.open(map, marker010);
});
//Configure o maker
var marker011 =newgoogle.maps.Marker({
position: Ponto011,
animation:google.maps.Animation.BOUNCE,
icon: {
url: url
}
});
//Evento clique para aparecer o balão
marker011.addListener('click', function() {
infowindow011.open(map, marker011);
});
//Inclua os markers no mapa
marker001.setMap(map);
marker002.setMap(map);
marker003.setMap(map);
marker004.setMap(map);
marker005.setMap(map);
marker006.setMap(map);
marker007.setMap(map);
marker008.setMap(map);
marker009.setMap(map);
marker010.setMap(map);
marker011.setMap(map);
//Desenhe os círculos
draw_circle =null;
DrawCircle(map, Ponto001);
draw_circle =null;
DrawCircle(map, Ponto002);
draw_circle =null;
DrawCircle(map, Ponto003);
draw_circle =null;
DrawCircle(map, Ponto004);
draw_circle =null;
DrawCircle(map, Ponto005);
draw_circle =null;
DrawCircle(map, Ponto006);
draw_circle =null;
DrawCircle(map, Ponto007);
draw_circle =null;
DrawCircle(map, Ponto008);
draw_circle =null;
DrawCircle(map, Ponto009);
draw_circle =null;
DrawCircle(map, Ponto010);
draw_circle =null;
DrawCircle(map, Ponto011);
}
//Mostra o mapa na tela
DisplayGoogleMap();
//Função para desenhar o círculo
functionDrawCircle(map, center) {
rad =64373
if (draw_circle !=null) {
draw_circle.setMap(null);
}
draw_circle =newgoogle.maps.Circle({
center: center,
radius: rad,
strokeColor:"#FF0000",
strokeOpacity:0.6,
strokeWeight:1,
fillColor:"#FF0000",
fillOpacity:0.30,
map: map
});
}
//function resizeMap() {
// var myMap = document.getElementById('mapDiv');
// myMap.style.height = 100%;
// myMap.style.width = 100%;
//}
//resizeMap();
</script>
view raw Index.cshtml hosted with ❤ by GitHub
J
Jeferson Araujo Leal