Google Maps + Places API - Cannot read property 'value' of null
Hej.
Jag håller på att vidareutvecklar min "Vädret just nu"-sida och är på den sista funktionen som jag har kvar på "att göra"-listan, innan allt är klart inför en lansering. Jag och en till har stirrat oss blinda på källkoden för att försöka hitta och åtgärda problemet, men vi finner ingenting som kan orsaka felet.
Varje gång jag laddar om sidan, dyker detta felmeddelande upp i konsollen (CTRL + Shift + J) i Google Chrome: Uncaught TypeError: Cannot read property 'value' of null. Jag har tagit källkoden för Googles exempelsida för Google Places API och enbart behållit det som är viktigast - den "nya" exempelsidan funkar lika bra som på deras server. Jag lade till places i libraries och kopierade det som var viktigt att få det jag är ute efter att fungera och jag fick det felmeddelande som jag berättade om tidigare i detta inlägg.
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=weather,places&sensor=false&key={min API-nyckel}"></script>
JavaScript
function show_position(p) {
// KONTROLL: Platsen hittades
navigator.geolocation.getCurrentPosition(function(position) {
// KONFIGURATION
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var speed = position.coords.speed;
var altitude = position.coords.altitude;
var heading = position.coords.heading;
var coords = new google.maps.LatLng(latitude, longitude);
// KONFIGURATION
var mapOptions = {
// INSTÄLLNING: Gatuvy
streetViewControl: false,
// INSTÄLLNING: Navigation
mapTypeControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
// INSTÄLLNING: Zoom-fältet
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_LEFT
},
// INSTÄLLNING: Vanlig karta
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// STARTA KARTAN
map = new google.maps.Map(
document.getElementById('weather-map'), mapOptions
);
// PLACERA UT EN MARKER
var marker = new google.maps.Marker({
position: coords,
map: map
});
// PLACERA UT EN CIRKEL
var circle = new google.maps.Circle({
center: coords,
radius: accuracy,
map: map,
fillColor: '#3333ff',
fillOpacity: 0.4,
strokeColor: '#3333ff',
strokeOpacity: 0.8,
strokeWeight: 1
});
// KONFIGURATION: Molnaktivitet
var cloudControlDiv = document.createElement('div');
var cloudControl = new CloudControl(cloudControlDiv, map);
// KONFIGURATION: Fullskärmskarta
var fullscreenControlDiv = document.createElement('div');
var fullscreenControl = new FullscreenControl(fullscreenControlDiv, map);
// KONFIGURATION: Normal karta
var normalscreenControlDiv = document.createElement('div');
var normalscreenControl = new NormalscreenControl(normalscreenControlDiv, map);
// KONFIGURATION: "Min plats"
var myplaceControlDiv = document.createElement('div');
var myplaceControl = new MyPlaceControl(myplaceControlDiv, map, coords);
// POSITIONERING
cloudControlDiv.index = 1;
myplaceControlDiv.index = 2;
fullscreenControlDiv.index = 3;
normalscreenControlDiv.index = 4;
// PLACERING
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(cloudControlDiv);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(fullscreenControlDiv);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(normalscreenControlDiv);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(myplaceControlDiv);
// MOLNAKTIVITET
var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);
// HÖJD ÖVER / UNDER HAVSYTAN
elevator = new google.maps.ElevationService();
google.maps.event.addListener(map, 'click', getElevation);
// CENTRERA KARTAN
map.setCenter(coords);
// KONTROLL: Noggrannheten är över 30 meter
if(accuracy > 30) {
map.fitBounds(circle.getBounds());
// KONTROLL: Noggrannheten är under 30 meter
} else {
map.setZoom(14);
}
// GOOGLE PLACES API
var input = document.getElementById('google-search');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if(place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
map.setCenter(place.geometry.location);
map.setZoom(17);
}
});
// LADDA VÄDERPROGNOS
$('#weather-data').load('jquery-fetch/fetch-weatherdata.php?coor=' + latitude.toFixed(6).replace(/\./, '') + ',' + longitude.toFixed(6).replace(/\./, '') + '&coordinates=' + latitude.toFixed(6) + ',' + longitude.toFixed(6) + '&accuracy=' + accuracy + '&speed=' + speed + '&altitude=' + altitude + '&heading=' + heading);
}, showError);
}
function initialize() {
$('.map-fullsize').hide();
$('#weather-map').hide();
$('#weather-data').hide();
if(geo_position_js.init()) {
var waiting_time = $('#getting-position').html('Försöker att hitta din aktuella position. Var god vänta...');
t = setTimeout(function() {
waiting_time.html('Det tar längre tid att hitta din position, än vad det egentligen borde göra.<br><br><b>Tips</b><br>GPS-mottagaren har lättare att hitta dig om du är utomhus. Täta moln som till exempel vid ett åskoväder, kan göra det svårare för satelliterna att hämta din position.');
}, 60000);
geo_position_js.getCurrentPosition(show_position, function() {
clearTimeout(t);
$('#getting-position').html('<b>Ett fel uppstod</b><br>Din position kunde inte hittas. Se till att vara utomhus för bästa möjliga resultat och försök igen.');
}, {
enableHighAccuracy: true
});
} else {
$('#getting-position').html('<b>Ett fel uppstod</b><br>Det verkar som att din webbläsare inte tillåter GPS-positionering.');
}
}
Detta står med när jag väljer att visa mer om felmeddelandet i konsollen i min webbläsare:
Uncaught TypeError: Cannot read property 'value' of null
kK
tK.(anonymous function).dl
(anonymous function)
(anonymous function)%7Bmain,places,weather%7D.js:9
bf.(anonymous function).Hc.c%7Bmain,places,weather%7D.js:24
O%7Bmain,places,weather%7D.js:9
df%7Bmain,places,weather%7D.js:24
hf%7Bmain,places,weather%7D.js:24
(anonymous function)
ef.controls
(anonymous function)%7Bmain,places,weather%7D.js:24
b%7Bmain,places,weather%7D.js:10
bf.(anonymous function).Hc%7Bmain,places,weather%7D.js:24
O%7Bmain,places,weather%7D.js:9
bf.(anonymous function).Hc%7Bmain,places,weather%7D.js:24
af.(anonymous function).ke%7Bmain,places,weather%7D.js:23
bf.(anonymous function).Hc%7Bmain,places,weather%7D.js:24
ff%7Bmain,places,weather%7D.js:24
(anonymous function)%7Bcommon,util,geocoder,map,layers,onion,weather_impl,controls,places_impl%7D.js:9
Har ni någon aning om vad som kan vara felet? Jag är tacksam för all hjälp jag kan få.
Citera mig om du vill att jag ska hitta till ditt svar.
airikr.me /device:desktop. Andra projekt: Keizai, Koroth & Serenum.
