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.
Ç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
İ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.
Kod:
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var routeBoxer = lisanssız;
var boxpolys = lisanssız;
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 != lisanssız) {
for (var i = 0; i < boxpolys.length; i++) {
boxpolys[i].setMap(lisanssız);
}
}
boxpolys = lisanssız;
}
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