show/hide circle on google maps javascript api

Question

Trying to show a google maps circle when the user hovers over it and hide it when they mouseout. This code works for hiding the circle on mouseout, but doen't reshow the circle on mouseover. I have also tried circle.setMap(null) and then circle.setMap(map) which is the reason I am passing the map as an argument to the showHide function.

var buildings = {};
buildings['Tinsley'] = {
    center: new google.maps.LatLng(30.512028, -90.466363),
    radius: 20,
    description: "<div>Tinsley Hall</div>",
    desMaxWidth: 500,
};
buildings['Pottle'] = {
    center: new google.maps.LatLng(30.513184, -90.467562),
    radius: 40,
    description: "<div>Pottle Hall</div>",
    desMaxWidth: 500,
};
function initialize() {
  var southeastern = new google.maps.LatLng(30.5153382,-90.4676681);
  var mapOptions = {
    zoom: 17,
    center: southeastern
  }

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var ctaLayer = new google.maps.KmlLayer({
    url: 'http://www.southeastern.edu/_new-resources/includes/slu.kml'
  });
  ctaLayer.setMap(null);

  var counter = 0;
  for (var building in buildings) {
    var buildingCircle = {
      strokeColor: 'darkgreen',
      strokeOpacity: 0.3,
      strokeWeight: 3,
      clickable: true,
      fillColor: 'gold',
      fillOpacity: 0.35,
      map: map,
      visible: true,
      center: buildings[building].center,
      radius: buildings[building].radius,
    };
    markerCircle = new google.maps.Circle(buildingCircle);
    attachInfoWindow(map, markerCircle, buildings[building].description);
    showHideCircle(map, markerCircle);
    counter++
  }
}

function attachInfoWindow(map, circle, info){
  var infowindow = new google.maps.InfoWindow({
    content: info
  });  
  google.maps.event.addListener(circle, 'click', function(ev) {
    infowindow.setPosition(circle.getCenter());
    infowindow.open(map);
  });
}

function showHideCircle(map, circle){
  google.maps.event.addListener(circle, 'mouseover', function(){
    circle.setVisible(true);
  });
  google.maps.event.addListener(circle, 'mouseout', function(){
    circle.setVisible(false);
  });
}

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

Answer 1

If you want to use mouseover/out, you can't use "visible" or remove the circle from the map. Set the fillOpacity and stokeOpacity to 0 to hide the circle.

function showHideCircle(map, circle) {
    google.maps.event.addListener(circle, 'mouseout', function () {
        circle.setOptions({fillOpacity:0, strokeOpacity:0});
    });
    google.maps.event.addListener(circle, 'mouseover', function () {
        circle.setOptions({fillOpacity: 0.35, strokeOpacity:0.3});
    });
}

working fiddle

code snippet:

 var buildings = {}; buildings['Tinsley'] = { center: new google.maps.LatLng(30.512028, -90.466363), radius: 20, description: "<div>Tinsley Hall</div>", desMaxWidth: 500, }; buildings['Pottle'] = { center: new google.maps.LatLng(30.513184, -90.467562), radius: 40, description: "<div>Pottle Hall</div>", desMaxWidth: 500, }; function initialize() { var southeastern = new google.maps.LatLng(30.5153382, -90.4676681); var mapOptions = { zoom: 17, center: southeastern } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var ctaLayer = new google.maps.KmlLayer({ url: 'http://www.southeastern.edu/_new-resources/includes/slu.kml' }); ctaLayer.setMap(null); var counter = 0; for (var building in buildings) { var buildingCircle = { strokeColor: 'darkgreen', strokeOpacity: 0.3, strokeWeight: 3, clickable: true, fillColor: 'gold', fillOpacity: 0.35, map: map, visible: true, center: buildings[building].center, radius: buildings[building].radius, }; markerCircle = new google.maps.Circle(buildingCircle); attachInfoWindow(map, markerCircle, buildings[building].description); showHideCircle(map, markerCircle); counter++ } } function attachInfoWindow(map, circle, info) { var infowindow = new google.maps.InfoWindow({ content: info }); google.maps.event.addListener(circle, 'click', function(ev) { infowindow.setPosition(circle.getCenter()); infowindow.open(map); }); } function showHideCircle(map, circle) { google.maps.event.addListener(circle, 'mouseout', function() { circle.setOptions({ fillOpacity: 0, strokeOpacity: 0 }); }); google.maps.event.addListener(circle, 'mouseover', function() { circle.setOptions({ fillOpacity: 0.35, strokeOpacity: 0.3 }); }); } google.maps.event.addDomListener(window, 'load', initialize); 

 html, body, #map-canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map-canvas" style="border: 2px solid #3872ac;"></div>