CODEWITHSUNDEEP
jquerygoogle-maps
user1215071
user1215071

Reputation: 63

How do I display Google Map controls on mouseover (hover)?

How would I go about displaying the standard Google Map controls when the user hovers their mouse over the map? I would like the controls to otherwise be hidden.

Upvotes: 1

Views: 1428

Answers (2)

Gardonyi Peter
Gardonyi Peter

Reputation: 21

You can use the normal javascript addEventListener to make it work. The google.maps.event.addListener way will fire mouseout when you hover a control on the map.

document.getElementById("map_canvas").addEventListener('mouseover', function() {
  map.setOptions({
    disableDefaultUI:true
  });
});
document.getElementById("map_canvas").addEventListener('mouseout', function() {
  map.setOptions({
    disableDefaultUI:false
  });
});

Upvotes: 0

Mano Marks
Mano Marks

Reputation: 8819

You don't need jQuery for that, you can do it with the Maps API.

 function initialize() {
    var myOptions = {
      zoom: 4,
      center: new google.maps.LatLng(-33, 151),
      disableDefaultUI:true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"),
                                  myOptions);
    google.maps.event.addListener(map, 'mouseover', function() {
    map.setOptions({
      disableDefaultUI:false
});
  });
  }

Upvotes: 1

Related Questions