προβλημα με Sidebar σε google map V3

tattooiv

καλησπερα εχω ενα google map και διπλα του ενα Sidebar, ο χαρτης φορτωνει δεδομενα απο ενα xml αρχειο (6 σημεια) αλλα αντι να μου εμφανιζει μεσα στο Sidebar 6 γραμμες με τα name των marker μεσα απο το xml, μου γραφει και για τα 6 σημεια undefined, καπου πρεπει να κολλαει μεσα στην συναρτηση function makeSidebar(), ειδα και εδω econym.org.uk/gmap/basic2.htm αλλα εγω δεν χρησιμοποιω frame

κώδικας:

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>data</title>

<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>

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

var mtypes = [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN ];
var side_bar_html = "";
var gmarkers = [];
var infowindow;
var map = null;
var gicons = [];

var markerShadow = new google.maps.MarkerImage(
"images/shadow.png",
new google.maps.Size(54,37),
new google.maps.Point(0,0),
new google.maps.Point(16,37)
);

function makeSidebar() {
var html = "";
for (var i=0; i<gmarkers.length ; i++) {
if (gmarkers[i].getVisible()) {
   html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname+ '<\/a><br>';
}
}
document.getElementById("side_bar").innerHTML = html;

}

function initialize() {
         var myLatlng = new google.maps.LatLng(41.084316, 23.546791);
         var myOptions = {
               zoom: 14,
               center: myLatlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP,
               mapTypeControl: true,
               mapTypeControlOptions:
               {
               position: google.maps.ControlPosition.TOP_RIGHT,
               style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
               mapTypeIds: mtypes
               },
               zoomControl: true,
               zoomControlOptions:
               {
               position: google.maps.ControlPosition.LEFT_CENTER,
               style: google.maps.ZoomControlStyle.DEFAULT
               }
         }
         map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

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

         downloadUrl("markers.xml", function(data) {
         var markers = data.documentElement.getElementsByTagName("marker");
         for (var i = 0; i < markers.length; i++) {
         var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
         parseFloat(markers[i].getAttribute("lng")));
         var marker = createMarker(markers[i].getAttribute("name"), latlng, markers[i].getAttribute("icon"), markerShadow, markers[i].getAttribute("address"));


         }
         makeSidebar();

         });

}

function createMarker(name, latlng, icon, markerShadow, address) {
var markerIcon = new google.maps.MarkerImage(
icon,
new google.maps.Size(32,37),
new google.maps.Point(0,0),
new google.maps.Point(16,37)
);

var marker = new google.maps.Marker({
position: latlng,
map: map,
icon:markerIcon,
shadow:markerShadow,
title:address
});

google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: name});
infowindow.open(map, marker);
});

gmarkers.push(marker);
// add a line to the side_bar html
makeSidebar();

return marker;
}

</script>
</head>
<body onload="initialize()">
<table border="1" cellspacing="5" cellpadding="5" bordercolor="#000000" bgcolor="#ffffff" height="500">
<tr><td bordercolor="#000000" bgcolor="#ffffff" valign="top">
<div id="map_canvas" style="width: 550px; height: 450px"></div>
</td>
<td valign="top" style="width:200px; text-decoration: underline; color: #4444ff;">
<div id="side_bar"></div>
</td>
</tr>
</table>

</body>

</html>

tattooiv · Στις: 08 Ιαν 2012 04:52 Θέμα:

το βρηκα το προβλημα, ειχα ξεχασει να γραψω

κώδικας:

marker.myname = name;

μεσα στην function createMarker και για να δουλευουν τα link στην sidebar προσθεσα και την

κώδικας:

function myclick(i) {
google.maps.event.trigger(gmarkers[i], 'click');
map.setCenter(gmarkers[i].position);
}

fafos · Στις: 08 Ιαν 2012 05:25 Θέμα:

auto den deixnei oute markers oute boundarei.. h etsi to thes?
vasika h function makeSidebar() einai ypervolh.. apo thn stigmh pou travas ta dedomena se allh function ekei mesa ftiaxneis kai thn sidebar... des edo ena pou eftiaxa sta grhgora: http://istopoli.com/tuts/gmv3/newpage4.html

tattooiv · Στις: 08 Ιαν 2012 05:49 Θέμα:

μα σε μενα δουλευει, εβαλα την makeSidebar() επειδη στην συνεχεια θελω να βαλω και καποια checkbox

tattooiv · Στις: 10 Ιαν 2012 23:40 Θέμα:

tha me trelanei o google map!!!! me ton parapanw kwdika poy egrapsa kai ekeina poy prosthesa meta o xartis doyleuei kai moy dixnei ola ta simeia tou xml kai doyleuei kanonika kai i sidebar

twra omws thelw na prosthesw kai checkbox, evala lipon panw apo thn function make sidebar aytes tis synartiseis:

κώδικας:

// Shows all markers of a particular category, and ensures the checkbox is checked
function show(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(true);
}
}
// Check the checkbox
document.getElementById(category+"box").checked = true;

}

// Hides all markers of a particular category, and ensures the checkbox is cleared
function hide(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(false);
}
}
// Clear the checkbox
document.getElementById(category+"box").checked = false;
// Close the info window, in case its open on a marker that we just hid
infobox.close();
}

// A checkbox has been clicked
function boxclick(box,category) {
if (box.checked) {
show(category);
}
else {
hide(category);
}
makeSidebar();
}

meta mesa stin downloadUrl("markers.xml", function(doc) evala ta

κώδικας:

hide("one");
hide("two");
hide("three");

kai telos evala kai ta checkbox

κώδικας:

<form action="#">
<table border="1" cellspacing="3" cellpadding="0" width="100%" >
<tr>
<td>
<p align="center"><img src="images/wifi_true.png">
<br /><strong>one:</strong> <input type="checkbox" id="onebox" onclick="boxclick(this,'one')" /></p>
</td>
<td>
<p align="center"><img src="images/wifi_false.png">
<br /><strong>two:</strong> <input type="checkbox" id="twobox" onclick="boxclick(this,'two')" /></p>
</td>
<td>
<p align="center"><img src="images/wifi_spot.png">
<br /><strong>three:</strong> <input type="checkbox" id="threebox" onclick="boxclick(this,'three')" /></p></td>
</tr></table>
</form>

alla o xartis kanei oti na nai, i sidebar otan ksetsekaroyme ena checkbox den katharizei kai otan anoigei i selida kai einai hide ola ta checkbox moy emfanizei apo ta 6 simeia ta tessera teleytaia, diladi pidaei to prwto kai deytero, kamia idea???? thanks

koitaw kai ayto to paradeigma alla den mporw na katalavw poy kanw lathos http://www.geocodezip.com/v3_MW_example_categories.html

tattooiv · Στις: 11 Ιαν 2012 23:09 Θέμα:

Δασκαλε fafo μια βοηθεια...???

anvc · Στις: 30 Ιαν 2012 17:04 Θέμα:

Μια ερωτηση πανω σ'αυτο.

Η συναρτηση myclick πως παιρνει τα δεδομενα απο το sidebar; Δηλαδη πως ξερει οτι εγω παταω το 1ο στοιχειο και με πηγαινει στις συντεταγμενες του πρωτου;

Το δοκιμαζω σ'εμενα και ενω το infowindow μου δειχνει το σωστο name, με πηγαινει στο τελευταιο marker του xml, οποια πολη κι αν πατησω.

Σας παραθετω τον κωδικα:

κώδικας:

var infowindow;
var map;
var side_bar_html = "";
var markersArray = [];

var markerImage = new google.maps.MarkerImage('images/image.png',
new google.maps.Size(32,37),
new google.maps.Point(0,0),
new google.maps.Point(16,37)
);

var markerShadow = new google.maps.MarkerImage("images/shadow.png",
new google.maps.Size(51,37),
new google.maps.Point(0,0),
new google.maps.Point(16,37)
);

function initialize() {
var mtypes = [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID];
var settings = {
      zoom: 7,
      center: new google.maps.LatLng(40.20405, 23.21411),
      mapTypeControl: true,
      mapTypeControlOptions: {
         style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
         position: google.maps.ControlPosition.TOP_LEFT,
         mapTypeIds: mtypes
         },
      navigationControl: true,
      navigationControlOptions: {style: google.maps.NavigationControlStyle.LARGE},
      mapTypeId: google.maps.MapTypeId.ROADMAP};

map = new google.maps.Map(document.getElementById("map_canvas"), settings);
var bounds = new google.maps.LatLngBounds();

downloadUrl("markers.xml", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var name = markers[i].getAttribute("name");
var area = markers[i].getAttribute("area");
var addr = markers[i].getAttribute("address");
var city = markers[i].getAttribute("city");
var tel = markers[i].getAttribute("tel");
var marker = createMarker(name, latlng, markerImage, markerShadow);

markersArray.push(marker);
side_bar_html += '<a href="javascript:myclick(' + i + ')">' + markers[i].getAttribute("name") + '<\/a><br>';
document.getElementById("side_bar").innerHTML = side_bar_html;
bounds.extend(latlng);
}
   map.fitBounds(bounds);
});
}

function createMarker(name, latlng, markerImage , markerShadow) {
marker = new google.maps.Marker({
   position: latlng,
   map: map,
   icon:markerImage,
   shadow:markerShadow
   });

google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: name});
infowindow.open(map, marker);
});
return marker;
}

function myclick(i) {
google.maps.event.trigger(markersArray[i], "click");
map.setZoom(11);
}

