Function re call on hover

Question

Created custom google map.

my achievement - I need to map 'center' rearrange after div width and height reset on div hover.

Problem : When I hover and hold on the div - map center re arrange again and again . How to solve this issue

jsFiddle I tired this way

Code

function initialize() {
    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(21.14580, 79.08815)
    };
    var map = new google.maps.Map(document.getElementById('mapbox'),
        mapOptions);
    var marker = new google.maps.Marker({
        position: map.getCenter(),
        icon: 'http://toobler.com/staging/design/hapzis/img/icon-map.png',
        map: map
    });
}
google.maps.event.addDomListener(window, 'load', initialize);
 // hover function
$('#mapbox').hover(function () {
    setTimeout(function () {
        initialize()
    }, 1000);
});

Answer 1

Try off() method:

demo

$('#mapbox').hover(function() {
    setTimeout(function() {
        initialize()
    }, 1000);
    $(this).off('hover');                 
});

---

Or just set false to initialize function:

$('#mapbox').hover(function(){
    setTimeout(function(){
        initialize();
        initialize = false;
    });
});

demo

Answer 2

You do need off hover

Working JSFiddle

 $('#mapbox').hover(function() {
     setTimeout(function() {
         initialize()
     }, 1000);
     $(this).off('hover');                
 });

Answer 3

By default hover function uses mouseout mouseover method so this may not give expected result.

As you only need to initialize your map after mouseleave

Try replacing your hover code with below hope this would help..

$('#mapbox').mouseleave(function() {
    setTimeout(function(){
        initialize()
    },1000);
});

see mouseout vs mouseleave here