Question

I’m using this code to get the Google Maps JavaScript v3 map to work. But when I click me into the page that this map is visible on, I’m keep getting Uncaught TypeError: Cannot read property '__e3_' of undefined. It worked perfectly yesterday and I haven’t done anything on the website since then!

var marker;
var map;

function initialize() {
    var coordinates = new google.maps.LatLng(<?php if(!empty($photo['coordinates_latitude']) OR !empty($photo['coordinates_longitude'])) { echo $photo['coordinates_latitude'].','.$photo['coordinates_longitude']; } else { echo '59.328648,13.485672'; } ?>);

    // KOORDINATER: Manuell uppdatering
    $('#update-map').click(function() {
        var lat = parseFloat(document.getElementById('coordinates-latitude').value);
        var lng = parseFloat(document.getElementById('coordinates-longitude').value);
        var latlong_update = new google.maps.LatLng(lat, lng);

        $('#coordinates-select option[value=""]').attr('selected', 'selected');

        marker.setPosition(latlong_update);
        map.setCenter(latlong_update);
    });


    // KOORDINATER: Förvalda koordinater
    $('select[name="coordinates"]').change(function() {
        var split = $(this).val().split(',');
        var latlong_static = new google.maps.LatLng(split[0], split[1]);

        $('input[name="textfield-latitude"]').val(split[0]);
        $('input[name="textfield-longitude"]').val(split[1]);
        $('#check-04').removeAttr('disabled').attr({'checked': (localStorage.getItem('approx-coordinates') == 1 ? true : false)});;
        $('#checkbox-04-text').removeClass('color-grey');
        $('#goto-coordinates').show();

        marker.setPosition(latlong_static);
        map.setCenter(latlong_static);
    });


    // KOORDINATER: Ta bort koordinater
    $('#delete-coordinates').click(function() {
        var latlong_clear = new google.maps.LatLng(59.328648,13.485672);
        var waschecked_coor = $('#check-04:checked').val() ? 1 : 0;

        marker.setPosition(latlong_clear);
        map.setCenter(latlong_clear);
        localStorage.setItem('approx-coordinates', waschecked_coor);

        $('input[name="textfield-latitude"]').val('');
        $('input[name="textfield-longitude"]').val('');
        $('#goto-coordinates').hide();
        $('#check-04').attr({'disabled': 'disabled', 'checked': false});
        $('#checkbox-04-text').addClass('color-grey');
        $('#coordinates-select option[value=""]').attr('selected', 'selected');
    });


    /******************************************************************************
    **                  THE CODE BELOW IS CAUSING THE PROBLEM                    **
    ******************************************************************************/

    // KOORDINATER: Koordinater genom markör på kartan
    google.maps.event.addListener(marker, 'dragend', function(a) {
        var waschecked_coor = $('#check-04:checked').val() ? 1 : 0;
        localStorage.setItem('approx-coordinates', waschecked_coor);

        $('input[name="textfield-latitude"]').val(a.latLng.lat().toFixed(6));
        $('input[name="textfield-longitude"]').val(a.latLng.lng().toFixed(6));
        $('#check-04').removeAttr('disabled').attr({'checked': (localStorage.getItem('approx-coordinates') == 1 ? true : false)});
        $('#checkbox-04-text').removeClass('color-grey');
        $('#goto-coordinates').show();

        map.panTo(a.latLng);
    });

    /******************************************************************************
    **                  THE CODE ABOVE IS CAUSING THE PROBLEM                    **
    ******************************************************************************/



    var myOptions = {
        center: coordinates,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        streetViewControl: false
    };

    map = new google.maps.Map(document.getElementById('map-coordinates'), myOptions);

    marker = new google.maps.Marker({
        position: coordinates,
        draggable: true,
        map: map
    });
}





// FUNKTION: Flytta markören
function moveMarker() {
    var lat = parseFloat(document.getElementById('coordinates-latitude').value);
    var lng = parseFloat(document.getElementById('coordinates-longitude').value);
    var newLatLng = new google.maps.LatLng(lat, lng);

    marker.setPosition(newLatLng);
    map.setCenter(newLatLng);
}




// JQUERY
$(document).ready(function() {

    // INITIERA KARTAN
    initialize();


    // KRYSSRUTA: Bakgrundsbild
    $('input[name="checkbox-02"]').click(function() {

        // KONTROLL: Ikryssad
        if($(this).is(':checked')) {
            var waschecked_wallpaper = $('#check-01:checked').val() ? 1 : 0;
            localStorage.setItem('wallpaper', waschecked_wallpaper);

            $('#check-01').attr({'disabled': 'disabled', 'checked': false});
            $('#checkbox-01-text').addClass('color-grey');


        // KONTROLL: Ej ikryssad
        } else {
            $('#check-01').removeAttr('disabled').attr({'checked': (localStorage.getItem('wallpaper') == 1 ? true : false)});
            $('#checkbox-01-text').removeClass('color-grey');
        }

    });



    // TEXTFÄLT: Koordinater
    $('input[name="textfield-latitude"], input[name="textfield-longitude"]').keyup(function() {

        // KONTROLL: Textfältet är inte tomt
        if($(this).val().length == 0) {
            var waschecked_coor = $('#check-01:checked').val() ? 1 : 0;
            localStorage.setItem('approx-coordinates', waschecked_coor);

            $('#goto-coordinates').hide();
            $('#check-04').attr({'disabled': 'disabled', 'checked': false});
            $('#checkbox-04-text').addClass('color-grey');


        // KONTROLL: Textfältet är tomt
        } else {
            $('#goto-coordinates').show();
            $('#check-04').removeAttr('disabled').attr({'checked': (localStorage.getItem('approx-coordinates') == 1 ? true : false)});
            $('#checkbox-04-text').removeClass('color-grey');
        }

    });

});

If I remove google.maps.event.addListener(marker, 'dragend', function(a) { and the stuff in it, the code works perfectly and the map is visible on the page again.

Can you see what the problem is? As I said before, I haven’t done anything else to the code from then it worked to now.

Thanks in advance.

Answer 1

The “marker” variable is undefined in that code (at least today). Don’t know how that could have happened without you changing your code, suppose the timing could have changed.

If you define the listeners that depend on “marker” after you define it, it should solve at least this problem.

var marker = new google.maps.Marker({
    position: coordinates,
    draggable: true,
    map: map
});

And maybe change it to be the global marker variable you have defined in the global namespace (by removing the “var” from in front of it).

working link