add proper tooltips to map

source/Ox.UI/css/Ox.UI.css

@@ -1322,7 +1322,8 @@ Maps
     top: 4px;
     width: 12px;
     height: 12px;
-    border: 2px solid rgb(192, 192, 192);
+    border-width: 2px;
+    border-style: solid;
     border-radius: 8px;
 }
 .OxMap .OxPlaceControl.OxPlaceFlag > img {

source/Ox.UI/js/Core/Ox.Element.js

@@ -258,11 +258,13 @@ Ox.Element = function(options, self) {
         }).show(e);
     }
 
-    self.setOption = function() {
+    self.setOption = function(key, value) {
-        // self.setOptions(key, value)
+        // self.setOption(key, value)
         // is called when an option changes
         // (to be implemented by widget)
-        // FIXME: can't set tooltip options this way
+        if (key == 'tooltip') {
+            that.$tooltip && that.$tooltip.options({title: value});
+        }
     };
 
     that._self = self; // fixme: remove

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>')
+                $('<img>').attr({
-                    .attr({
+                    src: Ox.getImageByGeoname('icon', 16, place.geoname)
-                        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();
         }

source/Ox.UI/themes/classic/css/classic.css

@@ -465,8 +465,8 @@ Maps
 ================================================================================
 */
 
-.OxThemeClassic .OxMapControl,
+.OxThemeClassic .OxMap .OxMapControl,
-.OxThemeClassic .OxPlaceControl {
+.OxThemeClassic .OxMap .OxPlaceControl {
     border-color: rgb(64, 64, 64);
     background: rgba(255, 255, 255, 0.75);
     color: rgb(64, 64, 64);

source/Ox.UI/themes/modern/css/modern.css

@@ -462,8 +462,8 @@ Maps
 ================================================================================
 */
 
-.OxThemeModern .OxMapControl,
+.OxThemeModern .OxMap .OxMapControl,
-.OxThemeModern .OxPlaceControl {
+.OxThemeModern .OxMap .OxPlaceControl {
     border-color: rgb(192, 192, 192);
     background: rgba(0, 0, 0, 0.5);
     color: rgb(192, 192, 192);