Merhaba, google maps api üzerinde uğraşırken bi konuda tıkandım.

İki nokta arasında oluşan kutucukların(Routeboxer) içinde kendi oluşturduğum işaretleri(marker) göstermek istiyorum.
Sorun şu; Ben kutucukları çiziyorum, işaretleri ekliyorum fakat sadece kutu içindeki işaretleri gösteremiyorum.

<script>
        
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;
        var routeBoxer = null;
        var boxpolys = null;
        var rdistance = 1; // km
        var myLatlng = new google.maps.LatLng();
        
        /////////////////// lokasyonlar
         var locations = [
      ['<div class="google-aciklama">Kırıkkale Kırıkkale Kırıkkale Kırıkkale Kırıkkale Kırıkkale Kırıkkale Kırıkkale Kırıkkale Kırıkkale Kırıkkale Kırıkkale Kırıkkale Kırıkkale Kırıkkale Kırıkkale </div>', 39.8805605, 33.6970289],
      ['<div class="google-aciklama">Çorum ÇorumÇorumÇorumÇorumÇorumÇorumÇorumÇorumÇorumÇorum</div>', 40.535223,34.9419039],
      ['<div class="google-aciklama">Cronulla Beach</div>', -34.028249, 151.157507],
      ['<div class="google-aciklama">Manly Beach</div>', -33.80010128657071, 151.28747820854187],
      ['<div class="google-aciklama">Maroubra Beach</div>', -33.950198, 151.259302]
    ];
        


        // İkon ve gölge
    var iconURLPrefix = 'http://maps.google.com/mapfiles/ms/icons/';
    
    var icons = [
      iconURLPrefix + 'red-dot.png',
      iconURLPrefix + 'green-dot.png',
      iconURLPrefix + 'blue-dot.png',
      iconURLPrefix + 'orange-dot.png',
      iconURLPrefix + 'purple-dot.png',
      iconURLPrefix + 'pink-dot.png',      
      iconURLPrefix + 'yellow-dot.png'
    ]
    var icons_length = icons.length;
    
    
    var shadow = {
      anchor: new google.maps.Point(15,33),
      url: iconURLPrefix + 'msmarker.shadow.png'
    };
        
        
        
        function initialize() {
          //directionspanelstuff
          //directionsdisplaystuff
          //mapoptions
        var mapOptions = {
        zoom: 4,
        center: myLatlng
        }
  
          map = new google.maps.Map(document.getElementById("map_canvas"), {
             zoom: 10,
             center: new google.maps.LatLng(41.084951,29.016048),
             mapTypeId: google.maps.MapTypeId.ROADMAP
          });
          


          directionsDisplay = new google.maps.DirectionsRenderer();
          directionsDisplay.setMap(map);
          routeBoxer = new RouteBoxer();
          calcRoute();
          
          
          
          
          
          
          
          
///////// Markers


var infowindow = new google.maps.InfoWindow({
      maxWidth: 500,
    });


    var marker;
    var markers = new Array();
    
    var iconCounter = 0;
    
    // Add the markers and infowindows to the map
    for (var i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon : icons[iconCounter],
        shadow: shadow
      });


      markers.push(marker);
      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
      
      iconCounter++;
      // We only have a limited number of possible icon colors, so we may have to restart the counter
      if(iconCounter >= icons_length){
          iconCounter = 0;
      }
    }




// Marker bitiş


          
        }


       


       function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var request = {
          origin: start,
          destination: end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
          //startendwaypoints


          directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
              var route = response.routes[0];
              var summaryPanel = document.getElementById("directions_panel");


              // Box the overview path of the first route
                var path = response.routes[0].overview_path;
                var boxes = routeBoxer.box(path, rdistance);
                clearBoxes();
                drawBoxes(boxes);


                for (var i = 0; i < boxes.length; i++) {
                  var bounds = boxes[i];
                  // Perform search over this bounds 
                }
            }
          });
        }


        // Draw the array of boxes as polylines on the map
        function drawBoxes(boxes) {
          boxpolys = new Array(boxes.length);
          for (var i = 0; i < boxes.length; i++) {
            boxpolys[i] = new google.maps.Rectangle({
              bounds: boxes[i],
              fillOpacity: 0,
              strokeOpacity: 1.0,
              strokeColor: '#000000',
              strokeWeight: 1,
              map: map
            });
          }
        }


        
        // Clear boxes currently on the map
        function clearBoxes() {
          if (boxpolys != null) {
            for (var i = 0; i < boxpolys.length; i++) {
              boxpolys[i].setMap(null);
            }
          }
          boxpolys = null;
        }
      google.maps.event.addDomListener(window, 'load', initialize);
      
</script>

Çalıştığım js kodları yukarıda. İnternette araştırırken bulduğum bir uygulamada rota içinde benzin istasyonlarını gösteriyor ama ben bunu kendi eklediğim işaretlere göre uyarlayamadım.

Kendi çalıştığım kodların görünümü http://droidturk.net/son.html

Benzin istasyonlarıyla alakalı olan uygulama http://www.geocodezip.com/v3_SO_RouteBoxerPlaces.html