Reputation: 1624

Show tooltip on mouseover event in google maps v3

I've faced a problem of displaying tooltip over route with specific information. I've tried infowindow but it did not worked for me. This what i've tried

directionsService.route(request, function(response, status) {
    var myRoute = response.routes[0].legs[0];
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        for (var i = 0; i < myRoute.steps.length; i++) {
            for (var j = 0; j < myRoute.steps[i].lat_lngs.length; j++) {
                points.push(myRoute.steps[i].lat_lngs[j]);
            }
        }

        var eventLine = new google.maps.Polyline({
            path: points,
            visible: true,
            strokeOpacity: 0,
            zIndex: 1000
        });

        eventLine.setMap(map);

        google.maps.event.addListener(eventLine, "mouseover", function(event) {
            alert('mouseover ' + event.latLng);
            // here i want to show tooltip with location got from event  (event.latLng)

        });

    } else {
        alert("Directions request failed: " + status);
    }
});

Sample

http://jsfiddle.net/sH83S/

Upvotes: 3

Answers (2)

humtum54321

Reputation: 1

  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(41.2586, -95.9375),
    map: map,
    draggable: true,
    title: "Omaha"
    });

  }

  function codeAddress() { 
    //alert("hello");
    var sAddress = document.getElementById("inputTextAddress").value;
    geocoder.geocode( { 'address': sAddress}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        map.setCenter(results[0].geometry.location);
        map.fitBounds(results[0].geometry.viewport);
    }
    });

Upvotes: 0

duncan

Reputation: 31912

Here's a simple working example for you. Everything with the Label is via http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html

Basically we work out the distance half-way along the line, add an invisible marker to it, calculate the length of the line in miles and kilometres, then attach a Label to that marker which gets displayed when we hover over the line.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%; width: 100% }
</style>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&sensor=false"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
    function initialize() {
        var homeLatlng = new google.maps.LatLng(54.42838,-2.9623);
        var myOptions = {
            zoom: 10,
            center: homeLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var homeMarker = new google.maps.Marker({
            position: homeLatlng, 
            map: map, 
            title:"Ambleside"
        });

        var latLng1 = new google.maps.LatLng(54.60039,-3.13632);
        var marker = new google.maps.Marker({
            position: latLng1, 
            map: map, 
            title:"Keswick",
            icon: 'http://maps.google.co.uk/intl/en_ALL/mapfiles/ms/micons/green-dot.png'
        });

        var stuDistance = calculateDistances(homeLatlng, latLng1);

        // draw line between marker and home.  these are curved lines, not as the crow flies, i.e. they take into account the curvature of the earth (only noticable on longer distances)
        polyline = new google.maps.Polyline({
            path: [homeLatlng, latLng1],
            strokeColor: "#FF0000",
            strokeOpacity: 0.5,
            strokeWeight: 4,
            geodesic: true,
            map: map
        });

        // get the point half-way between this marker and the home marker
        var inBetween = google.maps.geometry.spherical.interpolate(homeLatlng, latLng1, 0.5);  
        var midPointMarker = new google.maps.Marker({  
            position: inBetween,  
            map: map,
            visible: false  // NB the marker is 'invisible'
        });

        var stuLabel = new Label();

        stuLabel.bindTo('position', midPointMarker, 'position');
        stuLabel.set('text', stuDistance.miles + ' miles');

        // lets add event listeners
        google.maps.event.addListener(polyline, 'mouseover', function() {
            stuLabel.setMap(map);
        });

        google.maps.event.addListener(polyline, 'mouseout', function() {
            stuLabel.setMap(null);
        });
    }


    function calculateDistances(start,end) {
        var stuDistances = {};

        stuDistances.metres = google.maps.geometry.spherical.computeDistanceBetween(start, end);    // distance in metres rounded to 1dp
        stuDistances.km = Math.round(stuDistances.metres / 1000 *10)/10;    // distance in km rounded to 1dp
        stuDistances.miles = Math.round(stuDistances.metres / 1000 * 0.6214 *10)/10;    // distance in miles rounded to 1dp

        return stuDistances;
    }


    // Define the overlay, derived from google.maps.OverlayView
    function Label(opt_options) {
        // Initialization
        this.setValues(opt_options);

        // Label specific
        var span = this.span_ = document.createElement('span');
        span.style.cssText = 'position: relative; left: -50%; top: -8px; ' +
                             'white-space: nowrap; border: 1px solid blue; ' +
                             'padding: 2px; background-color: white';

        var div = this.div_ = document.createElement('div');
        div.appendChild(span);
        div.style.cssText = 'position: absolute; display: none';
    }
    Label.prototype = new google.maps.OverlayView;

    // Implement onAdd
    Label.prototype.onAdd = function() {
        var pane = this.getPanes().overlayLayer;
        pane.appendChild(this.div_);

        // Ensures the label is redrawn if the text or position is changed.
        var me = this;
        this.listeners_ = [
            google.maps.event.addListener(this, 'position_changed',
                function() { me.draw(); }),
            google.maps.event.addListener(this, 'text_changed',
                function() { me.draw(); })
        ];
    };

    // Implement onRemove
    Label.prototype.onRemove = function() {
        this.div_.parentNode.removeChild(this.div_);

        // Label is removed from the map, stop updating its position/text.
        for (var i = 0, I = this.listeners_.length; i < I; ++i) {
            google.maps.event.removeListener(this.listeners_[i]);
        }
    };

    // Implement draw
    Label.prototype.draw = function() {
        var projection = this.getProjection();
        var position = projection.fromLatLngToDivPixel(this.get('position'));

        var div = this.div_;
        div.style.left = position.x + 'px';
        div.style.top = position.y + 'px';
        div.style.display = 'block';

        this.span_.innerHTML = this.get('text').toString();
    };

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

</head>
<body>
  <div id="map_canvas"></div>
</body>
</html>

Upvotes: 3

Show tooltip on mouseover event in google maps v3

Answers (2)

Related Questions