I'm currently upgrading my website with Google Place API and I have one more problem away until I'm getting it to work and I don't understand why I'm getting this error message: Uncaught TypeError: Cannot read property 'value' of null. I have readed the whole Places Library and even "scanned" the whole example file but my code is the exactly the same as theirs.

Here's my code:

var geocoder;
var map;
var myplace = '<?php echo str_replace(" ", "-", utf8_encode($_COOKIE["wrn-myplace"])); ?>';
var myplace_clean = '<?php echo $_COOKIE["wrn-myplace"]; ?>';

geocoder = new google.maps.Geocoder();
geocoder.geocode({'address' : myplace_clean}, function(results, status) {
    if(status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var myplace_center = results[0].geometry.location;

        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });

        var myplaceControlDiv = document.createElement('div');
        var myplaceControl = new MyPlaceControl(myplaceControlDiv, map, myplace_center);

        myplaceControlDiv.index = 2;
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(myplaceControlDiv);
    } else {
        alert('Funktionen "geocoder" kunde inte användas på grund av följande fel: ' + status);
    }
});

var mapOptions = {
    streetViewControl: false,

    mapTypeControl: true,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
    },

    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL,
        position: google.maps.ControlPosition.TOP_LEFT
    },

    mapTypeId: google.maps.MapTypeId.ROADMAP
};



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


var input = document.getElementById('google-search');
var autoplete = new google.maps.places.Autoplete(input);

autoplete.bindTo('bounds', map);
google.maps.event.addListener(autoplete, 'place_changed', function() {
    var place = autoplete.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);
    }
});


var cloudControlDiv = document.createElement('div');
var cloudControl = new CloudControl(cloudControlDiv, map);

cloudControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(cloudControlDiv);


var fullscreenControlDiv = document.createElement('div');
var fullscreenControl = new FullscreenControl(fullscreenControlDiv, map);

fullscreenControlDiv.index = 3;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(fullscreenControlDiv);


var boxText = document.createElement("div");
boxText.style.cssText = 'background-color: #000000; border: 1px solid #ffffff; color: #eaeaea; font-family: Arial; font-size: 11px; padding: 5px 10px 5px 10px;';
boxText.innerHTML = 'Du är här';

var myPopup = {
        content: boxText,
        disableAutoPan: false,
        maxWidth: 300,
        pixelOffset: new google.maps.Size(-100, -100),
        zIndex: null,
        boxStyle: {
            opacity: 0.80,
            width: '200px'
        },
        closeBoxMargin: '3px',
        closeBoxURL: '.png',
        infoBoxClearance: new google.maps.Size(1, 1),
        isHidden: false,
        enableEventPropagation: true
};


var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);

elevator = new google.maps.ElevationService();
google.maps.event.addListener(map, 'click', getElevation);

map.setZoom(10);

$('#weather-data').load('jquery-fetch/fetch-weatherdata.php?place=' + myplace);

show_position is called in the initialize function and this is the "description" for my error message:

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)

I'm calling for the JS file from Google like this:

<script type="text/javascript" src="={my API key}&sensor=false&libraries=weather,places"></script>

How can I fix my small problem?

Thanks in advance!

I'm currently upgrading my website with Google Place API and I have one more problem away until I'm getting it to work and I don't understand why I'm getting this error message: Uncaught TypeError: Cannot read property 'value' of null. I have readed the whole Places Library and even "scanned" the whole example file but my code is the exactly the same as theirs.

Here's my code:

var geocoder;
var map;
var myplace = '<?php echo str_replace(" ", "-", utf8_encode($_COOKIE["wrn-myplace"])); ?>';
var myplace_clean = '<?php echo $_COOKIE["wrn-myplace"]; ?>';

geocoder = new google.maps.Geocoder();
geocoder.geocode({'address' : myplace_clean}, function(results, status) {
    if(status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        var myplace_center = results[0].geometry.location;

        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location
        });

        var myplaceControlDiv = document.createElement('div');
        var myplaceControl = new MyPlaceControl(myplaceControlDiv, map, myplace_center);

        myplaceControlDiv.index = 2;
        map.controls[google.maps.ControlPosition.TOP_RIGHT].push(myplaceControlDiv);
    } else {
        alert('Funktionen "geocoder" kunde inte användas på grund av följande fel: ' + status);
    }
});

var mapOptions = {
    streetViewControl: false,

    mapTypeControl: true,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.SMALL
    },

    zoomControl: true,
    zoomControlOptions: {
        style: google.maps.ZoomControlStyle.SMALL,
        position: google.maps.ControlPosition.TOP_LEFT
    },

    mapTypeId: google.maps.MapTypeId.ROADMAP
};



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


var input = document.getElementById('google-search');
var autoplete = new google.maps.places.Autoplete(input);

autoplete.bindTo('bounds', map);
google.maps.event.addListener(autoplete, 'place_changed', function() {
    var place = autoplete.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);
    }
});


var cloudControlDiv = document.createElement('div');
var cloudControl = new CloudControl(cloudControlDiv, map);

cloudControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(cloudControlDiv);


var fullscreenControlDiv = document.createElement('div');
var fullscreenControl = new FullscreenControl(fullscreenControlDiv, map);

fullscreenControlDiv.index = 3;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(fullscreenControlDiv);


var boxText = document.createElement("div");
boxText.style.cssText = 'background-color: #000000; border: 1px solid #ffffff; color: #eaeaea; font-family: Arial; font-size: 11px; padding: 5px 10px 5px 10px;';
boxText.innerHTML = 'Du är här';

var myPopup = {
        content: boxText,
        disableAutoPan: false,
        maxWidth: 300,
        pixelOffset: new google.maps.Size(-100, -100),
        zIndex: null,
        boxStyle: {
            opacity: 0.80,
            width: '200px'
        },
        closeBoxMargin: '3px',
        closeBoxURL: 'http://p.yusukekamiyamane./icons/search/fugue/icons/cross-octagon-frame.png',
        infoBoxClearance: new google.maps.Size(1, 1),
        isHidden: false,
        enableEventPropagation: true
};


var cloudLayer = new google.maps.weather.CloudLayer();
cloudLayer.setMap(map);

elevator = new google.maps.ElevationService();
google.maps.event.addListener(map, 'click', getElevation);

map.setZoom(10);

$('#weather-data').load('jquery-fetch/fetch-weatherdata.php?place=' + myplace);

show_position is called in the initialize function and this is the "description" for my error message:

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)

I'm calling for the JS file from Google like this:

<script type="text/javascript" src="http://maps.googleapis./maps/api/js?key={my API key}&sensor=false&libraries=weather,places"></script>

How can I fix my small problem?

Thanks in advance!

• javascript
• google-maps-api-3

3 Answers 3

The problem is now solved. Apparently it was mandatory to have the text field within the DIV tags.

Got the same error. Turned out the element whose id Places was expected, didn't exist. Check for mistyped element ids, or copy/pasted code.

Got same error. I had turned out to be because I had was calling initAutoplete for the same address fields, twice. Once I removed the redundant request, it worked without error.