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

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: Super-Moderators, WebDev Moderators

Απάντηση
Άβαταρ μέλους
tattooiv
Δημοσιεύσεις: 104
Εγγραφή: 19 Δεκ 2009 01:00

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

Δημοσίευση από tattooiv » 06 Ιαν 2012 20:13

καλησπερα εχω ενα 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 &#123; height&#58; 100% &#125;
  body &#123; height&#58; 100%; margin&#58; 0; padding&#58; 0 &#125;
  #map_canvas &#123; height&#58; 100% &#125;
</style>

<script type="text/javascript" src="http&#58;//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 = &#91;google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN &#93;;
  var side_bar_html = "";
  var gmarkers = &#91;&#93;;
  var infowindow; 
  var map = null; 
  var gicons = &#91;&#93;;
  
  
 var markerShadow = new google.maps.MarkerImage&#40; 				
    "images/shadow.png", 
    new google.maps.Size&#40;54,37&#41;, 
    new google.maps.Point&#40;0,0&#41;, 
    new google.maps.Point&#40;16,37&#41; 
  &#41;;

function makeSidebar&#40;&#41; &#123;
        var html = "";
        for &#40;var i=0; i<gmarkers.length ; i++&#41; &#123;
          if &#40;gmarkers&#91;i&#93;.getVisible&#40;&#41;&#41; &#123;
		 html += '<a href="javascript&#58;myclick&#40;' + i + '&#41;">' + gmarkers&#91;i&#93;.myname+ '<\/a><br>'; 
          &#125;
        &#125;
        document.getElementById&#40;"side_bar"&#41;.innerHTML = html;
 
      &#125;


      


  function initialize&#40;&#41; &#123; 
			    var myLatlng = new google.maps.LatLng&#40;41.084316, 23.546791&#41;; 
			    var myOptions = &#123; 
					      zoom&#58; 14, 
					      center&#58; myLatlng, 
					      mapTypeId&#58; google.maps.MapTypeId.ROADMAP, 
					      mapTypeControl&#58; true,
					        mapTypeControlOptions&#58; 
					          &#123; 
					          position&#58; google.maps.ControlPosition.TOP_RIGHT,		
					          style&#58; google.maps.MapTypeControlStyle.DROPDOWN_MENU,    	 
					          mapTypeIds&#58; mtypes 						
					          &#125;,     
					          zoomControl&#58; true, 
					          zoomControlOptions&#58;
					          &#123; 
					          position&#58; google.maps.ControlPosition.LEFT_CENTER,	
					          style&#58; google.maps.ZoomControlStyle.DEFAULT         
					          &#125;  
			    &#125; 
			    map = new google.maps.Map&#40;document.getElementById&#40;"map_canvas"&#41;, myOptions&#41;; 
			    
			    google.maps.event.addListener&#40;map, 'click', function&#40;&#41; &#123;
    			    infowindow.close&#40;&#41;;
      				  &#125;&#41;;
			    
			    downloadUrl&#40;"markers.xml", function&#40;data&#41; &#123; 
			      var markers = data.documentElement.getElementsByTagName&#40;"marker"&#41;; 
			      for &#40;var i = 0; i < markers.length; i++&#41; &#123; 
			        var latlng = new google.maps.LatLng&#40;parseFloat&#40;markers&#91;i&#93;.getAttribute&#40;"lat"&#41;&#41;, 
			                                    parseFloat&#40;markers&#91;i&#93;.getAttribute&#40;"lng"&#41;&#41;&#41;; 
			        var marker = createMarker&#40;markers&#91;i&#93;.getAttribute&#40;"name"&#41;, latlng, markers&#91;i&#93;.getAttribute&#40;"icon"&#41;, markerShadow, markers&#91;i&#93;.getAttribute&#40;"address"&#41;&#41;; 
			        
			        
			        &#125; 
			       makeSidebar&#40;&#41;; 
			       
			     &#125;&#41;; 
			     
  &#125; 




 function createMarker&#40;name, latlng, icon, markerShadow, address&#41; &#123; 
    var markerIcon = new google.maps.MarkerImage&#40; 
    icon, 
    new google.maps.Size&#40;32,37&#41;, 
    new google.maps.Point&#40;0,0&#41;, 
    new google.maps.Point&#40;16,37&#41; 
  &#41;;  
  
  
    var marker = new google.maps.Marker&#40;&#123; 
   position&#58; latlng, 
   map&#58; map, 
   icon&#58;markerIcon, 
   shadow&#58;markerShadow, 
   title&#58;address
   &#125;&#41;; 
    
    google.maps.event.addListener&#40;marker, "click", function&#40;&#41; &#123; 
      if &#40;infowindow&#41; infowindow.close&#40;&#41;; 
      infowindow = new google.maps.InfoWindow&#40;&#123;content&#58; name&#125;&#41;; 
      infowindow.open&#40;map, marker&#41;; 
    &#125;&#41;; 
    
    gmarkers.push&#40;marker&#41;;  
        // add a line to the side_bar html
        makeSidebar&#40;&#41;;

    return marker; 
  &#125; 
  
  