google.maps.event.addDomListener(window, 'load', initialize);

anvc · Στις: 07 Φεβ 2012 12:09 Θέμα:

Οκ το βρηκα τελικα, ειχα λαθος στον κωδικα.

Κατι αλλο, πως μπορω να επιλεγω με select box τα στοιχεια που βρισκονται στη sidebar και να με πηγαινει στο σημειο, οπως το εκανε ο fafos στο παραπανω παραδειγμα;

tattooiv · Στις: 08 Φεβ 2012 03:32 Θέμα:

anvc ανέφερε:

Οκ το βρηκα τελικα, ειχα λαθος στον κωδικα.

Κατι αλλο, πως μπορω να επιλεγω με select box τα στοιχεια που βρισκονται στη sidebar και να με πηγαινει στο σημειο, οπως το εκανε ο fafos στο παραπανω παραδειγμα;

poio paradeigma ennoeis??? dwse to link

anvc · Στις: 08 Φεβ 2012 09:34 Θέμα:

Αυτο με το sidebar παραπανω: http://istopoli.com/tuts/gmv3/newpage4.html .

Θελω να επιλεγω με select box μια περιοχη (η ακομα καλυτερα με 2 select box, με το 2ο να επιλεγω ενα συγκεκριμενο marker).

Η οποια βοηθεια σας ειναι πολυτιμη! Ευχαριστω!

tattooiv · Στις: 08 Φεβ 2012 17:39 Θέμα:

epeidi kai egw twra mathenw kai kanw paradeigmata me google map, den kserw na sou pw tin lysi, pantnws prospathise na kaneis ayto poy kanw egw, anoigw ton kwdika se kapoia paradeigmata apo selides kai prospathw na kanw ayto poy thelw. des ton kwdika apo ayta ta paradeigmata mipws se voithisoyn...
http://www.birdtheme.org/useful/sub/kmlwithv3.php?mine=Sightings
http://www.geocodezip.com/v3_MW_example_categories.html
http://www.geocodezip.com/v3_MW_example_map15c.html

fafos · Στις: 08 Φεβ 2012 19:45 Θέμα:

anvc ανέφερε:

Αυτο με το sidebar παραπανω: http://istopoli.com/tuts/gmv3/newpage4.html .

Θελω να επιλεγω με select box μια περιοχη (η ακομα καλυτερα με 2 select box, με το 2ο να επιλεγω ενα συγκεκριμενο marker).

Η οποια βοηθεια σας ειναι πολυτιμη! Ευχαριστω!

gia to select mallon enoeis kati tetoio: http://istopoli.com/tuts/gmv3/selectmenu.html

gia tous markers den katalava ti theleis na kaneis..

anvc · Στις: 09 Φεβ 2012 12:05 Θέμα:

Ευχαριστω παρα πολυ για την αμεση απαντηση παιδια!!!

Να το εξηγησω παλι, γιατι το ξανασκεφτηκα και θα πω αυτο που θελω να κανω γενικοτερα:

Στην ουσια θελω να εχω ενα select box "Διάλεξε Πόλη" και αφου επιλεξω πχ "Θεσσαλονικη" ο χαρτης μου να δειχνει αυτοματα την Θεσσαλονικη (ή να κρυβει τα markers δεν ανηκουν στη Θεσσαλονικη).

Ταυτοχρονα θα εμφανιζεται ενα 2ο select box το οποιο θα περιεχει περιοχες (π.χ Καλαμαρια). Αφου επιλεξω "Καλαμαρια", με καποιο τροπο (σε πινακακι) να φαινονται τα καταστηματα (δηλαδη τα τοποθετημενα markers) που βρισκονται στην Καλαμαρια.

tattooiv · Στις: 09 Φεβ 2012 21:18 Θέμα:

sto 1o link poy evala pio panw exei ena select box poy dialegeis i dania i filipines (kati antoistoixo me to thessaloniki, athina) arki na peis poy thelei na kentrarei o xartis kathe fora, kai gia to 2o select box, mporeis na pareis tin logiki tis leitoyrgias toy 2ou link apla ekei exei checkbox, kathe fora poy epilegeis ena chechbox sou emfanizei kai merika markers

epeidi kai egw twra prospathw na doylepsw me checkbox, an kataferw kati tha anevasw ton kwdika opws pio prin ekana me tin slidebar...

anvc · Στις: 12 Φεβ 2012 23:33 Θέμα:

Μπορεις να με βοηθησεις για το πως θα κανω το χαρτη να κεντραρει σε συγκεκριμενη περιοχη; Δηλαδη επιλεγοντας απο το selectbox "Θεσσαλονικη" να τη δειχνει; Εχει καμια σχεση με το center; Πως θα δωσω center για την καθε πολη;

Ευχαριστω πολυ!