Google Maps V3 | 5ο, Custom InfoWindows

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

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

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

Google Maps V3 | 5ο, Custom InfoWindows

Δημοσίευση από fafos » 06 Σεπ 2011 04:57

Συνέχεια από εδώ: http://www.freestuff.gr/forums/viewtopic.php?t=57935

H V3 μας δίνει την δυνατότητα να χρησιμοποιήσουμε δικό μας style στα infowindows με την βοήθεια απλής css. Εδώ θα σας δείξω 3 τρόπους για να φτιάξετε τα δικά σας infowindows.


1ος τρόπος:

Δείτε ένα παράδειγμα εδώ: http://istopoli.com/tuts/gmv3/infocss.html (κλικ στον marker για να εμφανιστεί το infowindow)

Προσωπικά είναι ο αγαπημένος μου τρόπος.. για να δούμε πως θα το φτιάξουμε...

Θα χρειαστεί να βάλουμε ένα αρχείο js το οποίο μπορείτε να κατεβάσετε εδώ: http://istopoli.com/tuts/gmv3/js/infowindowcss.js

αυτό θα το βάλουμε μαζί με το κλασσικό js της google:

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

<script type="text/javascript" src="http&#58;//maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/infowindowcss.js"></script>
μετά δημιουργούμε τον χάρτη όπως γνωρίζουμε από τα προηγούμενα βοηθήματα...

προσθέτουμε κάποια options (επιλογές) που θα μας δώσουν το style του infowindow:

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

	var contentString = 'κείμενο και HTML εδώ';
	
	infoBubble = new InfoBubble&#40;&#123;
				map &#58; map,
				maxWidth &#58; 400,
				minWidth &#58; 150,
				maxHeight &#58; 300,
				minHeight &#58; 50,
				shadowStyle &#58; 1,
				padding &#58; 10,
				backgroundColor &#58; '#fdead0',
				borderRadius &#58; 8,
				arrowSize &#58; 15,
				borderWidth &#58; 5,
				borderColor &#58; '#ff8000',
				disableAutoPan &#58; false,
				hideCloseButton &#58; false,
				arrowPosition &#58; 50,
				arrowStyle &#58; 0
			&#125;&#41;;

	infoBubble.addTab&#40;'info window', contentString&#41;;
Ας αναλύσουμε τις επιλογές:

