add proper tooltips to map

source/Ox.UI/js/Map/Ox.ListMap.js

@@ -804,8 +804,8 @@ Ox.ListMap = function(options, self) {
             });
             self.$placeName.options({title: place.geoname || ''});
             self.$placeTitle.show();
-            self.$placeForm.values(place).show();
             self.$areaKmInput.options({value: Ox.formatArea(place.area)});
+            self.$placeForm.values(place).show();
             self.$placeButton.options({title: isResult ? 'Add Place' : 'Remove Place'}).show();
             updateMatches();
         } else {
@@ -848,10 +848,10 @@ Ox.ListMap = function(options, self) {
             names = Ox.filter(Ox.merge([place.name], place.alternativeNames), function(name) {
                 return name !== '';
             });
-            Ox.print('names', names);
             if (names.length) {
+                self.$matchesInput.options({value: ''});
                 self.options.getMatches(names, function(matches) {
-                    self.$matchesInput.options({value: matches});
+                    self.$matchesInput.options({value: Ox.formatNumber(matches)});
                 });
             } else {
                 self.$matchesInput.options({value: 0});

source/Ox.UI/js/Map/Ox.Map.js

@@ -797,6 +797,18 @@ Ox.Map = function(options, self) {
             google.maps.event.addListener(self.map, 'zoom_changed', zoomChanged);
             google.maps.event.addListenerOnce(self.map, 'tilesloaded', tilesLoaded);
 
+            // needed to get mouse x/y coordinates on marker mouseover,
+            // see http://code.google.com/p/gmaps-api-issues/issues/detail?id=2342
+            that.overlayView = new google.maps.OverlayView();
+            that.overlayView.setMap(self.map);
+            that.overlayView.draw = function () { 
+                if (!this.ready) { 
+                    this.ready = true; 
+                    google.maps.event.trigger(this, 'ready'); 
+                }
+            }
+            that.overlayView.draw();
+
             if (self.options.find) {
                 self.$findInput.options({value: self.options.find})
                     .triggerEvent('submit', {value: self.options.find});
@@ -1161,10 +1173,9 @@ Ox.Map = function(options, self) {
             isVisible = self.$placeControls.name.is(':visible');
         if (place) {
             self.$placeControls.flag.empty().append(
-                $('<img>')
-                    .attr({
-                        src: Ox.getImageByGeoname('icon', 16, place.geoname)
-                    })
+                $('<img>').attr({
+                    src: Ox.getImageByGeoname('icon', 16, place.geoname)
+                })
             ).show();
             self.$placeControls.name.options({title: place.name})
             !isVisible && $placeControls.show().animate({opacity: 1}, 250);

source/Ox.UI/js/Map/Ox.MapMarker.js

@@ -45,7 +45,7 @@ Ox.MapMarker = function(options) {
     that.marker = new google.maps.Marker({
         raiseOnDrag: false,
         shape: {coords: [8, 8, 8], type: 'circle'},
-        title: that.place.name,
+        //title: that.place.name,
         //zIndex: 1000
     });
 
@@ -183,6 +183,17 @@ Ox.MapMarker = function(options) {
         }
     }
 
+    function mouseover(e) {
+        var offset = that.map.offset(),
+            xy = that.map.overlayView.getProjection()
+                .fromLatLngToContainerPixel(e.latLng);        
+        that.tooltip.show(offset.left + xy.x - 4, offset.top + xy.y + 20);
+    }
+
+    function mouseout() {
+        that.tooltip.hide();
+    }
+
     function setOptions() {
         // workaround to prevent marker from appearing twice
         // after setting draggable from true to false (google maps bug)
@@ -218,6 +229,20 @@ Ox.MapMarker = function(options) {
                 that.marker.setVisible(true);
             }, 0);
         }
+        setTooltip();
+    }
+
+    function setTooltip() {
+        var country = Ox.getCountryByGeoname(that.place.geoname);
+        that.tooltip = Ox.Tooltip({
+            title: '<img src="'
+                + Ox.getImageByGeoname('icon', 16, that.place.geoname)
+                + '" style="float: left; margin: 1px 0 1px -1px; border-radius: 4px"/>'
+                + '<div style="float: left; margin: 4px -1px 0 4px; font-size: 9px;">'
+                + that.place.name
+                + (country && country.name != that.place.name ? ', ' + country.name : '')
+                + '</div>'
+        });        
     }
 
     /*@
@@ -228,6 +253,8 @@ Ox.MapMarker = function(options) {
         that.marker.setMap(that.map.map);
         google.maps.event.addListener(that.marker, 'click', click);
         google.maps.event.addListener(that.marker, 'dblclick', dblclick);
+        google.maps.event.addListener(that.marker, 'mouseover', mouseover);
+        google.maps.event.addListener(that.marker, 'mouseout', mouseout);
         return that;
     };
 

source/Ox.UI/js/Map/Ox.MapPlace.js

@@ -83,7 +83,6 @@ Ox.MapPlace = function(options) {
                 place: that
             });
         } else if (updateMarker) {
-            Ox.print('UPDATING marker and rectangle ... llswne', that.lat, that.lng, that.south, that.west, that.north, that.east)
             that.marker.update();
             that.rectangle.update();
         }