• 10-04-2014, 16:02:09
    #1
    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
  • 12-04-2014, 02:03:34
    #2
    Yardımcı olur mu?

    İncele
  • 12-04-2014, 10:56:57
    #3
    alikarakoc93 adlı üyeden alıntı: mesajı görüntüle
    Yardımcı olur mu?

    İncele
    Öncelikle ilginize teşekkür ederim. sanırım bu googlemaps deki gaz istasyonları ama ben kendi eklediğim markerlar routebox içindeyse gösterilsin değilse gösterilmesin istiyorum.