</script> 
</head> 
<body onload="initialize&#40;&#41;"> 
<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&#58; 550px; height&#58; 450px"></div> 																								
</td>
   <td valign="top" style="width&#58;200px; text-decoration&#58; underline; color&#58; #4444ff;"> 
           <div id="side_bar"></div>
        </td>
      </tr>
</table>
  
</body> 

</html>
Τελευταία επεξεργασία από το μέλος tattooiv την 10 Ιαν 2012 22:41, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
tattooiv
Δημοσιεύσεις: 104
Εγγραφή: 19 Δεκ 2009 01:00

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

Δημοσίευση από tattooiv » 08 Ιαν 2012 03:52

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

Κώδικας: Επιλογή όλων

 marker.myname = name; 
μεσα στην function createMarker και για να δουλευουν τα link στην sidebar προσθεσα και την

Κώδικας: Επιλογή όλων

function myclick&#40;i&#41; &#123;
                    google.maps.event.trigger&#40;gmarkers&#91;i&#93;, 'click'&#41;;
                    map.setCenter&#40;gmarkers&#91;i&#93;.position&#41;;
                &#125;
Τελευταία επεξεργασία από το μέλος tattooiv την 10 Ιαν 2012 22:41, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6227
Εγγραφή: 30 Νοέμ 2004 03:09

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

Δημοσίευση από fafos » 08 Ιαν 2012 04: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
Δημοσιεύσεις: 104
Εγγραφή: 19 Δεκ 2009 01:00

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

Δημοσίευση από tattooiv » 08 Ιαν 2012 04:49

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

Άβαταρ μέλους
tattooiv
Δημοσιεύσεις: 104
Εγγραφή: 19 Δεκ 2009 01:00

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

Δημοσίευση από tattooiv » 10 Ιαν 2012 22: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&#40;category&#41; &#123;
                    for &#40;var i=0; i<gmarkers.length; i++&#41; &#123;
                        if &#40;gmarkers&#91;i&#93;.mycategory == category&#41; &#123;
                            gmarkers&#91;i&#93;.setVisible&#40;true&#41;;
                        &#125;
                    &#125;
// Check the checkbox
			document.getElementById&#40;category+"box"&#41;.checked = true;
                    
                &#125;
                
// Hides all markers of a particular category, and ensures the checkbox is cleared
                function hide&#40;category&#41; &#123;
                    for &#40;var i=0; i<gmarkers.length; i++&#41; &#123;
                        if &#40;gmarkers&#91;i&#93;.mycategory == category&#41; &#123;
                            gmarkers&#91;i&#93;.setVisible&#40;false&#41;;
                        &#125;
                    &#125;
// Clear the checkbox
                    document.getElementById&#40;category+"box"&#41;.checked = false;
                    // Close the info window, in case its open on a marker that we just hid
                    infobox.close&#40;&#41;;
                &#125;                
                
		  
  
