Uncaught TypeError: window.initMap is not a function

Question

edit: Fixed it by moving the to after the js script call. then fixed the bugs i added by attempting to fix my code before. thanks for the help!

I've been working on re-organizing my code so the project will be more robust (vs how all the javascript was embedded within the html file), however when moving it to a new javascript file and calling the script I receive the error "Uncaught TypeError: window.initMap is not a function".

If there's any tips you can offer me/fixes to this error that'd be super appreciated!

the HTML Code:

    
{% load staticfiles %}


    
        {% block title %} RacksOnRacks{% endblock %}
        
         
        {% block script_block %}{%  endblock %}
    

    
        
            
                
{#                TODO make this match onclick initmap#}
            
            
                RACKS ON RACKS
            
        
        {% block body_block %}{% endblock %}

Other HTML File

    {%  extends 'racks/baselayer.html' %}
    {%  load staticfiles %}
    {% block title %} Racks On Racks: Find Nearby Places to Secure Your Bike! {% endblock %}


{% block script_block %}
    
    
    
    

{%  endblock %}

{% block body_block %}
    


    
{% endblock %}

and the JS:

    function initMap(){
    var myLatLngGlobal;
    var map;
    var filterDistance;

    var self = {
        // starts all the processes
        //function placeRackMarkers(locations, map) {
        initialize: function () {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                    myLatLngGlobal = myLatLng;
                }, function () {
                    handleLocationError(true, infoWindow, map.getCenter());
                });
            } else {
                // Browser doesn't support Geolocation
                handleLocationError(false, infoWindow, map.getCenter());
            }

            var zoom = 12;
            //var filterDistance = 1000;

            //var latlng = new google.maps.LatLng(lat, lng);
            //myLatLngGlobal = latlng;
            var options = {
                zoom: zoom,
                center: myLatLngGlobal,
                //mapTypeId:
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), options);
            var marker = new google.maps.Marker({
                position: myLatLngGlobal,
                map: map,
                title: 'Hello World!',
                draggable: false,
                animation: google.maps.Animation.DROP

            });
            self.attachHandlers();
            self.displayRacks();
            //add all the intialiazing functions (self.(....)
        },

        //Event handlers attached
        attachHandlers: function () {
            $("#filterDistance").click(function () {
                filterDistance = "#filterDistance";
            });
            //console.log("filterDistance = " + self.filterDistance);
        },

        /*
         var filterDistance1 = document.getElementById("filters").value; //put outside of self var if this doesnt work
         console.log("filterDistance =" + filterDistance1);

         filterDistance = filterDistance1;
         */



        displayRacks: function () {
            var locations;
            $.get('/racks/map_locations/', {}, function (data) {
                locations = data['racks'];

                filterPlaceRacks(locations, myLatLngGlobal, map);
            });
        }
    };


    function placeRackMarkers(locations, map) {

        var marker, i;

        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map
            });
        }
    }

    function filterPlaceRacks(racks, map) {
        var filteredRacks = [];
        for (var i = 0; i < racks.length; i++) {
            if (checkDistance(racks[i]) <= self.filterDistance) {

                filteredRacks.push(racks[i]);
                console.log(filteredRacks);
            }
        }
        placeRackMarkers(filteredRacks, map);
    }


    function checkDistance(rack) {
        var rackLatLng = new google.maps.LatLng(rack[1], rack[2]);
        return (google.maps.geometry.spherical.computeDistanceBetween(rackLatLng, myLatLngGlobal));
    }

    return self;
}

    $(document).ready(function () {
        var googleMap = initMap();
        googleMap.initialize();
    });

Thanks again! PS. Sorry for the poorly structured code, still a work in progress.

Also using a django framework, and ajax with jquery

Uncaught TypeError: window.initMap is not a function

Answers (1)

Related Questions