Verktyg Visningsval
2012-04-15, 21:28   #1

edgren

Medlem

edgrens avatar

Plats: Skoghall

Registrerad: jan 2004

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å.
__________________
~ Vänligen citera mig, om du vill få ett snabbare svar | Jag har Aspergers syndrom ~
Om mig . Mina datorer . Mitt Steam-konto . Mitt galleri . Vädret just nu . Facebook . Google+
edgren är inte uppkopplad
2012-04-16, 04:38   #2

edgren

Medlem

edgrens avatar

Plats: Skoghall

Registrerad: jan 2004

Problemet är löst. Det var tydligen obligatoriskt att ha textfältet inom DIV-taggar.
__________________
~ Vänligen citera mig, om du vill få ett snabbare svar | Jag har Aspergers syndrom ~
Om mig . Mina datorer . Mitt Steam-konto . Mitt galleri . Vädret just nu . Facebook . Google+
edgren är inte uppkopplad
Senaste nyheterna

Redaktionens senaste nyhetsrubriker

Sök jobb