// A checkbox has been clicked
                function boxclick&#40;box,category&#41; &#123;
                    if &#40;box.checked&#41; &#123;
                        show&#40;category&#41;;
                    &#125;
                    else &#123;
                        hide&#40;category&#41;;
                    &#125;
                    makeSidebar&#40;&#41;;
                &#125;
meta mesa stin downloadUrl("markers.xml", function(doc) evala ta

Κώδικας: Επιλογή όλων

hide&#40;"one"&#41;;
hide&#40;"two"&#41;;
hide&#40;"three"&#41;;
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&#58;</strong> <input type="checkbox" id="onebox" onclick="boxclick&#40;this,'one'&#41;" /></p>
</td>
<td>
    <p align="center"><img src="images/wifi_false.png">
    <br /><strong>two&#58;</strong> <input type="checkbox" id="twobox" onclick="boxclick&#40;this,'two'&#41;" /></p>
</td>
<td>
<p align="center"><img src="images/wifi_spot.png">
<br /><strong>three&#58;</strong> <input type="checkbox" id="threebox" onclick="boxclick&#40;this,'three'&#41;" /></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 την 09 Φεβ 2012 21:41, έχει επεξεργασθεί 1 φορά συνολικά.

Άβαταρ μέλους
tattooiv
Δημοσιεύσεις: 104
Εγγραφή: 19 Δεκ 2009 01:00

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

Δημοσίευση από tattooiv » 11 Ιαν 2012 22:09

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

anvc
Δημοσιεύσεις: 25
Εγγραφή: 21 Σεπ 2007 18:12

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

Δημοσίευση από anvc » 30 Ιαν 2012 16:04

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

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

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

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

Κώδικας: Επιλογή όλων

var infowindow;
var map;
var side_bar_html = "";
var markersArray = &#91;&#93;;

var markerImage = new google.maps.MarkerImage&#40;'images/image.png',
	new google.maps.Size&#40;32,37&#41;,
	new google.maps.Point&#40;0,0&#41;,
	new google.maps.Point&#40;16,37&#41;
	&#41;;

var markerShadow = new google.maps.MarkerImage&#40;"images/shadow.png",
    new google.maps.Size&#40;51,37&#41;,
    new google.maps.Point&#40;0,0&#41;,
    new google.maps.Point&#40;16,37&#41;
  &#41;;


function initialize&#40;&#41; &#123;
	var mtypes = &#91;google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID&#93;;	
	var settings = &#123;
			zoom&#58; 7,
			center&#58; new google.maps.LatLng&#40;40.20405, 23.21411&#41;,
			mapTypeControl&#58; true,
			mapTypeControlOptions&#58; &#123;
				style&#58; google.maps.MapTypeControlStyle.DROPDOWN_MENU,
				position&#58; google.maps.ControlPosition.TOP_LEFT,
				mapTypeIds&#58; mtypes
				&#125;,
			navigationControl&#58; true,
			navigationControlOptions&#58; &#123;style&#58; google.maps.NavigationControlStyle.LARGE&#125;,
			mapTypeId&#58; google.maps.MapTypeId.ROADMAP&#125;;
			
	map = new google.maps.Map&#40;document.getElementById&#40;"map_canvas"&#41;, settings&#41;;
	var bounds = new google.maps.LatLngBounds&#40;&#41;;

    downloadUrl&#40;"markers.xml", function&#40;data&#41; &#123;
      var markers = data.documentElement.getElementsByTagName&#40;"marker"&#41;;
      for &#40;var i = 0; i < markers.length; i++&#41; &#123;
        var latlng = new google.maps.LatLng&#40;parseFloat&#40;markers&#91;i&#93;.getAttribute&#40;"lat"&#41;&#41;,
                                    parseFloat&#40;markers&#91;i&#93;.getAttribute&#40;"lng"&#41;&#41;&#41;;
	var name = markers&#91;i&#93;.getAttribute&#40;"name"&#41;;
	var area = markers&#91;i&#93;.getAttribute&#40;"area"&#41;;
	var addr = markers&#91;i&#93;.getAttribute&#40;"address"&#41;;
	var city = markers&#91;i&#93;.getAttribute&#40;"city"&#41;;
	var tel = markers&#91;i&#93;.getAttribute&#40;"tel"&#41;;
        var marker = createMarker&#40;name, latlng, markerImage, markerShadow&#41;;
	
	markersArray.push&#40;marker&#41;;
	side_bar_html += '<a href="javascript&#58;myclick&#40;' + i + '&#41;">' + markers&#91;i&#93;.getAttribute&#40;"name"&#41; + '<\/a><br>';
	document.getElementById&#40;"side_bar"&#41;.innerHTML = side_bar_html;
	bounds.extend&#40;latlng&#41;;
       &#125;
     	map.fitBounds&#40;bounds&#41;;
	&#125;&#41;;
&#125;

function createMarker&#40;name, latlng, markerImage , markerShadow&#41; &#123;
	marker = new google.maps.Marker&#40;&#123;
		position&#58; latlng, 
		map&#58; map, 
		icon&#58;markerImage, 
		shadow&#58;markerShadow
		&#125;&#41;;
	
google.maps.event.addListener&#40;marker, "click", function&#40;&#41; &#123;
      if &#40;infowindow&#41; infowindow.close&#40;&#41;;
      infowindow = new google.maps.InfoWindow&#40;&#123;content&#58; name&#125;&#41;;
      infowindow.open&#40;map, marker&#41;;
    &#125;&#41;;
    return marker;
  &#125;

function myclick&#40;i&#41; &#123;
	google.maps.event.trigger&#40;markersArray&#91;i&#93;, "click"&#41;;
	map.setZoom&#40;11&#41;;
&#125;

google.maps.event.addDomListener&#40;window, 'load', initialize&#41;;


anvc
Δημοσιεύσεις: 25
Εγγραφή: 21 Σεπ 2007 18:12

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

Δημοσίευση από anvc » 07 Φεβ 2012 11:09

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

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

Άβαταρ μέλους
tattooiv
Δημοσιεύσεις: 104
Εγγραφή: 19 Δεκ 2009 01:00

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

Δημοσίευση από tattooiv » 08 Φεβ 2012 02:32

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

Κατι αλλο, πως μπορω να επιλεγω με select box τα στοιχεια που βρισκονται στη sidebar και να με πηγαινει στο σημειο, οπως το εκανε ο fafos στο παραπανω παραδειγμα;
poio paradeigma ennoeis??? dwse to link

anvc
Δημοσιεύσεις: 25
Εγγραφή: 21 Σεπ 2007 18:12

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

Δημοσίευση από anvc » 08 Φεβ 2012 08:34

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

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

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

Άβαταρ μέλους
tattooiv
Δημοσιεύσεις: 104
Εγγραφή: 19 Δεκ 2009 01:00

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

Δημοσίευση από tattooiv » 08 Φεβ 2012 16: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/kml ... =Sightings
http://www.geocodezip.com/v3_MW_example_categories.html
http://www.geocodezip.com/v3_MW_example_map15c.html

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6227
Εγγραφή: 30 Νοέμ 2004 03:09

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

Δημοσίευση από fafos » 08 Φεβ 2012 18: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
Δημοσιεύσεις: 25
Εγγραφή: 21 Σεπ 2007 18:12

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

Δημοσίευση από anvc » 09 Φεβ 2012 11:05

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

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

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

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

Άβαταρ μέλους
tattooiv
Δημοσιεύσεις: 104
Εγγραφή: 19 Δεκ 2009 01:00

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

Δημοσίευση από tattooiv » 09 Φεβ 2012 20: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
Δημοσιεύσεις: 25
Εγγραφή: 21 Σεπ 2007 18:12

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

Δημοσίευση από anvc » 12 Φεβ 2012 22:33

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

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

Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες