Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share
menu search
person
editAsk a Question
Welcome To Ask or Share your Answers For Others

Categories

javascript - Embeded google maps does not show in chrome

in Technique[技术] by (71.8m points)

I have a web page where I use a the google maps api, I was working fine a time ago but recently it doesnt shows up un google Chrome, i think it is becouse of some new release, but I really cant find the glitch.

Thanks

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <title>Google Maps</title>

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <link rel="alternate" media="only screen and (max-width: 640px)"
 href="http://lavadito.com.mx/l2.html">
<style>
html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    #map_canvas{
        height:100%;
    }   

#floating-panel {
  position: absolute;
  top: 1px;
  left: 0%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: left;
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
 width: 20%;
}
#address {
height: 100%;
 width: 95%;
}
#submit {
height: 100%;
 width: 95%;
}
#nombre {
height: 100%;
 width: 95%;
}
#telefono {
height: 100%;
 width: 95%;
}
#datepicker {
height: 100%;
 width: 25%;
}
    </style>
  </head>
  <body>
    <div id="floating-panel">
   <input id="address" type="textbox" placeholder="Tu ubicaci?n actual"  onfocus="this.select();" onmouseup="return false;"><br>
   <input id="submit" type="button" value="Buscar domicilio"><br>
<input id="nombre" type="textbox" placeholder="Escribe tu Nombre"><br>
      <input id="telefono" type="textbox" placeholder="Ingresa tu telefono"><br>
<input id="datepicker" type="button" name="datepicker" readonly="readonly" size="12" value="Fecha del servicio" />
<select id="hora" name="time">
  <option value="07:00">07:00</option>
<option value="07:30">07:30</option>
<option value="08:00">08:00</option>
<option value="08:30">08:30</option>
<option value="09:00">09:00</option>
<option value="09:30">09:30</option>
<option value="10:00">10:00</option>
<option value="10:30">10:30</option>
<option value="11:00">11:00</option>
<option value="11:30">11:30</option>
<option value="12:00">12:00</option>
<option value="12:30">12:30</option>
<option value="13:00">13:00</option>
<option value="13:30">13:30</option>
<option value="14:00">14:00</option>
<option value="14:00">14:00</option>
<option value="15:00">15:00</option>
<option value="15:30">15:30</option>
<option value="16:00">16:00</option>
<option value="16:30">16:30</option>
<option value="17:00">17:00</option>
<option value="17:30">17:30</option>
<option value="18:00">18:00</option>
<option value="18:30">18:30</option>
<option value="19:00">19:00</option>
<option value="19:30">19:30</option>
</select>
<input id="enviar" type="button" value="Solicitar Servicio"><br>

    </div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script type="text/javascript">
jQuery(function($){
    $.datepicker.regional['es'] = {
        closeText: 'Cerrar',
        prevText: '&#x3c;Ant',
        nextText: 'Sig&#x3e;',
        currentText: 'Hoy',
        monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
        'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
        monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
        'Jul','Ago','Sep','Oct','Nov','Dic'],
        dayNames: ['Domingo','Lunes','Martes','Mi&eacute;rcoles','Jueves','Viernes','S&aacute;bado'],
        dayNamesShort: ['Dom','Lun','Mar','Mi&eacute;','Juv','Vie','S&aacute;b'],
        dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','S&aacute;'],
        weekHeader: 'Sm',
        dateFormat: 'dd/mm/yy',
        firstDay: 1,
        isRTL: false,
        showMonthAfterYear: false,
        yearSuffix: ''};
    $.datepicker.setDefaults($.datepicker.regional['es']);
});    

$(document).ready(function() {
   $("#datepicker").datepicker();
 });
</script>

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAOU6jyWM7lNe0g5_I9seN2IgUiD1SbVmU&signed_in=true&callback=initMap"></script>
    <script>        
navigator.geolocation.getCurrentPosition(initialize);
      var mark,map,coords,cal,adres,url,tag,name,phone,date,ubicacion,da,unicrono,dentro,verizone,lavaditozone,arealavadito,lat,lon,test,L1,L2,L3,L4,dir;
