У меня есть следующая страница, на которой отображается карта Google с использованием API Карт Google.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#map{
width:400px;
height:400px;
border:2px solid black;
margin-top:20px;
}
</style>
</head>
<body>
<div id="location">
<p>Your location will be displayed here</p>
</div>
<div id="map"></div>
<script>
var map;
var div = document.getElementById("location");
window.onload = getMyLocation;
function getMyLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(displayLocation,displayError);
}else{
alert("Sorry, your browser does not support geolocation");
}
}
function displayLocation(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
div.innerHTML = "You are at Latitude: "+latitude+", Longitude: "+longitude;
showMap(position.coords);
}
function displayError(error){
if(error.code==0){
div.innerHTML="An unknown error occurred.";
}else if(error.code==1){
div.innerHTML="You denied the request for Geolocation.";
}else if(error.code==2){
div.innerHTML="Location information is unavailable.";
}else if(error.code==3){
div.innerHTML="The request to get user location timed out.";
}
}
function showMap(coords){
var googleLatAndLong = new google.maps.LatLng(coords.latitude,coords.longitude);
var mapOptions = {
zoom:10,
center:googleLatAndLong,
maptypeId:google.maps.MapTypeId.ROADMAP
};
var mapDiv=document.getElementById("map");
map = new google.maps.Map(mapDiv,mapOptions);
var title="Your location";
var content = "You are here: "+coords.latitude+", "+coords.longitude;
addMarker(map,googleLatAndLong,title,console);
}
function addMarker(map,latlong,title,content){
var markerOptions = {
position:latlong,
map:map,
title:title,
clickable:true
};
var marker = new google.maps.Marker(markerOptions);
var infoWindowOptions = {
content:content,
position:latlong
};
var infoWindow = new google.maps.InfoWindow(infoWindowOptions);
google.maps.event.addListener(marker,"click",function(){
infoWindow.open(map);
});
}
</script>
<script src="https://maps.google.com/maps/api/js?sensor=true"></script>
</body>
</html>Примечание. Фрагмент кода может не работать, поскольку SO блокирует запрос API геолокации.
Когда я загружаю страницу, карта отображается правильно с маркером, но когда я нажимаю на маркер, ничего не происходит (он должен отображать окно), и консоль JS выдает следующую ошибку
Uncaught InvalidValueError: setContent: не строка; и [консоль объекта]
Я читал похожие сообщения, и кажется, проблема в том, что какое бы значение ни имел Content, это не строка. Здесь объявлена единственная переменная содержимого
var content = "You are here: "+coords.latitude+", "+coords.longitude;
addMarker(map,googleLatAndLong,title,console);
}
function addMarker(map,latlong,title,content){
var markerOptions = {
position:latlong,
map:map,
title:title,
clickable:true
};
var marker = new google.maps.Marker(markerOptions);
var infoWindowOptions = {
content:content,Я попытался преобразовать coords.latitude и coords.longitude в строки (не в этой версии кода), и это не имело значения.
Любые идеи о том, что вызывает это? Код взят из программы Head First HTML5, и они вообще не упоминают об этой проблеме.
