Permalink
Browse files

first commit

  • Loading branch information...
0 parents commit cca5e911e6d9cced04cbcfc7ea7da6ea627d139d @christianhellsten committed Oct 26, 2009
Showing with 119 additions and 0 deletions.
  1. +48 −0 README.textile
  2. +71 −0 jquery.google-maps.tooltip.js
@@ -0,0 +1,48 @@
+h1. jQuery Google Maps Tooltips
+
+jQuery enabled tooltips for Google Maps API V3.
+
+h2. Usage
+
+h3. HTML
+
+<pre>
+ <code>
+ <!-- JavaScripts -->
+ <script src="/javascripts/jquery.google-maps.tooltip.js" type="text/javascript"></script>
+ <script src="/javascripts/jquery-1.3.2.min.js" type="text/javascript"></script>
+
+ <!-- The tooltip -->
+ <div style="display:none; position: absolute;" id="map-tooltip"></div>
+ </code>
+</pre>
+
+h3. JavaScript
+
+<pre>
+ <code>
+ // Called right before tooltip is displayed
+ var on_before_show = function(marker, tooltip) {
+ // Set tooltip contents to the marker's title
+ // NOTE you could also attach JSON data to a marker and create more complex tooltips
+ tooltip.html(marker.title);
+ };
+ // Attach tooltip to the DIV element
+ var tooltip = new MapTooltip($('#map-tooltip'), on_before_show);
+
+ // Add a marker to tooltip, see http://code.google.com/intl/sv-SE/apis/maps/documentation/v3/reference.html#Marker
+ tooltip.addMarker(marker); //
+ </code>
+</pre>
+
+That's all folks.
+
+h2. References
+
+* "Google Maps API V3":http://code.google.com/apis/maps/documentation/v3/
+* "Google Maps Marker":http://code.google.com/apis/maps/documentation/v3/reference.html#Marker
+
+h2. Author
+
+"Christian Hellsten":http://christianhellsten.com ("Aktagon Ltd.":http://aktagon.com)
+
@@ -0,0 +1,71 @@
+//
+//
+//
+function MapTooltip(tip, onBeforeShow) {
+ // Don't forget the tip
+ var $tooltip = tip;
+ // One timer
+ var timer = 0;
+ // Don't loose our scope
+ var self = this;
+
+ if(!$tooltip.hasClass('tooltip-enabled')) {
+ // Mouse enter
+ $tooltip.bind('mouseenter.tooltip', function(e) {
+ stopTimer();
+ });
+
+ // Mouse leave
+ $tooltip.bind('mouseleave.tooltip', function(e) {
+ startTimer(function() { self.hide() }, 100);
+ });
+
+ $tooltip.addClass('tooltip-enabled');
+ }
+
+ function startTimer(callback, time) {
+ stopTimer();
+ timer = setTimeout(callback, time);
+ }
+
+ function stopTimer() {
+ clearTimeout(timer);
+ }
+
+ this.show = function(marker) {
+ var p = overlay.get_projection().fromLatLngToDivPixel(marker.get_position());
+
+ $tooltip.hide();
+
+ // Callback
+ onBeforeShow(marker, $tooltip);
+
+ // Map world relative to map container
+ // TODO This needs to be configurable and more exact
+ var dragObject = overlay.get_panes().mapPane.parentNode;
+ var x = p.x + $tooltip.width(); // + parseInt(dragObject.style.left);
+ var y = p.y + $tooltip.height() / 2; // + parseInt(dragObject.style.top);
+
+ $tooltip.css({
+ position: "absolute",
+ 'z-index': 20000,
+ top: y, left: x
+ });
+
+ $tooltip.animate({"top": "+=20px", "opacity": "toggle"}, 300);
+ }
+
+ this.hide = function() {
+ $tooltip.fadeOut(200);
+ }
+
+ this.addMarker = function(marker) {
+ google.maps.event.addListener(marker, 'mouseover', function(event) {
+ startTimer(function(){ self.show(marker) }, 100);
+ });
+
+ google.maps.event.addListener(marker, 'mouseout', function(event) {
+ startTimer(function() { self.hide() }, 500);
+ });
+ }
+};

0 comments on commit cca5e91

Please sign in to comment.