Отображать элементы управления Google Maps при наведении

Question

Как бы я мог отобразить элементы управления Google Maps по умолчанию, когда пользователь наводит курсор на карту? В противном случае, я бы хотел, чтобы элементы управления были скрыты.

Answer 1

Вы можете использовать метод setOptions карты, чтобы скрыть или показать элементы управления. Передайте в качестве аргумента объект со всеми элементами управления, которые вы хотите показать / скрыть, и установите для значений элементов управления значение true или false.

Добавьте списки событий для mouseout и mouseover на карту и установите параметры там.

Пример:

//the controls you want to hide
  var controlsOut={
                    mapTypeControl:false,
                    zoomControl:false,
                    panControl:false,
                    streetViewControl:false
                  };

  //create a copy of controlsOut and set all values to true
  var controlsIn={};

      for(var c in controlsOut)
      {
        controlsIn[c]=true;
      }

   //initially hide the controls
    map.setOptions(controlsOut)

   //add listeners to show or hide the controls
        google.maps.event.addDomListener(map.getDiv(),
                                 'mouseover', 
                                 function(e)
                                 {
                                    e.cancelBubble=true;
                                    if(!map.hover)
                                    {
                                      map.hover=true;
                                      map.setOptions(controlsIn);
                                    }
                                  });

        google.maps.event.addDomListener(document.getElementsByTagName('body')[0], 
                                 'mouseover', 
                                 function(e)
                                 {
                                  if(map.hover)
                                  {
                                     map.setOptions(controlsOut);
                                     map.hover=false;
                                  }
                                 });

Answer 2

Похоже, это единственный вопрос о том, чтобы сделать управление картами только при наведении курсора.Приведенный выше ответ мне не помог, поэтому я решил документировать свои собственные изменения:

// dom is the enclosing DOM supplied to new google.maps.Map
// controlsIn and controlsOut are hashes of options to set
// when the mouse enters or exits.

$(dom).mouseenter(function(evt) {
  if (!map.hover) {
    map.hover = true
    map.setOptions(controlsIn)
  }
});

$('body').mouseover(function(evt) {
  if (map.hover) {
    if ($(evt.target).closest(dom).length == 0) {
      map.hover = false
      map.setOptions controlsOut
    }
  }
});