var geocoder = new google.maps.Geocoder;




      function initialize(position ) { 


        var mapOptions = {
          zoom: 15,
        // center: { lat:20.57619167, lng:-100.43327778},
          center: {lat: position.coords.latitude, lng: position.coords.longitude},
          mapTypeId: google.maps.MapTypeId.ROADMAP,
      disableDefaultUI: true
        }

        map = new google.maps.Map(document.getElementById('map_canvas'), 
            mapOptions);




coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
geocodeLatLng(geocoder);


  lavaditozone = [
{lat:20.57619167, lng:-100.43327778},
{lat:20.58978333, lng:-100.43327778},
{lat:20.59086111, lng:-100.41706667},
{lat:20.58906111, lng:-100.41329444},
{lat:20.58633889, lng:-100.41222222},
{lat:20.57619167, lng:-100.40174444},
{lat:20.57619167, lng:-100.43327778}
  ];

  // Construct the polygon.
   arealavadito = new google.maps.Polygon({
    path: lavaditozone ,
    strokeColor: '#FF0000',
    strokeOpacity: 1,
    strokeWeight: 10
  });

  arealavadito.setMap(map);



mark = new google.maps.Marker({
            position: coords ,
            map: map,
            draggable:true,
        zIndex : 6
        });
var image= 'ubicacion.png';
 ubicacion = new google.maps.Marker({
            position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
            map: map,
            draggable:false,
        zIndex : 3,
        icon:image
        });


 lat=coords.lat();
 lon=coords.lng();

 L1=0.0664840347144164*lon+27.2669928564081;
 L2=-0.477171328365836*lon-27.3252839835246;
 L3=-2.53886329298587*lon-234.346566271498;
 L4=-0.96845133224769*lon-76.6580114929101;


if ((lon>-100.43327778) && (lat>20.57619167) && lon<-100.40174444 && lat<20.59086111){
    if((lon<-100.41706667) && (lat<L1)){
        verizone=1;
    }
        else{
            if((lon>-100.41706667) && (lon<-100.41329444) && (lat<L2)){
            verizone=1;
            }
            else{
                if((lon>-100.41329444) && (lon<-100.41222222) && (lat<L3)){
                verizone=1;
                }
                else{
                    if((lon>-100.41222222) && (lon<-100.40174444) && (lat<L4)){
                verizone=1;
                }
                }
            }
        }
}
else{
verizone=0;
    }




 document.getElementById('submit').addEventListener('click', function() {
    geocodeAddress(geocoder, map);
dentro = google.maps.geometry.poly.containsLocation(coords, arealavadito);
verizone=1;

  });


google.maps.event.addListener(mark, 'dragend', function(evt){
coords = new google.maps.LatLng(evt.latLng.lat(),evt.latLng.lng());
geocodeLatLng(geocoder);
dentro = google.maps.geometry.poly.containsLocation(coords, arealavadito);
verizone=1;

}); 

      }


function geocodeLatLng(geocoder) {
  geocoder.geocode({'location': coords},
 function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      if (results[1]) {
        dir= results[0].formatted_address;  
    adres=dir.split(",",2);
document.getElementById('address').value = adres ; 
      } else {
        window.alert('No results found');
      }
    } else {
      window.alert('Geocoder failed due to: ' + status);
    }
  });


}

function geocodeAddress(geocoder) {
 var address = document.getElementById('address').value;
  geocoder.geocode({'address': address ,'componentRestrictions':{'country':'MX'}}, function(results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
mark.setMap(null);
      coords=results[0].geometry.location;
dir= results[0].formatted_address;  
    adres=dir.split(",",2);
document.getElementById('address').value = adres  ;
mark = new google.maps.Marker({
            position: coords ,
            map: map,
            draggable:true,
        zIndex : 6
        });
google.maps.event.addListener(mark, 'dragend', function(evt){
coords = new google.maps.LatLng(evt.latLng.lat(),evt.latLng.lng());
geocodeLatLng(geocoder);
}); 

    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });

}



function send() {
date=document.getElementById("datepicker").value;
tag=document.getElementById("hora").value;
name=document.getElementById("nombre").value;
phone=document.getElementById("telefono").value;
unicrono=date+tag;
if(dentro == false || verizone<1){

alert("El domicilio no esta dentro de la zona de servicio");
}
else{
if(name.length <3 || phone.length <3){
alert("completa tus datos");
}
else{
if( da.indexOf(unicrono) < 0){
var r = confirm("Tu servicio se agendara para el dia :");
window.document.title=r;
if (r == true) {
 var url="https://docs.google.com/forms/d/1xufS7TAGJgq3OrcGlFL7SdJGwvBXhJoK5hihdZDLG6U/formResponse?ifq&"+"entry.802337624="+name+"&"+"entry.1040448145="+phone+"&"+"entry.1264793633="+adres+"&"+"entry.474653194="+coords+"&"+"entry.526537781="+ubicacion.position+"&"+"entry.1774726606="+date+"&"+"entry.571470749="+tag+"&"+"entry.91364978="+date+tag+"&submit=Submit";
window.location =url;   
}
}
else{
alert("Horario de servicio no disponible,por favor selecciona otro");
                }
            }
        }
}


function revtemp() {
$.get("https://crossorigin.me/https://docs.google.com/spreadsheets/d/1CG2a49fTJyXxk9CUFNpX4dueGGhxfxmtTZkN5wj0U80/gviz/tq?tqx=out:html&tq=select+K", function(data){
da=data;         
        },"text");
}


window.setInterval(revtemp,5000);


document.getElementById("enviar").addEventListener("click",send);

    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas"></div>
  </body>
</html>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
167 views
Welcome To Ask or Share your Answers For Others

1 Answer

by (71.8m points)

When I load this up in my own local and view the errors I get these ;

getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details. https://csi.gstatic.com/csi?v=2&s=mapsapi3&v3v=26.6&action=apiboot2&e=10_1_0,10_2_0&rt=main.9 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

Which you used getCurrentPosition on line 134. Hope this helps, it seems like you are required to have/use HTTP's / SSL

Taking a look at Gmap documentation located here, it doesn't state this as a requirement, I would submit feedback on that.

To view the other errors take a loot at my direct copy of your code on my dev box here.

Best of luck~!


与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to ShenZhenJia Knowledge Sharing Community for programmer and developer-Open, Learning and Share

Just Browsing Browsing

548k questions

547k answers

4 comments

86.3k users

Most popular tags

Theme made by Momin Raza, Modified by Ostack
Powered by Question2Answer
...