Geek Answers Handbook

Google Maps API v3 Event mouseover API with InfoBox plugin

I trick the Google Maps API v3 and use the InfoBox plugin (part of http://google-maps-utility-library-v3.googlecode.com/ suite) to make some nicely styled info windows that respond to interactions with markers.

In this particular experiment, I tried to open the InfoBox pop-up window when the marker hung and exited, however I struggled to solve the problem with the mouse / mouse event system on the InfoBox window. What happens is that I can find the DIV and use the google.maps.event.addDomListenermouseover and mouseout events to bind to the InfoBox, except that it is too complicated - when I move the pointer over the node's child element inside the InfoBox, it counts as the mouse on the parent node and fires the event.

Does it have anything to do with distribution? I know that InfoBox has a switch enableEventPropagationwhen creating a new InfoBox, but I'm not quite sure how and why it will be used.

The purpose of the experiment is to create an information window with related links inside that appears when you hover over a marker. Then you can move the mouse inside the info window and interact, and when you pull it out, it closes the info window. I tried another method, when hovering over a marker launches an external function that creates an element of an external information window that is positioned and has its own event handling. This works great, but overlaying a custom info window on top of the map means that when you hover over another marker in the immediate vicinity (in the custom info window), it cannot register cursor hover for the marker.

This was my attempt at the InfoBox method:

 <!DOCTYPE html>
 <html>
 <head>
 <style type="text/css">
 <!--
    #map {
        width:                  800px;
        height:                 600px;
        margin:                 50px auto;
    }

    .map-popup {
        overflow:               visible;
        display:                block;
    }

    .map-popup .map-popup-window {
        background:             #fff;
        width:                  300px;
        height:                 140px;
        position:               absolute;
        left:                   -150px;
        bottom:                 20px;
    }

    .map-popup .map-popup-content {
        padding:                20px;
        text-align:             center;
        color:                  #000;
        font-family:            'Georgia', 'Times New Roman', serif;
    }
 -->
 </style>
 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"></script>
 <script type="text/javascript">

    var gmap, gpoints = [];

    function initialize() {
        gmap = new google.maps.Map(document.getElementById('map'), {
            zoom:               9,
            streetViewControl:  false,
            scaleControl:       false,
            center:             new google.maps.LatLng(-38.3000000,144.9629796),
            mapTypeId:          google.maps.MapTypeId.ROADMAP
        });

        for ( var i=0; i<5; i++ ) {
            gpoints.push( new point(gmap) );
        }
    }

    function popup(_point) {
        _point.popup = new InfoBox({
            content:            _point.content,
            pane:               'floatPane',
            closeBoxURL:        '',
            alignBottom:        1
        });

        _point.popup.open(_point.marker.map, _point.marker);

        google.maps.event.addListener(_point.popup, 'domready', function() {
            // Have to put this within the domready or else it can't find the div element (it null until the InfoBox is opened)
            google.maps.event.addDomListener(_point.popup.div_, 'mouseout', function() {
                _point.popup.close();
            });
        });
    }

    function point(_map) {
        this.marker = new google.maps.Marker({
            position:           new google.maps.LatLng(-37.8131869 - (1 * Math.random()),144.9629796  + (1 * Math.random())),
            map:                _map
        });

        this.content = '<div class="map-popup"><div class="map-popup-window"><div class="map-popup-content"><a href="http://www.google.com/">Just try to click me!</a><br/>Hovering over this text will result in a <code>mouseout</code> event firing on the <code>map-popup</code> element and this will disappear.</div></div>';

        // Scope
        var gpoint = this;

        // Events
        google.maps.event.addListener(gpoint.marker, 'mouseover', function() {
            popup(gpoint);
        });
    }

 </script>
 </head>
 <body onload="initialize()">
    <div id="map"></div>
 </body>
 </html>

, , - , ( /), !

+5
2

. , , mouseout . , mouseenter mouseleave ( jQuery), . : ,

google maps ( mouseenter). jQuery , :

google.maps.event.addListener(_point.popup, 'domready', function() {
//Have to put this within the domready or else it can't find the div element (it null until the InfoBox is opened)

    $(_point.popup.div_).hover(
        function() {
            //This is called when the mouse enters the element
        },
        function() {
            //This is called when the mouse leaves the element
            _point.popup.close();
        }
    );
});
+11

, , DIV google.maps.event.addDomListener mouseover mouseout InfoBox, , - node InfoBox, node .

, mouseout , DIV . DIV, , .

jQuery , mouseleave, , , . jQuery withinElement , .

+2

More articles:


All Articles