freestuff.gr αρχική σελίδα
 FAQFAQ    ΑναζήτησηΑναζήτηση   Λίστα ΜελώνΛίστα Μελών   Ομάδες ΜελώνΟμάδες Μελών   <b>Εγγραφή Μέλους</b>Εγγραφή Μέλους 
 ΠροφίλΠροφίλ   Επιλογές μέλους Επιλογές   Τα bookmarks μου Τα bookmarks μου   Προσωπικά μηνύματαΠροσωπικά μηνύματα 
  διαφήμιση  

Καλώς ήρθατε στο forum μας! Για να συμμετάσχετε στις συζητήσεις θα πρέπει να είσαστε μέλος. Γίνετε μέλος τώρα!.
 

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


 Forum index » Δημιουργία Web Sites, Γραφικών & Προγραμματισμός » HTML, CSS και JavaScript » HTML και XHTML
Moderators:  Super-Moderators, WebDev Moderators
Εισαγωγή νέου Θέματος   Απάντηση στο Θέμα Σελίδα 1 από 2 [19 Μηνύματα]      Bookmarks Tags: googlemap Mark the topic unread :: Προηγούμενο θέμα :: Επόμενο θέμα
Σελίδα:  1, 2 Επόμενο
ΑποστολέαςΜήνυμα
tattooiv


Μέλος από: 19 Δεκ 2009
Βοηθήματα: 1
Μηνύματα: 98


View users profile
ΜήνυμαΣτις: 06 Ιαν 2012 20:13    Θέμα: προβλημα με Sidebar σε google map V3 Απάντηση με παράθεση  Mark this post and the followings unread

καλησπερα εχω ενα 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>

Last edited by tattooiv on 10 Ιαν 2012 22:41, edited 1 time in total
tattooiv


Μέλος από: 19 Δεκ 2009
Βοηθήματα: 1
Μηνύματα: 98


View users profile
ΜήνυμαΣτις: 08 Ιαν 2012 03:52    Θέμα: Απάντηση με παράθεση  Mark this post and the followings unread

το βρηκα το προβλημα, ειχα ξεχασει να γραψω
κώδικας:
 marker.myname = name;
μεσα στην function createMarker και για να δουλευουν τα link στην sidebar προσθεσα και την
κώδικας:

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

Last edited by tattooiv on 10 Ιαν 2012 22:41, edited 1 time in total
fafos
Script Master

Μέλος από: 30 Νοε 2004
Βοηθήματα: 17
Scripts: 6
Μηνύματα: 256+


View users profile
ΜήνυμαΣτις: 08 Ιαν 2012 04:25    Θέμα: Απάντηση με παράθεση  Mark this post and the followings unread

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


Μέλος από: 19 Δεκ 2009
Βοηθήματα: 1
Μηνύματα: 98


View users profile
ΜήνυμαΣτις: 08 Ιαν 2012 04:49    Θέμα: Απάντηση με παράθεση  Mark this post and the followings unread

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


Μέλος από: 19 Δεκ 2009
Βοηθήματα: 1
Μηνύματα: 98


View users profile
ΜήνυμαΣτις: 10 Ιαν 2012 22:40    Θέμα: Απάντηση με παράθεση  Mark this post and the followings unread

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

Last edited by tattooiv on 09 Φεβ 2012 21:41, edited 1 time in total
tattooiv


Μέλος από: 19 Δεκ 2009
Βοηθήματα: 1
Μηνύματα: 98


View users profile
ΜήνυμαΣτις: 11 Ιαν 2012 22:09    Θέμα: Απάντηση με παράθεση  Mark this post and the followings unread

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


Μέλος από: 21 Σεπ 2007
Μηνύματα: 25

View users profile
ΜήνυμαΣτις: 30 Ιαν 2012 16:04    Θέμα: Απάντηση με παράθεση  Mark this post and the followings unread

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

Η συναρτηση 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


Μέλος από: 21 Σεπ 2007
Μηνύματα: 25

