Question

using jquery-ui-map

here is my code

$(document).ready(function() {$('#map_canvas').gmap({ 'center': new google.maps.LatLng(3.162456,21.09375), 'zoom': 2, 'streetViewControl': false, 'callback': 
    function() {
        $('#map_canvas').gmap('loadHTML', 'microformat', '.importers', function(markerOpts, node, index) {
            var clone = $(node);
            // We have to add a callback in the addmarker method so we can access the marker just added
            var name = $(node).find('.name');   
            var icon = $(node).find('.icon');   
            $('#map_canvas').gmap('addMarker', jQuery.extend({ 'title': name.html(), 'icon':new google.maps.MarkerImage(icon.html())}, markerOpts), function(map, marker) {
                $(name).click( function() {
                $(marker).triggerEvent('click');
                    return false;
                }); 
            }).click(function() {
                $('.reveal').removeClass('reveal');
                $(this).get(0).map.panTo($(this).get(0).position);                 
                $(clone).toggleClass('reveal');
                //need to wait till pan has complete before doing zoom!            

                });
              });
            }
        });
    });

at the moment when you click on a market it pans to its position

what i want to do is also zoomin, i’ve tried just adding

$(this).get(0).map.setZoom(5, true);       

but this means the pan does not work it just jumps straight to the zoom level, how do i get it to fire the $(this).get(0).map.setZoom(5, true); after the panning is done?

thanks in advance

Answer 1

$('#map_canvas').gmap('addMarker').click(function() {
    $(this).get(0).map.panTo($(this).get(0).position);
    var self = $(this).get(0);
    setTimeout(function() { self.map.setCenter(self.position); self.map.setZoom(15); }, 2000);
});

This would be the easy way of setting the zoom after the pan.