'myFunction is not a function', JS & Google Maps v 3?

Question

Hello I cannot figure out why I get this error.

I've got a list with inputs which values contain lat/long/name/address.

Printing the markers on the map works fine, using the infowin workED fine, till I realized that it only openend the same info in all windows. Soo, obviously I needed to attach this (the marker i just clicked) to the eventListner.

But, when doing this I get an error saying view.createMarkerHTML is not a function.

Question: What do I do to attach the right info to be open, on the right marker?

view = {
        map: {
            init: function init (){
                view.map.initMap();
            },

            initMap: function initMap() {
                if(navigator.geolocation) {
                    function hasPosition(position) {
                        var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),     
                        myOptions = {
                            zoom: 12,
                            center: point,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                        },   
                        mapDiv = document.getElementById("map"),
                        map = new google.maps.Map(mapDiv, myOptions);                        
                        view.map.handleMarkers(map);

                    }                    
                    navigator.geolocation.getCurrentPosition(hasPosition);

                } 
            },


            handleMarkers: function handleMarkers(map) {
                var list = $('#pois input'),
                    l = list.length,
                    i = 0, lat = '', long = '', marker = {}, theName = '', address = '', info = {};



                 for (i = 0; i < l; i += 1) {
                    info = $(list[i]).val().split('|');
                    lat = parseFloat(info[0], 10);
                    long = parseFloat(info[1], 10);
                    theName = info[2];
                    address = info[3];

                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(lat, long),
                        map: map,
                        icon: icon
                    }); 



                    google.maps.event.addListener(marker, 'click', function() {
                        currentMarker = this;view.map.createMarkerHTML(map, theName, address);
                    });                  
                 } 
            } ,

             createMarkerHTML: function createMarkerHTML(map, theName, address) {

                var contentString =
                    '<div id="gMapInfoWin">' +
                        '<h1>' + theName + '</h1>' +
                        '<ul>' +
                            '<li>' + address + '</li>' +
                        '</ul>' +
                    '</div>'
                ;

                currentMarker.infowindow = new google.maps.InfoWindow({
                    content: contentString
                });

                currentMarker.infowindow.open(map, currentMarker);
            } 
       }
};

Answer 1

Shouldn't you use a closure to keep the values of your variables set in the loop ?

(function(theName, address) {
    google.maps.event.addListener(marker, 'click', function() {
        currentMarker = this;view.map.createMarkerHTML(map, theName, address);
    });
}(theName, address));

You could even add your marker in parameter instead of using currentMarker

Answer 2

I'll wager that it's a scoping issue. Not having access to your libs I can't be sure that this will work, but try replacing:

google.maps.event.addListener(marker, 'click', function() {
    currentMarker = this;view.map.createMarkerHTML(map, theName, address);
});

with this:

  google.maps.event.addListener(marker, 
                                'click', 
                                createClickListener(  this, 
                                                      map, 
                                                      theName, 
                                                      address ) );

and then add this function somewhere else in the program:

function createClickListener( cm, map, theName, address )
{
    return function() {
        currentMarker = cm;
        view.map.createMarkerHTML(map, theName, address);
    }
}

Answer 3

for (i = 0; i < l; i += 1) {
                    info = $(list[i]).val().split('|');
                    lat = parseFloat(info[0], 10);
                    long = parseFloat(info[1], 10);

                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(lat, long),
                        map: map,
                        icon: icon
                    }); 

                   marker.theName = info[2];
                   marker.address = info[3];

                    google.maps.event.addListener(marker, 'click', function() {
                        currentMarker = this;   
                        m_name = this.theName;    
                        m_address = this.address        
                        view.map.createMarkerHTML(map, m_name, m_address);
                    });                  
                 } 

marker.theName = info[2];
marker.address = info[3];
currentMarker = this;
m_name = this.theName;
m_address = this.address

... is the soulution!