CODEWITHSUNDEEP
javascriptangularjsgoogle-maps
Manish Balodia
Manish Balodia

Reputation: 1877

Is it possible to close an infowindow on certain condition

Infowindow should only show when you hover on marker. It should go away when you move your mouse from marker. It should only stay if you click on the marker. and close on clicking close button of infowindow.

Upvotes: 0

Views: 243

Answers (1)

Mr.Rebot
Mr.Rebot

Reputation: 6791

You can try using the using the google.maps.event.addListener:

JavaScript within the browser is event driven, meaning that JavaScript responds to interactions by generating events, and expects a program to listen to interesting events. There are two types of events:

  • User events (such as "click" mouse events) are propagated from the DOM to the Google Maps JavaScript API. These events are separate and distinct from standard DOM events.
  • MVC state change notifications reflect changes in Maps JavaScript API objects and are named using a property_changed convention.

Each Maps JavaScript API object exports a number of named events. Programs interested in certain events will register JavaScript event listeners for those events and execute code when those events are received by calling addListener() to register event handlers on the object.

You can try using the code in this post:

var geocoder;
var map;

function initialize() {
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

setMarkers(map,locations);


}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
  ['Bondi Beach', -33.890542, 151.274856,,, 'Bondi Beach', 4],
  ['Coogee Beach', -33.923036, 151.259052,,,'Coogee Beach', 5],
  ['Cronulla Beach', -34.028249, 151.157507,,,'Cronulla Beach', 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187,,, 'Manly Beach', 2],
  ['Maroubra Beach', -33.950198, 151.259302,,,'Maroubra Beach', 1]
];
function setMarkers(map, locations) {
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < locations.length; i++) {
        var item = locations[i];

        var myLatLng = new google.maps.LatLng(item[1], item[2]);
        bounds.extend(myLatLng);
        var address = item[5];

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
        });

        var content = address;

        var infowindow = new google.maps.InfoWindow()

        google.maps.event.addListener(marker, 'mouseover', (function (marker, content, infowindow) {
            return function () {
                infowindow.setContent(content);
                infowindow.open(map, marker);
            };
        })(marker, content, infowindow));
        google.maps.event.addListener(marker, 'mouseout', (function (marker, content, infowindow) {
            return function () {
                infowindow.close();
            };
        })(marker, content, infowindow));

    }
    map.fitBounds(bounds);
}

This can also be found in jsfiddle. It will work properly as long as your event listener doesn't conflict with other listeners.

Hope this helps.

Upvotes: 1

Related Questions