嵌入谷歌地图不显示在 chrome 中
Posted
技术标签:
【中文标题】嵌入谷歌地图不显示在 chrome 中【英文标题】：Embeded google maps does not show in chrome 【发布时间】：2016-10-03 01:49:48 【问题描述】：我有一个使用 google maps api 的网页，前一段时间我工作得很好，但最近它没有显示 un google Chrome，我认为这是因为一些新版本，但我真的找不到故障。
谢谢
<!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: '<Ant',
nextText: 'Sig>',
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ércoles','Jueves','Viernes','Sábado'],
dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
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>
【问题讨论】：
getCurrentPosition() and watchPosition() are deprecated on insecure origins的可能重复 navigator.geolocation not working的可能重复 Location Java Script ceases to work when deployed 的可能副本 【参考方案1】：当我在自己的本地加载它并查看错误时，我得到了这些；
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
您在第 134 行使用了 getCurrentPosition。希望这会有所帮助，您似乎需要拥有/使用 HTTP/SSL
查看位于here 的 Gmap 文档，它没有说明这是一项要求，我会就此提交反馈。
要查看其他错误，请在我的开发箱 here 上直接复制您的代码。
祝你好运~！
【讨论】：
这正是问题所在，我刚刚添加了 ssl 证书，现在它工作得很好。谢谢以上是关于嵌入谷歌地图不显示在 chrome 中的主要内容，如果未能解决你的问题，请参考以下文章