closure geocode loop multiple markers variable

Question

I am stuck with a javascript issue with Google maps.

The code was constructed to work with Lat and long, but I need to convert it to work with Zipcodes, which means I need to implement geocoding.

In the code below everything operates and I have tried to cut down the fat.

The first var is set latLng (based on provided lat lng.

Right below that is the code I am struggling with. I have reduced it as much as i can.

I can get into it, but I can't pull the results out of it.

It was wrapped in a function but that part is gone so I could minimize the what i was looking at.

It also works with clustering which operates fine.

So the issue is feeding the marker position (latLng) with (latLngRaw) will change that to something better (testing).

I have looked at the closure examples and I cannot see the solution. It seems there are a few touch points that are escaping me, possibly because I am restricted on altering the code (minimal code change).

the entire block of code is below but the action happens inside the spinnerUp function

var latlng var marker var geocoder

are the problems.

Thanks in advance for help and let me know if I need to clarify some of the exiting functionality.

var geocoder;
google.load('maps', '3', {
other_params: 'sensor=false'
});

google.setOnLoadCallback(initialize);
geocoder = new google.maps.Geocoder();

var markerClusterer = null;
var map = null;


    function initialize() {
    var center = new google.maps.LatLng(41.252,-96.009);

    var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];
    for (var i = 0; i < data.count; i++) {
    spinnerUp(i);
    }

        function spinnerUp() {

            var data_mapper = data.locationstuff[i];

            var latLng = new google.maps.LatLng(data_mapper.latitude,data_mapper.longitude);

            var geocoder = new google.maps.Geocoder();
            geocoder.geocode( { 'address': data_mapper.zip}, function(results, status) {
                 if (status == google.maps.GeocoderStatus.OK) {
                     var latLngRaw = results[0].geometry.location;
                     alert(latLngRaw);
                     }
                     });






            var boxText = "";
            var boxText = "";
                boxText += data_mapper.title + "
" + data_mapper.address + "
" + data_mapper.city + ", " + data_mapper.zip;
                boxText += "";

            var iconColorSpecial = "/images/main/HeartDove.png";

            var marker = new google.maps.Marker({position: latLng, icon:iconColorSpecial});

            var infowindow = new google.maps.InfoWindow({
                                                    content: boxText
                                                    ,disableAutoPan: false
                                                    ,maxWidth: 0
                                                    ,pixelOffset: new google.maps.Size(0, 0)            
                                                    ,zIndex: null
                                                    ,closeBoxMargin: "10px 2px 2px 2px"
                                                    ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                                                    ,infoBoxClearance: new google.maps.Size(1, 1)
                                                    ,isHidden: false
                                                    ,pane: "floatPane"
                                                    ,enableEventPropagation: false});


        google.maps.event.addListener(marker, 'click', function() {infowindow.open(map, this);});
        markers.push(marker);       
        }

        var markerCluster = new MarkerClusterer(map, markers);
    }   

google.maps.event.addDomListener(window, 'load', initialize);

(Updated): Here is is a generated test data set (I am testing the first respondent's code suggestions).

var data = { "count": 3,"locationstuff": [{"locaid": 1, "title": "test", "address": "545 Ave A ", "city": "Plattsmouth", "state": "NE", "zip": "68048", "longitude": -95.89, "latitude": 41.01, "iconSpecial": 0},{"locaid": 2, "title": "test2", "address": "14100 Crawford St. ", "city": "Boys Town", "state": "NE ", "zip": "68010", "longitude": -96.13, "latitude": 41.25, "iconSpecial": 0},{"locaid": 3, "title": "test3", "address": "1005 South 76th St. ", "city": "Omaha", "state": "NE", "zip": "68114 ", "longitude": -96.03, "latitude": 41.25, "iconSpecial": 0}]}

Beetroot-Beetroot · Accepted Answer

After shuffling things around and tidying up a bit, I ended up with this :

var map, 
    geocoder = new google.maps.Geocoder(),
    infoWinOpts = {
        content: null,//added later
        disableAutoPan: false,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(0, 0),
        zIndex: null,
        closeBoxMargin: "10px 2px 2px 2px",
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1),
        isHidden: false,
        pane: "floatPane",
        enableEventPropagation: false
    };

function spinnerUp(data_mapper) {
    infoWinOpts.content = [
        "",
        data_mapper.title + "
" + data_mapper.address + "
" + data_mapper.city + ", " + data_mapper.zip,
        ""
    ].join('');
    var marker = new google.maps.Marker({
        position: data_mapper.latLng
        icon: "/images/main/HeartDove.png"
    });
    var infowindow = new google.maps.InfoWindow(infoWinOpts);
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, this);
    });
    return marker;
}

function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(41.252, -96.009);
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var markers = [];
    for (var responseCount=0, latLngRaw, i=0; i < data.count; i++) {
        var data_mapper = data.locationstuff[i];
        geocoder.geocode({
            'address': data_mapper.zip
        }, (function(data_mapper) {
            return function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    latLngRaw = results[0].geometry.location;
                    //alert(latLngRaw);
                    data_mapper.latLng = new google.maps.LatLng(latLngRaw.latitude, latLngRaw.longitude);//or something similar
                    markers.push( spinnerUp(data_mapper) );
                }
                responseCount++;
                if(responseCount == data.count) {
                    var markerCluster = new MarkerClusterer(map, markers);
                }
            }
        })(data_mapper));
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

untested

There's a couple of tricky aspects :

the need to form a closure at each pass of the for loop, to trap data_mapper.
the need to maintain responseCount which is tested to determine when to call new MarkerClusterer().

closure geocode loop multiple markers variable

Answers (2)

Related Questions