5

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 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);
    }
});


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.com/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.com/maps/api/js?key={my API key}&sensor=false&libraries=weather,places"></script>

How can I fix my small problem?

Thanks in advance!

3 Answers 3

8

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

1
  • 1
    Can you please update your answer for benefit of others
    – Prakhar
    Dec 10, 2016 at 22:30
5

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.

-1

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

1
  • please ask questions in the comment section
    – 1-14x0r
    Apr 2, 2020 at 22:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.