var contentString = 'κείμενο και HTML εδώ';
Εδώ θα βάλουμε το κείμενο και ότι HTML στοιχεία θέλουμε για να μας τα προβάλει το infowindow. Αυτό που πρέπει να προσέξετε είναι να μην "σπάσετε" τον κώδικα βάζοντας στοιχεία αντίθετα με το javascript. Για παράδειγμα αν στο παραπάνω παράδειγμα βάλετε μονό quote(') στο περιεχόμενο, ο χάρτης δεν θα δουλέψει σωστά!

map : map, δηλώνουμε τον χάρτη
maxWidth : 400, Το μεγαλύτερο πλάτος που θέλουμε να έχει το infowindow
minWidth : 150, Το μικρότερο πλάτος που θέλουμε να έχει το infowindow
maxHeight : 300, Το μεγαλύτερο ύψος που θέλουμε να έχει το infowindow
minHeight : 50, Το μικρότερο ύψος που θέλουμε να έχει το infowindow
shadowStyle : 1, 0= χωρίς σκιά - 1= με σκιά (είναι CSS3 και δεν το δείχνει σε όλους τους browsers)
padding : 10, Το περιθώριο από τις πλευρές του infowindow
backgroundColor : '#fdead0', Το χρώμα του φόντου
borderRadius : 8, Το "στρογγύλεμα των γωνιών (είναι CSS3 και δεν το δείχνει σε όλους τους browsers)
arrowSize : 15, Το μέγεθος στο βελάκι του infowindow
borderWidth : 5, Το μέγεθος της εξωτερικής γραμμής του infowindow
borderColor : '#ff8000', Το χρώμα της εξωτερικής γραμμής του infowindow
disableAutoPan : false, Πάντα false!
hideCloseButton : false, false= να εμφανίζει το εικονίδιο κλεισίματος του infowindow - true: να μην το εμφανίζει (αλλά πρέπει να βρείτε τρόπο να κλείνει το infowindow)
arrowPosition : 50, που να εμφανίζεται το βελάκι.. με το 50 πάει στην μέση, μικρότερο από το 50 πάει στα αριστερά και μεγαλύτερο από το 50 πάει προς τα δεξιά
arrowStyle : 0 0= το κανονικό βελάκι - 1= μισό βελάκι προς τα αριστερά - 2= μισό βελάκι προς τα δεξιά

Αν το κείμενο που θα βάλετε είναι μεγαλύτερο από τις μέγιστες διαστάσεις θα δείξει έναν scroller (κάτι ανάλογο με το overflow που χρησιμοποιούμε στην CSS+Divs)

Αν θέλετε να αλλάξετε το path του εικονιδίου κλεισίματος (ή και τον τίτλο του εικονιδίου) ανοίξτε το infowindowcss.js και αλλάξτε το σε αυτήν την γραμμή:

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

close.src = 'images/map_close.png';
(στις πρώτες γραμμές του κώδικα)

Μπορείτε βέβαια να χρησιμοποιήσετε τον τρόπο και για πολλαπλά markers... υπάρχουν κάποιες μικρές διαφορές τις οποίες μπορείτε να δείτε σε αυτό το παράδειγμα:

http://istopoli.com/tuts/gmv3/infocss_b.html

Συνεχίζουμε με τον 2ο τρόπο
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

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

Google Maps V3 | 5ο, Custom InfoWindows

Δημοσίευση από fafos » 06 Σεπ 2011 19:32

Ας δούμε και τος 2ο τρόπο για custom infowindow...

Μοιάζει με τον προηγούμενο μόνο που λειτουργεί πιο πολύ σαν "tooltip" ή "modal" παράθυρο... το μειονέκτημά του είναι ότι δεν ζυγίζεται αυτόματα στον marker και πρέπει να το ορίσουμε εμείς μέσα από το κώδικα..


2ος Τρόπος:

Δείτε ένα παράδειγμα εδώ: http://istopoli.com/tuts/gmv3/infobox.html

Θα χρειαστούμε και εδώ την βοήθεια ενός αρχείου js:

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

<script type="text/javascript" src="http&#58;//maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/infobox.js"></script>
το αρχείο μπορείτε να το κατεβάσετε εδώ: http://istopoli.com/tuts/gmv3/js/infobox.js

μετά ορίζουμε το κείμενο-HTML και το style που θέλουμε:

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

	var boxText = document.createElement&#40;"div"&#41;;
	boxText.style.cssText = "border&#58; 4px solid #c1dfff; margin-top&#58; 8px; background&#58; yellow url&#40;'images/bg-info.png'&#41; repeat; padding&#58; 5px;";
	boxText.innerHTML = 'κείμενο και HTML εδώ';
Ορίζοντας το style στο boxText.style.cssText το infowidow θα δείξει αυτό και θα αθετήσει τα options που θα δούμε παρακάτω.. μπορείτε βέβαια να ορίσετε classes ή ids για το style σας.
Παρακάτω ορίζουμε τα options:

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

	var myOptions = &#123;
		content &#58; boxText,
		disableAutoPan &#58; false,
		maxWidth &#58; 0,
		pixelOffset &#58; new google.maps.Size&#40;-140, -200&#41;,
		zIndex &#58; null,
		boxStyle &#58; &#123;
			background &#58; "url&#40;'images/bg-info.png'&#41; no-repeat",
			width &#58; "350px"
		&#125;,
		closeBoxMargin &#58; "-15px -20px 2px 2px",
		closeBoxURL&#58; "images/map_close.png",
		infoBoxClearance &#58; new google.maps.Size&#40;1, 1&#41;,
		isHidden &#58; false,
		pane &#58; "floatPane",
		enableEventPropagation &#58; false
	&#125;;
στο pixelOffset : new google.maps.Size(-140, -200), ορίζουμε που θα εμφανιστεί το infowindow σε σχέση με τον marker... τα options που μπορείτε να χρησιμοποιήσετε μπορείτε να τα δείτε αναλυτικά εδώ: http://google-maps-utility-library-v3.g ... rence.html

Το καλό με αυτόν τον τρόπο είναι ότι μπορεί να χρησιμοποιήσετε ότι θέλετε εκεί μέσα.. έχω φτιάξει 2 παραδείγματα με την jQuery UI για να καταλάβετε:

Tabs: http://istopoli.com/tuts/gmv3/infoboxUI.html

Accordion: http://istopoli.com/tuts/gmv3/infoboxUIac.html

Όπως και στον 1ο τρόπο μπορείτε να εμφανίζετε τα infowindows σε πολλαπλά markers και πρέπει να προσέξετε τι κείμενο-HTML θα βάλετε εκεί μέσα για να μην "σπάσει" ο κώδικας!

Συνεχίζουμε με τον 3ο τρόπο...
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

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

Google Maps V3 | 5ο, Custom InfoWindows

Δημοσίευση από fafos » 07 Σεπ 2011 21:34

Ο 3ος τρόπος δουλεύει και πάλι παρόμοια με τους παραπάνω αλλά με την διαφορά ότι εδώ χρησιμοποιούμε ένα προκαθορισμένο background image το οποίο όμως έχει 2 μειονεκτήματα... το πρώτο είναι ότι πρέπει να το "ζυγίσουμε" για να εμφανίζεται εκεί που θέλουμε (όπως και το προηγούμενο) και το 2ο είναι ότι το κείμενο δεν πρέπει να μας βγει πιο μεγάλο από μέγεθος της εικόνας (σε ύψος) γιατί χαλάει η εμφάνιση. Μπορούμε βέβαια να "παίξουμε" με το overflow στο div αλλά δεν δουλεύει σωστά σε explorer.

3ος τρόπος:

δείτε ένα παράδειγμα εδώ: http://istopoli.com/tuts/gmv3/infobg.html

χρησιμοποιώ αυτό το image σαν background:
Εικόνα

Ο κώδικας που χρησιμοποιούμε είναι αυτός:

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

<script type="text/javascript">
function InfoBox&#40;opts&#41; &#123;
  google.maps.OverlayView.call&#40;this&#41;;
  this.latlng_ = opts.latlng;
  this.map_ = opts.map;
  this.offsetVertical_ = -292;
  this.offsetHorizontal_ = -180;
  this.height_ = 255;
  this.width_ = 364;

  var me = this;
  this.boundsChangedListener_ =
    google.maps.event.addListener&#40;this.map_, "bounds_changed", function&#40;&#41; &#123;
      return me.panMap.apply&#40;me&#41;;
    &#125;&#41;;

  this.setMap&#40;this.map_&#41;;
&#125;


InfoBox.prototype = new google.maps.OverlayView&#40;&#41;;


InfoBox.prototype.remove = function&#40;&#41; &#123;
  if &#40;this.div_&#41; &#123;
    this.div_.parentNode.removeChild&#40;this.div_&#41;;
    this.div_ = null;
  &#125;
&#125;;

InfoBox.prototype.draw = function&#40;&#41; &#123;

  this.createElement&#40;&#41;;
  if &#40;!this.div_&#41; return;

  var pixPosition = this.getProjection&#40;&#41;.fromLatLngToDivPixel&#40;this.latlng_&#41;;
  if &#40;!pixPosition&#41; return;


  this.div_.style.width = this.width_ + "px";
  this.div_.style.left = &#40;pixPosition.x + this.offsetHorizontal_&#41; + "px";
  this.div_.style.height = this.height_ + "px";
  this.div_.style.top = &#40;pixPosition.y + this.offsetVertical_&#41; + "px";
  this.div_.style.display = 'block';

&#125;;

InfoBox.prototype.createElement = function&#40;&#41; &#123;
  var panes = this.getPanes&#40;&#41;;
  var div = this.div_;
  if &#40;!div&#41; &#123;

    div = this.div_ = document.createElement&#40;"div"&#41;;
    div.style.border = "0px none";
    div.style.position = "absolute";
    div.style.background = "url&#40;'images/info-bg.png'&#41;";
    div.style.width = this.width_ + "px";
    div.style.height = this.height_ + "px";
    var contentDiv = document.createElement&#40;"div"&#41;;
    contentDiv.style.margin = "5px";	
    contentDiv.style.padding = "15px";

	    contentDiv.innerHTML = '<div style="font-size &#58; 12px;font-family &#58; Verdana;font-weight &#58; normal;color &#58; #fff;text-align &#58; left;"><img src="images/panda.jpg" width="150" border="0" align="left" style="margin-top &#58; 5px;margin-left &#58; 5px;margin-right &#58; 5px;margin-bottom &#58; 5px;border-width &#58; 4px 4px 4px 4px;border-style &#58; solid solid solid solid;border-color &#58; #ffbc9b #ffbc9b #ffbc9b #ffbc9b;"><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b> Donec elit tortor, congue sed malesuada eu, sagittis quis orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut ultrices porttitor est, non gravida odio scelerisque quis. <font color="#990000">Suspendisse at elit ut diam suscipit lacinia.</font> <br>Donec accumsan venenatis lobortis.<i> Proin placerat auctor urna euismod imperdiet.</i> Etiam tincidunt, odio ut tincidunt auctor,<u> tellus ligula auctor augue</u>, ac sagittis lorem purus et dui. </div>';

    var topDiv = document.createElement&#40;"div"&#41;;
    topDiv.style.textAlign = "right";
    var closeImg = document.createElement&#40;"img"&#41;;
 
	closeImg.style&#91;'position'&#93; = 'absolute';
	closeImg.style&#91;'width'&#93; = "28px";
	closeImg.style&#91;'height'&#93; = "28px";
	closeImg.style&#91;'border'&#93; = 0;
	closeImg.style&#91;'cursor'&#93; = 'pointer';
	closeImg.style&#91;'right'&#93; = "-5px";
	closeImg.style&#91;'top'&#93; = "-5px";
	closeImg.style&#91;'zIndex'&#93; = 5;	
	closeImg.src = 'images/map_close.png';	
	
	
    topDiv.appendChild&#40;closeImg&#41;;

    function removeInfoBox&#40;ib&#41; &#123;
      return function&#40;&#41; &#123;
        ib.setMap&#40;null&#41;;
      &#125;;
    &#125;

    google.maps.event.addDomListener&#40;closeImg, 'click', removeInfoBox&#40;this&#41;&#41;;

    div.appendChild&#40;topDiv&#41;;
    div.appendChild&#40;contentDiv&#41;;
    div.style.display = 'none';
    panes.floatPane.appendChild&#40;div&#41;;
    this.panMap&#40;&#41;;
  &#125; else if &#40;div.parentNode != panes.floatPane&#41; &#123;
    div.parentNode.removeChild&#40;div&#41;;
    panes.floatPane.appendChild&#40;div&#41;;
  &#125; else &#123;

  &#125;
&#125;


InfoBox.prototype.panMap = function&#40;&#41; &#123;

  var map = this.map_;
  var bounds = map.getBounds&#40;&#41;;
  if &#40;!bounds&#41; return;

  var position = this.latlng_;

  var iwWidth = this.width_;
  var iwHeight = this.height_;

  var iwOffsetX = this.offsetHorizontal_;
  var iwOffsetY = this.offsetVertical_;

  var padX = 0;
  var padY = 0;

  var mapDiv = map.getDiv&#40;&#41;;
  var mapWidth = mapDiv.offsetWidth;
  var mapHeight = mapDiv.offsetHeight;
  var boundsSpan = bounds.toSpan&#40;&#41;;
  var longSpan = boundsSpan.lng&#40;&#41;;
  var latSpan = boundsSpan.lat&#40;&#41;;
  var degPixelX = longSpan / mapWidth;
  var degPixelY = latSpan / mapHeight;

  var mapWestLng = bounds.getSouthWest&#40;&#41;.lng&#40;&#41;;
  var mapEastLng = bounds.getNorthEast&#40;&#41;.lng&#40;&#41;;
  var mapNorthLat = bounds.getNorthEast&#40;&#41;.lat&#40;&#41;;
  var mapSouthLat = bounds.getSouthWest&#40;&#41;.lat&#40;&#41;;

  var iwWestLng = position.lng&#40;&#41; + &#40;iwOffsetX - padX&#41; * degPixelX;
  var iwEastLng = position.lng&#40;&#41; + &#40;iwOffsetX + iwWidth + padX&#41; * degPixelX;
  var iwNorthLat = position.lat&#40;&#41; - &#40;iwOffsetY - padY&#41; * degPixelY;
  var iwSouthLat = position.lat&#40;&#41; - &#40;iwOffsetY + iwHeight + padY&#41; * degPixelY;

  var shiftLng =
      &#40;iwWestLng < mapWestLng ? mapWestLng - iwWestLng &#58; 0&#41; +
      &#40;iwEastLng > mapEastLng ? mapEastLng - iwEastLng &#58; 0&#41;;
  var shiftLat =
      &#40;iwNorthLat > mapNorthLat ? mapNorthLat - iwNorthLat &#58; 0&#41; +
      &#40;iwSouthLat < mapSouthLat ? mapSouthLat - iwSouthLat &#58; 0&#41;;

  var center = map.getCenter&#40;&#41;;

  var centerX = center.lng&#40;&#41; - shiftLng;
  var centerY = center.lat&#40;&#41; - shiftLat;

  map.setCenter&#40;new google.maps.LatLng&#40;centerY, centerX&#41;&#41;;

  google.maps.event.removeListener&#40;this.boundsChangedListener_&#41;;
  this.boundsChangedListener_ = null;
&#125;;

function initialize&#40;&#41; &#123;

    var myOptions = &#123;
      zoom&#58; 16,
      center&#58; new google.maps.LatLng&#40;36.41806393820488, 25.427876249267573&#41;,
      mapTypeId&#58; google.maps.MapTypeId.ROADMAP    &#125;
    var map = new google.maps.Map&#40;document.getElementById&#40;"map_canvas"&#41;, myOptions&#41;;
	
    
    var marker = new google.maps.Marker&#40;&#123;
        position&#58; new google.maps.LatLng&#40;36.41806393820488, 25.427876249267573&#41;,
		map&#58; map
        
    &#125;&#41;;
	
    google.maps.event.addListener&#40;marker, "click", function&#40;e&#41; &#123;
      var infoBox = new InfoBox&#40;&#123;latlng&#58; marker.getPosition&#40;&#41;, map&#58; map&#125;&#41;;
  
    &#125;&#41;;
	  
  &#125;
 google.maps.event.addDomListener&#40;window, 'load', initialize&#41;; 

</script>
Οι επιλογές που πρέπει να αλλάζουμε:

this.offsetVertical_ = -292; Η απόσταση εμφάνισης του infowindow από τον marker κάθετα
this.offsetHorizontal_ = -180; Η απόσταση εμφάνισης του infowindow από τον marker οριζόντια (συνήθως το μισό του πλάτους του image αν θέλουμε να το φέρουμε ακριβώς στην μέση)
this.height_ = 255; Το ύψος του image
this.width_ = 364; Το πλάτος του image



contentDiv.innerHTML = '<div>......</div>'; κείμενο και HTML που θα εμφανίζει το infowindow


λίγο πιο κάτω...

div.style.border = "0px none"; πλάτος εξωτερικής γραμμής
div.style.position = "absolute"; μην το αλλάζετε
div.style.background = "url('images/info-bg.png')"; το image για το background
div.style.width = this.width_ + "px"; μην το αλλάζετε
div.style.height = this.height_ + "px"; μην το αλλάζετε
var contentDiv = document.createElement("div"); μην το αλλάζετε
contentDiv.style.margin = "5px"; το margin του infowindow
contentDiv.style.padding = "15px"; περιθώριο του κειμένου από τα πλάγια του infowindow

λίγο πιο κάτω:

topDiv.style.textAlign = "right"; Στοίχιση του εικονιδίου κλεισίματος

closeImg.style['position'] = 'absolute';
closeImg.style['width'] = "28px";
closeImg.style['height'] = "28px";
closeImg.style['border'] = 0;
closeImg.style['cursor'] = 'pointer';
closeImg.style['right'] = "-5px";
closeImg.style['top'] = "-5px";
closeImg.style['zIndex'] = 5;
closeImg.src = 'images/map_close.png';

Τα παραπάνω δεν χρειάζεται να τα αλλάξετε αν χρησιμοποιήσετε το εικονίδιο κλεισίματος που δίνω στα παραδείγματα.. αν χρησιμοποιήσετε κάποιο δικό σας εικονίδιο με διαφορετικές διαστάσεις αλλάξτε ανάλογα μέχρι να βρείτε το σημείο που θέλετε να εμφανίζεται το εικονίδιο.

Ο παραπάνω τρόπος δουλεύει και με πολλαπλά markers..


Στο επόμενο βοήθημα θα δούμε πως θα δίνουμε δικό μας style στους χάρτες (διαφορετικά χρώματα σε δρόμους, ξηρά, θάλασσα, απόκρυψη κειμένων και εικονιδίων κλπ)
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

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

Google Maps V3 | 5ο, Custom InfoWindows

Δημοσίευση από tattooiv » 10 Φεβ 2012 01:05

δουλευω με τον 1ο τροπο, και εχω την εξης απορία
χωρις δικο μας style στο infowindow εχουμε αυτον τον κωδικα οταν παταμε πανω σε ενα marker

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

 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; contentString&#125;&#41;;   
      infowindow.open&#40;map, marker&#41;; 
δηλαδη αν ειναι ανοιχτο καποιο marker, τοτε μας το κλείνει και στην συνεχεια δημιουγει ενα νεο infowindow για το marker που πατησαμε.

Με δικο μας style χρεισημοποιουμε το infoBubble

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

 var infoBubble; 
μεσα στην function createMarker προσθετουμε και το

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

 function createMarker&#40;name, latlng, icon, markerShadow, address, html, infoBubble&#41; 
επισης βαζουμε μεσα στην createMarker

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

  infoBubble = new InfoBubble&#40;&#123; 
            map &#58; map, 
            maxWidth &#58; 400, 
            minWidth &#58; 150, 
            maxHeight &#58; 300, 
            minHeight &#58; 50, 
            shadowStyle &#58; 1, 
            padding &#58; 10, 
            backgroundColor &#58; '#eeeeee', 
            borderRadius &#58; 20, 
            arrowSize &#58; 15, 
            borderWidth &#58; 3, 
            borderColor &#58; '#aaaaaa', 
            disableAutoPan &#58; false, 
            hideCloseButton &#58; false, 
            arrowPosition &#58; 50, 
            arrowStyle &#58; 0 
         &#125;&#41;; 

infoBubble.addTab&#40;'info window', contentString&#41;;
		
	google.maps.event.addListener&#40;marker, 'click', function &#40;&#41; &#123;
			if &#40;!infoBubble.isOpen&#40;&#41;&#41; &#123;
				infoBubble.open&#40;map, marker&#41;;
			&#125; else &#123;
				infoBubble.close&#40;map, marker&#41;;
			&#125;
    
    &#125;&#41;; 
αλλα εδω οταν ανοιγει καποιο marker δεν κλεινει αν ανοιζουμε ενα αλλο, δηλαδη ολα ειναι ανοιχτα τα infowindows εκτοσ και αν τα κλεισουμε εμεισ πατωντασ παλι πανω τους ή στο close πανω δεξια. Προσπαθησα να το φτιαξω συνδιάζοντας και τα δυο αλλα τιποτα, πχ infoBubble = new google.maps.ΙnfoBubble αλλα τιποτα, μηπως εχει αλλη συναρτηση που δεν ξερω????

κατι που εμαθα απο αλλα παραδειγματα:
Επισης αν βαλουμε μεσα στην createMarker αυτον τον κωδικα μας κλεινει ολα τα marker πατώντας απουδηποτε μεσα στον χαρτη και ειναι πολυ βολικο

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

google.maps.event.addListener&#40;map, 'click', function&#40;&#41; &#123;
    			    infoBubble.close&#40;map, marker&#41;;
      				  &#125;&#41;; 
ή χρεισημοποιoύμε infowindow.close(); αν δεν εχουμε δικο μας style, απλα για να δουλεψει τοτε πρεπει να το βγαλουμε μεσα απο την createMarker

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

Google Maps V3 | 5ο, Custom InfoWindows

Δημοσίευση από fafos » 10 Φεβ 2012 02:27

eides to 2o demo pou exo gia pollapla markers? http://istopoli.com/tuts/gmv3/infocss_b.html
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

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

Google Maps V3 | 5ο, Custom InfoWindows

Δημοσίευση από tattooiv » 10 Φεβ 2012 19:31

fafos έγραψε:eides to 2o demo pou exo gia pollapla markers? http://istopoli.com/tuts/gmv3/infocss_b.html
το ειδα το αλλα εχω μπερδευτει στο να τα συνδιασω για να κανω αυτο που θελω, Η λογικη του demo ειναι να δημιουργει οσο ειναι και η μεταβλητη locations τοσα marker και επειτα τα infobox, με μια for (αλλα δεν εχει πουθενα καμια infobox.close()

στον δικο μου κωδικα χρεισιμοποιω xml αρχειο το οποιο με μπερδευει. Οταν διαβαζει το αρχειο xml μεσα απο την for με μηκος το markers.length εκει καλείτε και η var marker = createMarker(markers.getAttribute("name"), latlng, markers.getAttribute("icon"), markerShadow, markers.getAttribute("address"), html); και μετα μεσα στην createΜarker εχω την συναρτηση που καλειτε για να ανοιξει ενα infowindow, οπως εγραψα πιο πανω. Απο οτι νομιζω καπου πρεπει να βαλω να κλεινει το infowindow καθε φορα που δημιουργω ενα marker. μεμονομενα τα παραδειγματα φαινονται ευκολα και κατανοητα στον κώδικα, αλλα οταν θελεις να χρεισημοποιήσεις οπως εγω και slidebar και checkbox και δικα μου infowindow και xml αρχειο, τα πραγματα δυσκολευουν.... :((

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

Google Maps V3 | 5ο, Custom InfoWindows

Δημοσίευση από tattooiv » 12 Φεβ 2012 01:47

meta apo tin politimi voithia toy fafo i apantisi sto provlima moy gia na kleinoyn ta infowindows einai i eksis: den zitaw swsta na anoigei to infowindow,
anti gia

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

if &#40;!infoBubble.isOpen&#40;&#41;&#41; &#123;
            infoBubble.open&#40;map, marker&#41;;
         &#125; else &#123;
            infoBubble.close&#40;map, marker&#41;;
         &#125; 
grafw

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

 if &#40;infowindow&#41;
            infowindow.close&#40;&#41;;
         infowindow = infoBubble;
         infowindow.open&#40;map, marker&#41;;

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

Google Maps V3 | 5ο, Custom InfoWindows

Δημοσίευση από anvc » 05 Μαρ 2012 15:23

Επειδη κι εγω χρησιμοποιω αρχειο xml που παιρνω τα δεδομενα απο εκει και μπερδευομαι, μηπως μπορεις να γραψεις καποιο κομματι κωδικα για να δω πως τα συνδιαζω με infobubble σ'αυτη την περιπτωση;

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

Google Maps V3 | 5ο, Custom InfoWindows

Δημοσίευση από fafos » 05 Μαρ 2012 16:11

http://istopoli.com/tuts/gmv3/infocss_c.html

se auto to paradeigma pairno ta eikonidia ton markers apo to xml, xrhsimopoio bounds gia na ta kentraro kai na ta zoumaro ston xarth..

ta dedomena einai apo auto to xml: http://istopoli.com/tuts/gmv3/markers.xml
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

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

Google Maps V3 | 5ο, Custom InfoWindows

Δημοσίευση από anvc » 05 Μαρ 2012 17:43

Σ'ευχαριστω πολυ!!!!!! :wink:

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

Google Maps V3 | 5ο, Custom InfoWindows

Δημοσίευση από anvc » 09 Μαρ 2012 08:56

Παιδια αυτο με το max και min height ή width στο infoBubble ισχυει;

Εμενα μου βγαζει παντα το max height ειτε ειναι λιγα τα περιεχομενα, ειτε ειναι περισσοτερα μεσα στο infoBubble. Μηπως θελει καμια ρυθμιση μεσα στο div;

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

Google Maps V3 | 5ο, Custom InfoWindows

Δημοσίευση από tattooiv » 10 Μαρ 2012 01:28

anvc έγραψε:Παιδια αυτο με το max και min height ή width στο infoBubble ισχυει;

Εμενα μου βγαζει παντα το max height ειτε ειναι λιγα τα περιεχομενα, ειτε ειναι περισσοτερα μεσα στο infoBubble. Μηπως θελει καμια ρυθμιση μεσα στο div;
twra pou to dokimasa gia na sou pw des ti egine... arxisa me poli mikra kai ta dyo height kai width, magalwna stadiaka mono to max height 10, 100, 500 kai megalwne, meta arxisa me to max width 10, 100, 500, kai paratirisa oti otan ta max oria poy tha valw ksepername to swsto orio toy infowindow ayto meta prosarmozete aytomata sto kalytero dynato megenthos, diladi meta apo kapoio simeio oso megalw valeis to max height kai width ayto den megalwnei!!!

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

Google Maps V3 | 5ο, Custom InfoWindows

Δημοσίευση από anvc » 14 Μαρ 2012 10:28

Τελεια! Εγινε και σ'εμενα! Ευχαριστω!! :)

Edit: Ακυρο, με firefox μου τα βγαζει παλι fixed. :(

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

Google Maps V3 | 5ο, Custom InfoWindows

Δημοσίευση από tattooiv » 16 Μαρ 2012 17:56

anvc έγραψε:Τελεια! Εγινε και σ'εμενα! Ευχαριστω!! :)

Edit: Ακυρο, με firefox μου τα βγαζει παλι fixed. :(
mipws prepei na kathariseis to istoriko apo to firefox??

kidpo21
Δημοσιεύσεις: 37
Εγγραφή: 09 Φεβ 2012 20:14
Τοποθεσία: thessaloniki
Επικοινωνία:

Google Maps V3 | 5ο, Custom InfoWindows

Δημοσίευση από kidpo21 » 20 Νοέμ 2013 17:44

Σε ολόκληρο το web ήταν το πιο αναλυτικό βοήθημα που βρήκα και μου έλυσε τα χέρια. Thank you fafos

Απάντηση

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

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

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