Creatign a click Listener on a Polyline

nicholas cipriano Wed, 10 Feb 2010 18:41:44 -0800

Hello,
My code below worked before the update which was released last
Tuesday.  My goal was to create a map where I had a bus route created
as a polyline on my map.  I wanted to be able to click two points on
the polyline and highlight the area between the two routes.  I had
done this by creating two markers and using the Directions service to
show the distance and duration between the two points.  Since the
update I am no longer able to set the click listener to be active when
the click is on the polyline, it only works when i set the click
listener to the entire map.  The code that I used is:




<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?
sensor=false"></script>
<script type="text/javascript">

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var pathCoordinates = [];
var poly;
var map;
var number = 0;
var startadhere;
var endadhere;
var starlat;
var endlat;
var startlong;
var endlong;

<!--Declare all the start points of each route-->
var route30 = ["42.353443, -72.476234149"];

function refresh(){
location.reload(true)}

function reset(){
window("refresh()");
initialize();
}

function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var amherst = new google.maps.LatLng(42.405959, -72.532382);
  <!--Starting display of map-->
  var myOptions = {
    zoom:15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: amherst
  }

    map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
    directionsDisplay.setMap(map);
 
directionsDisplay.setPanel(document.getElementById("directionsPanel"));

  <!--Array of Bus Rotue 30-->
  var busRoute30 = [
    new google.maps.LatLng(42.405959, -72.532382),
    new google.maps.LatLng(42.404913, -72.532125),
    new google.maps.LatLng(42.405103, -72.529764),
    new google.maps.LatLng(42.404080, -72.529678),
    new google.maps.LatLng(42.402250, -72.528563),
    new google.maps.LatLng(42.400649, -72.527972),
    new google.maps.LatLng(42.398082, -72.528176),
    new google.maps.LatLng(42.397369, -72.527994)
  ];
<!--Choose color and thickness of the displayed route on the map-->
  var busRoute = new google.maps.Polyline({
    path: busRoute30,
    strokeColor: "#00C000",
    strokeOpacity: 1.0,
    strokeWeight: 5
  });

<!--Draw the Route on the map-->
  busRoute.setMap(map);

  // We create pathCoordinates as an MVCArray so we can
  // manipulate it using the insertAt() method
  pathCoordinates = new google.maps.MVCArray();

  var polyOptions = {
    strokeOpacity: 0
  }
  poly = new google.maps.Polyline(polyOptions);
  poly.setMap(map);

  // Add a listener for the click event
   google.maps.event.addDomListener(busRoute, 'click', addLatLng);
}

function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new
coordinate
  // and it will automatically appear
  path.insertAt(pathCoordinates.length, event.latLng);
  number = number+1;

  if(number==3){
  refresh();
  number = 0;
  path.removeAt(pathCoordinates.length);
  reset();
  pathcoordinates.length=0;
  }

  var marker = new google.maps.Marker({
    position: event.latLng,
    map: map
  });
  marker.setTitle("#" + number + marker.position.lat() +
marker.position.lng());

var startadtxt = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Start Ad Here </h1>'
    '</div>';

var endadtxt = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="secondHeading" class="secondHeading">End Ad Here</h1>'
    '</div>';
if(number == 1){
    startadhere = marker.position;
    startlong = marker.position.lng();
    startlat = marker.position.lat();
    var infowindow = new google.maps.InfoWindow({
    content: startadtxt
});
}
if(number == 2){
    endadhere = marker.position;
    endlong = marker.position.lng();
    endlat = marker.position.lat();
    calcRoute();
    var infowindow = new google.maps.InfoWindow({
    content: endadtxt
});
}

google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});
}

function calcRoute() {
  var start = startadhere;
  var end = endadhere;
  var request = {
    origin:start,
    destination:end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}
</script>
</head>
<body onload="initialize()">
<div><div id="map_canvas" style="float:left;width:100%; height:70%"></
div>
<div id="directionsPanel" style="float:right;width:100%;height 30%"></
div>
</body>
</html>


This is the line when I change busRoute to map I am able to display
two markers and the directions between the two:

   google.maps.event.addDomListener(busRoute, 'click', addLatLng);

Thanks in advance for any help.

-- 
You received this message because you are subscribed to the Google Groups 
"Google Maps API" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-maps-api?hl=en.

Creatign a click Listener on a Polyline

Reply via email to