I create a custom div by OverlayView. there is a in the Overlay, when the mouse hover the div, there will be trigger the event of mouseover and when the mouse are out of the div then the event of mouseout will be triggered.
When the mouse is triggered event mouseover, a div named div1 will be created in div, and the mouse hover the div1, it will trigger event mouseout of div. Why? I want that when the mouse is in div or in the div1, it should not be trigger the event mouseout of div. |-----------------| ||----------------|| || div1 || ||----------------|| | || | div || |-----------------|| the code: <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps JavaScript API v3 Example: Overlay Simple</title> <link href="http://code.google.com/apis/maps/documentation/javascript/ examples/default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://maps.googleapis.com/maps/ api/js?sensor=false"></script> <script type="text/javascript"> var overlay; USGSOverlay.prototype = new google.maps.OverlayView(); function initialize() { var myLatLng = new google.maps.LatLng(62.323907, -150.109291); var myOptions = { zoom: 11, center: myLatLng, mapTypeId: google.maps.MapTypeId.SATELLITE }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var swBound = new google.maps.LatLng(62.281819, -150.287132); var neBound = new google.maps.LatLng(62.400471, -150.005608); var bounds = new google.maps.LatLngBounds(swBound, neBound); overlay = new USGSOverlay(bounds, map); } function USGSOverlay(bounds, map) { this.bounds_ = bounds; this.map_ = map; this.div_ = null; this.setMap(map); } USGSOverlay.prototype.onAdd = function() { var div = document.createElement('DIV'); div.style.position = "absolute"; div.style.width = '200px'; div.style.height = '200px'; div.style.border = '1px solid #000'; div.style.background = '#FFF'; var l = google.maps.event.addDomListener(div, 'mouseover', function(){ var div1 = document.createElement('DIV'); div1.style.width = '100px'; div1.style.height = '100px'; div1.style.background = 'red'; div1.style.border = '1px solid #000'; this.appendChild(div1); }); google.maps.event.addDomListener(div, 'mouseout', function(){ this.innerHTML = ''; }); this.div_ = div; var panes = this.getPanes(); panes.overlayImage.appendChild(div); } USGSOverlay.prototype.draw = function() { var overlayProjection = this.getProjection(); var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest()); var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast()); var div = this.div_; div.style.left = sw.x + 'px'; div.style.top = ne.y + 'px'; div.style.width = (ne.x - sw.x) + 'px'; div.style.height = (sw.y - ne.y) + 'px'; } USGSOverlay.prototype.onRemove = function() { this.div_.parentNode.removeChild(this.div_); this.div_ = null; } </script> </head> <body onload="initialize()"> <div id="map_canvas"></div> </body> </html> -- You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group. To post to this group, send email to google-maps-js-api-v3@googlegroups.com. To unsubscribe from this group, send email to google-maps-js-api-v3+unsubscr...@googlegroups.com. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