View users profile
ΜήνυμαΣτις: 07 Φεβ 2012 11:09    Θέμα: Απάντηση με παράθεση  Mark this post and the followings unread

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

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


Μέλος από: 19 Δεκ 2009
Βοηθήματα: 1
Μηνύματα: 98


View users profile
ΜήνυμαΣτις: 08 Φεβ 2012 02:32    Θέμα: Απάντηση με παράθεση  Mark this post and the followings unread

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

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


poio paradeigma ennoeis??? dwse to link
anvc


Μέλος από: 21 Σεπ 2007
Μηνύματα: 25

View users profile
ΜήνυμαΣτις: 08 Φεβ 2012 08:34    Θέμα: Απάντηση με παράθεση  Mark this post and the followings unread

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

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

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


Μέλος από: 19 Δεκ 2009
Βοηθήματα: 1
Μηνύματα: 98


View users profile
ΜήνυμαΣτις: 08 Φεβ 2012 16:39    Θέμα: Απάντηση με παράθεση  Mark this post and the followings unread

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
Script Master

Μέλος από: 30 Νοε 2004
Βοηθήματα: 17
Scripts: 6
Μηνύματα: 256+


View users profile
ΜήνυμαΣτις: 08 Φεβ 2012 18:45    Θέμα: Απάντηση με παράθεση  Mark this post and the followings unread

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


Μέλος από: 21 Σεπ 2007
Μηνύματα: 25

View users profile
ΜήνυμαΣτις: 09 Φεβ 2012 11:05    Θέμα: Απάντηση με παράθεση  Mark this post and the followings unread

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

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

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

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


Μέλος από: 19 Δεκ 2009
Βοηθήματα: 1
Μηνύματα: 98


View users profile
ΜήνυμαΣτις: 09 Φεβ 2012 20:18    Θέμα: Απάντηση με παράθεση  Mark this post and the followings unread

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


Μέλος από: 21 Σεπ 2007
Μηνύματα: 25

View users profile
ΜήνυμαΣτις: 12 Φεβ 2012 22:33    Θέμα: Απάντηση με παράθεση  Mark this post and the followings unread

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

Ευχαριστω πολυ!
Εμφάνιση Μηνυμάτων:   
Εισαγωγή νέου Θέματος   Απάντηση στο Θέμα Σελίδα 1 από 2 [19 Μηνύματα] Σελίδα:  1, 2 Επόμενο
Mark the topic unread :: Προηγούμενο θέμα :: Επόμενο θέμα
 Forum index » Δημιουργία Web Sites, Γραφικών & Προγραμματισμός » HTML, CSS και JavaScript » HTML και XHTML


Σχετικά θέματα
 Θέματα   Απ/σεις   Αποστολέας   Τελευταίο μήνυμα 
Google Map σε ιστοσελίδα 3 parianos 22 Φεβ 2014 14:06
fafos Εμφάνιση τελευταίου μηνύματος
Δημιουργία Google Map 5 dmarop 19 Ιουν 2013 14:32
Sermac Εμφάνιση τελευταίου μηνύματος
Google Maps v2 or v3 ? Πληρωνουμε ? 2 karanik 03 Νοε 2012 20:15
Khronos Εμφάνιση τελευταίου μηνύματος
Βοηθεια με Google Maps 4 dionisis71 12 Οκτ 2012 09:59
dionisis71 Εμφάνιση τελευταίου μηνύματος
Google Maps - Point, Lines, Polygons 4 Intefix 17 Σεπ 2012 16:37
Intefix Εμφάνιση τελευταίου μηνύματος
 
Τώρα είναι 25 Απρ 2014 09:56 | All times are UTC + 2


Email This Page to Someone! add to Favorites

     Powered by p h p B B © 2001,2005 p h p B B Group
Για άμεση επικοινωνία με τον διαχειριστή του freestuff.gr στο email: freestuff.gr(παπάκι)gmail.com


κακό μάτι
Copyright © 1999-2013 Freestuff.gr All Rights Reserved  
Version Aegean, designed by N. Tsaganos