Google Maps - 1ο, Γενικά, Δημιουργία απλού χάρτη

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

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

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

Google Maps - 1ο, Γενικά, Δημιουργία απλού χάρτη

Δημοσίευση από fafos » 04 Ιουν 2009 19:30

"Η αρχή το ήμισυ του παντός"

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

Οι πιo γνωστοί χάρτες (Google Maps) έχουν μία ισχυρή μηχανή και τεράστια κοινότητα υποστήριξης.
Η Google δίνει την δυνατότητα στους κάτοχους ιστότοπων να τοποθετούν και να προσαρμόζουν τους χάρτες αυτούς στις σελίδες τους χρησιμοποιώντας ένα απλό "κλειδί-κωδικό", το γνωστό API...


API για την ιστοσελίδα μας:

Για να δουλέψει ένας χάρτης στις σελίδες μας θα πρέπει να έχουμε πάρει από την Google τον δικό μας "κλειδί-κωδικό".
Αυτός ο κωδικός είναι μοναδικός για κάθε ιστοσελίδα και μπορούμε να τον χρησιμοποιήσουμε σε όσες σελίδες θέλουμε.

Για κάθε ιστοσελίδα χρειάζεται και νέο API!

Πρέπει να έχετε λογαριασμό στην Google ( https://www.google.com/accounts/NewAccount )

Συνδεόμαστε στον λογαριασμό μας στην Google.

Για να πάρουμε το δικό μας κλειδί πάμε σε αυτήν την διεύθυνση: http://code.google.com/intl/el-GR/apis/maps/signup.html

Στο κάτω μέρος της σελίδας γράφουμε τον τίτλο της ιστοσελίδας μας και πατάμε το κουμπί "Generate API key".

Θα μεταφερθούμε σε μία νέα σελίδα όπου θα δούμε τον μοναδικό κωδικό, π.χ.:

Your key is:

ABQIAAAAJ_VOu2suojQjVQOf1awTKxQkuMkjlNsRm5IEWQuXPpOPQ7cHt7hQzbSO1kpyp8Xsl9r14Ux9Qy6UVTQ


Αυτόν τον κωδικό τον κρατάμε για να δημιουργήσουμε τον χάρτη μας..




Δημιουργία απλού χάρτη:


Αφού πήραμε τον κωδικό μας πάμε να φειάξουμε τον πρώτο μας χάρτη.

Οι χάρτες αποτελούνται κυρίως από 3 στοιχεία:

1. Την διαδρομή ενός javascript της Google
2. Έναν κώδικα javascript που τοποθετούμε στην σελίδα μας όπου δίνουμε τις διάφορες παραμέτρους του χάρτη μας
3. Ένα div όπου εκεί θα εμφανίζεται ο χάρτης μας.


Οι χάρτες χρησιμοποιούν κάποια events στο <body> για να τρέξουν οι χάρτες όταν ανοίγει η σελίδα μας (π.χ. <body onload="load()" onunload="GUnload()"> )

Μερικοί χάρτες δεν χρειάζονται αυτόν τον κώδικα γιατί είναι στο script που έχουμε και τις υπόλοιπες παραμέτρους (2).

Το 1 και το 2 τα τοποθετούμε πάντα στον header της html και το 3 εκεί που θέλουμε να εμφανίσουμε τον χάρτη.


1. Το javascript της Google:

Το Ελληνικό:

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

 <script charset="UTF-8" src="http&#58;//maps.google.com/maps?file=api&amp;v=2&hl=el&oe=utf-8&key=API_KEY" 

type="text/javascript"></script>

Το Διεθνές (Αγλικό):

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

 <script charset="UTF-8" src="http&#58;//maps.google.com/maps?file=api&amp;v=2&hl=en&oe=utf-8&key=API_KEY" 

type="text/javascript"></script>

Αλάζουμε το API_KEY με τον κωδικό που πήραμε από το Google


Η διαφορά σε αυτά τα δύο είναι πως εμφανίζουν τις πόλεις, τις οδούς και τις άλλες πληροφορίες στον χάρτη. Έτσι λοιπόν, ο πρώτος χάρτης θα μας τα δείχνει στα Ελληνικά τις Ελληνικές τοποθεσίες και στα Αγγλικά τις υπόλοιπες χώρες:

Demo: http://www.istopoli.com/cruise/maps/map1.html


O δεύτερος χάρτης μας δείχνει τις πόλεις, διευθύνσεις κλπ στην γλώσσα της κάθε χώρας και στα Αγγλικά. Αυτός ο χάρτης

προτείνεται για σελίδες σε άλλες γλώσσες εκτός των Ελληνικών:

Demo: http://www.istopoli.com/cruise/maps/map2.html


ΣΗΜΑΝΤΙΚΟ! οι χάρτες της Google χρειάζονται encoding UTF-8 για να δουλέψουν σωστά... σε άλλη περίπτωση θα αντιμετωπίσετε πολλά προβλήματα!!



2. Ο κώδικας με τις παραμέτρους του χάρτη:

Σε αυτό το κομμάτι κώδικα θα βάλουμε τις παραμέτρους του χάρτη μας..

Ο κάθε χάρτης μπορεί να "κεντραριστεί" δίνοντας τις συντεταγμένες ενός σημείου (Latitude και Longitude).

Ο απλός κώδικας είναι αυτός:

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

    <script type="text/javascript">

    function initialize&#40;&#41; &#123;
      if &#40;GBrowserIsCompatible&#40;&#41;&#41; &#123;
        var map = new GMap2&#40;document.getElementById&#40;"map_canvas"&#41;&#41;;
        map.setCenter&#40;new GLatLng&#40;37.97918, 23.71665&#41;, 13&#41;;

        map.setUIToDefault&#40;&#41;;
      &#125;
    &#125;

    </script>
Σε αυτό το παράδειγμα χρησιμοποιούμε τις συντεταγμένες της Αθήνας για να κεντράρουμε τον χάρτη:

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

        map.setCenter&#40;new GLatLng&#40;37.97918, 23.71665&#41;, 13&#41;;

Το νούμερο 13 είναι το μέγεθος zoom που θέλουμε να κάνει ο χάρτης μόλις εμφανίζεται (από 1 έως 17).

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

την διεύθυνση και θα παίρνεται τις συντεταγμένες εύκολα.


Μαρκάροντας ένα σημείο:

Αν θέλουμε να δείξουμε ένα σημείο στον χάρτη μας μπορούμε να χρησιμοποιήσουμε ένα εικονείδιο (marker):

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

    var point = new GLatLng&#40;37.97110, 23.72601&#41;;
    map.addOverlay&#40;new GMarker&#40;point&#41;&#41;;
οπότε ο κώδικας θα γίνει κάπως έτσι:

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

 <script type="text/javascript">

    function initialize&#40;&#41; &#123;
      if &#40;GBrowserIsCompatible&#40;&#41;&#41; &#123;
        var map = new GMap2&#40;document.getElementById&#40;"map_canvas"&#41;&#41;;
        map.setCenter&#40;new GLatLng&#40;37.97918, 23.71665&#41;, 13&#41;;
    var point = new GLatLng&#40;37.97110, 23.72601&#41;;
    map.addOverlay&#40;new GMarker&#40;point&#41;&#41;;

        map.setUIToDefault&#40;&#41;;
      &#125;
    &#125;

    </script>
Στο παράδειγμα κεντράρουμε τον χάρτη στην Αθήνα και μαρκάρουμε με ένα εικονείδιο την Ακρόπολη:

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

         map.setCenter&#40;new GLatLng&#40;37.97918, 23.71665&#41;, 13&#41;;// κεντράρισμα στην Αθήνα
    var point = new GLatLng&#40;37.97110, 23.72601&#41;;// μαρκάρισμα στην Ακρόπολη
Demo: http://www.istopoli.com/cruise/maps/map3.html


Μπορούμε να μαρκάρουμε ένα σημείο εμφανίζοντας ένα "σύνεφο διαλόγου" (balloon):

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

<script type="text/javascript">

    function initialize&#40;&#41; &#123;
      if &#40;GBrowserIsCompatible&#40;&#41;&#41; &#123;
        var map = new GMap2&#40;document.getElementById&#40;"map_canvas"&#41;&#41;;
        map.setCenter&#40;new GLatLng&#40;37.97110, 23.72601&#41;, 13&#41;;
	var html = "Parthenon, Address&#58; Acropolis Hill";

        map.openInfoWindow&#40;map.getCenter&#40;&#41;,

                           document.createTextNode&#40;html&#41;&#41;;
        map.setUIToDefault&#40;&#41;;
      &#125;
    &#125;

    </script>
Εδώ κεντράραμε τον χάρτη στην Ακρόπολη και ζητήσαμε να γράφει "Parthenon, Address: Acropolis Hill"

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

&#40;var html = "Parthenon, Address&#58; Acropolis Hill";&#41;

μετά του είπαμε να εκτυπώσει το αποτέλεσμα:

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

       map.openInfoWindow&#40;map.getCenter&#40;&#41;,

                           document.createTextNode&#40;html&#41;&#41;;
Demo: http://www.istopoli.com/cruise/maps/map4.html



Ενεργό εικονείδιο (marker):


Μπορούμε να μαρκάρουμε ένα σημείο με ένα εικονίδειο και κάνοντας κλικ επάνω του να μας εμφανίζει το balloon με τις

πληροφορίες που θέλουμε:

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

    <script type="text/javascript">

    function initialize&#40;&#41; &#123;
      if &#40;GBrowserIsCompatible&#40;&#41;&#41; &#123;
        var map = new GMap2&#40;document.getElementById&#40;"map_canvas"&#41;&#41;;
        map.setCenter&#40;new GLatLng&#40;37.97918, 23.71665&#41;, 13&#41;;
        

        var baseIcon = new GIcon&#40;G_DEFAULT_ICON&#41;;
        baseIcon.shadow = "http&#58;//www.google.com/mapfiles/shadow50.png";
        baseIcon.iconSize = new GSize&#40;20, 34&#41;;
        baseIcon.shadowSize = new GSize&#40;37, 34&#41;;
        baseIcon.iconAnchor = new GPoint&#40;9, 34&#41;;
        baseIcon.infoWindowAnchor = new GPoint&#40;9, 2&#41;;



       function createMarker&#40;point, index&#41; &#123;
            var redIcon = new GIcon&#40;baseIcon&#41;;
          redIcon.image = "http&#58;//www.google.com/mapfiles/marker.png";
          markerOptions = &#123; icon&#58;redIcon &#125;;
          var marker = new GMarker&#40;point, markerOptions&#41;;
          GEvent.addListener&#40;marker, "click", function&#40;&#41; &#123;
            marker.openInfoWindowHtml&#40;"Parthenon, Address&#58; Acropolis Hill"&#41;;
          &#125;&#41;;
          return marker;
        &#125;
  
         var latlng = new GLatLng&#40;37.97110, 23.72601&#41;;
          map.addOverlay&#40;createMarker&#40;latlng&#41;&#41;;
&#125;

    &#125;

    </script>


Demo: http://www.istopoli.com/cruise/maps/map5.html



Ας το αναλύσουμε...

Αυτός ο κώδικας μας δίνει την "σκιά" του marker και που θα εμφανιστεί:

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

        var baseIcon = new GIcon&#40;G_DEFAULT_ICON&#41;;
        baseIcon.shadow = "http&#58;//www.google.com/mapfiles/shadow50.png";
        baseIcon.iconSize = new GSize&#40;20, 34&#41;;
        baseIcon.shadowSize = new GSize&#40;37, 34&#41;;
        baseIcon.iconAnchor = new GPoint&#40;9, 34&#41;;
        baseIcon.infoWindowAnchor = new GPoint&#40;9, 2&#41;;


Αυτός ο κώδικας μας ορίζει τον marker και την ενέργεια που πρέπει να κάνει (με το κλικ να ανοίξει το balloon, κείμενο κλπ):

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

       function createMarker&#40;point, index&#41; &#123;
            var redIcon = new GIcon&#40;baseIcon&#41;;
          redIcon.image = "http&#58;//www.google.com/mapfiles/marker.png";
          markerOptions = &#123; icon&#58;redIcon &#125;;
          var marker = new GMarker&#40;point, markerOptions&#41;;
          GEvent.addListener&#40;marker, "click", function&#40;&#41; &#123;
            marker.openInfoWindowHtml&#40;"Parthenon, Address&#58; Acropolis Hill"&#41;;
          &#125;&#41;;
          return marker;
        &#125;
Αυτός ο κώδικας ορίζει σε ποιό σημείο του χάρτη θα εμφανιστεί ο marker:

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

         var latlng = new GLatLng&#40;37.97110, 23.72601&#41;;
          map.addOverlay&#40;createMarker&#40;latlng&#41;&#41;;



3. Εμφάνιση χάρτη:

Για να εμφανίσουμε τον χάρτη πρέπει για αρχή να βάλουμε τον κώδικα στο <body>:

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

  <body onload="initialize&#40;&#41;" onunload="GUnload&#40;&#41;">

Κατόπιν βάζουμε το div στο σημείο που θέλουμε να εμφανίσουμε τον κώδικα:

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

 <div id="map_canvas" style="width&#58; 500px; height&#58; 300px"></div>

όπως βλέπετε δίνουμε ένα id="map_canvas" το οποίο πρέπει να συμφωνεί με το id που έχουμε δώσει στον κώδικα:

var map = new GMap2(document.getElementById("map_canvas"));


Το style="width: 500px; height: 300px" δίνει τις διαστάσεις του χάρτη και μπορούμε να χρησιμοποιήσουμε απλή css..






Tips και εργαλεία:



Μπορούμε να χρησιμοποιήσουμε τα δικά μας εικονείδια.. τα εικονείδια πρέπει να είναι μορφής .png 32bit (transparent).

Υπάρχουν εργαλεία που μπορείτε να φειάξετε Online τα δικά σας εικονείδια:

Google MarkerIconOptions Wizard: http://gmaps-utility-library.googlecode ... izard.html

Δημιουργία "σκιάς" marker: http://www.cycloloco.com/shadowmaker/


Στα balloons μπορείτε να χρησιμοποιήσετε απλή html για να κάνετε ποιό "όμορφο" το αποτέλεσμα.. προσέξτε την σύνταξη έτσι

ώστε να μην συγκρουστούν τα quotes (" ')!!

Υπάρχουν και κάποια scripts που μπορούμε να φειάξουμε τα δικά μας balloons τα οποία θα σας αναλύσω σε άλλο βοήθημα..







Αυτά είναι τα βασικά για την δημιουργία ενός χάρτη στις σελίδες μας.. Για να δείτε τον κώδικα του κάθε χάρτη μπορείτε με δεξί κλικ στα demo μας να πάρετε τον κώδικα..

Επόμενο βοήθημα:

Πολλαπλά σημεία (markers) με xml, php και mysql.


Google Maps - 2ο, Δημιουργία χάρτη με πολλαπλά σημεία (xml)
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
Stadem
Δημοσιεύσεις: 198
Εγγραφή: 10 Μαρ 2007 20:45

Google Maps - 1ο, Γενικά, Δημιουργία απλού χάρτη

Δημοσίευση από Stadem » 04 Ιουν 2009 21:42

Πολύ καλό!!!
Συγχαρητήρια πιστεύω είναι το καλύτερο και πληρέστερο tutorial που υπάρχει στο freestuff.
web-IQ Interactive Quality
Εικόνα

Jacob Z
Δημοσιεύσεις: 49
Εγγραφή: 07 Δεκ 2008 15:16
Τοποθεσία: Θεσσαλονίκη
Επικοινωνία:

Google Maps - 1ο, Γενικά, Δημιουργία απλού χάρτη

Δημοσίευση από Jacob Z » 04 Ιουν 2009 22:21

Όντως πολύ καλός οδηγός.Ευχαριστούμε!
ACTIONS SPEAK LOUDER THAN WORDS !

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

Google Maps - 1ο, Γενικά, Δημιουργία απλού χάρτη

Δημοσίευση από fafos » 05 Ιουν 2009 00:33

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

Άβαταρ μέλους
MrTrAnE
Δημοσιεύσεις: 220
Εγγραφή: 23 Ιαν 2009 17:38

Google Maps - 1ο, Γενικά, Δημιουργία απλού χάρτη

Δημοσίευση από MrTrAnE » 05 Ιουν 2009 00:37

Γειά σου ρε fafo :)
Tην κατάλληλη στιγμή το βάλες.

Άβαταρ μέλους
papatzas
Δημοσιεύσεις: 227
Εγγραφή: 03 Δεκ 2005 14:23

Google Maps - 1ο, Γενικά, Δημιουργία απλού χάρτη

Δημοσίευση από papatzas » 05 Ιουν 2009 01:34

+ 1
:-)

johnGT
Δημοσιεύσεις: 107
Εγγραφή: 16 Μάιος 2007 12:41
Επικοινωνία:

Google Maps - 1ο, Γενικά, Δημιουργία απλού χάρτη

Δημοσίευση από johnGT » 09 Ιουν 2009 10:44

καταρχην σε ευχαριστουμε που μοιράζεσαι μαζί μας τις γνώσεις σου. Να ρωτήσω κατι : εδώ http://maps.google.com/ δεν φτιάχνω χάρτες? Εχουν κάποιο μοιονέκτημα σε σχέση με αυτό που προτείνεις? Ευχαριστώ

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

Google Maps - 1ο, Γενικά, Δημιουργία απλού χάρτη

Δημοσίευση από fafos » 09 Ιουν 2009 14:22

johnGT έγραψε:καταρχην σε ευχαριστουμε που μοιράζεσαι μαζί μας τις γνώσεις σου. Να ρωτήσω κατι : εδώ http://maps.google.com/ δεν φτιάχνω χάρτες? Εχουν κάποιο μοιονέκτημα σε σχέση με αυτό που προτείνεις? Ευχαριστώ
auto pou dinei o google einai ena aplo iframe... kammia sxesh me tis dynatothtes pou dinei to API...
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

johnGT
Δημοσιεύσεις: 107
Εγγραφή: 16 Μάιος 2007 12:41
Επικοινωνία:

Google Maps - 1ο, Γενικά, Δημιουργία απλού χάρτη

Δημοσίευση από johnGT » 09 Ιουν 2009 14:34

δεν υπάρχει καποιο εργαλειο που να δουλευει με API και να κάνει αυτόματα την δουλειά, για να μην μπλέκουμε με xml?

Άβαταρ μέλους
Stadem
Δημοσιεύσεις: 198
Εγγραφή: 10 Μαρ 2007 20:45

Google Maps - 1ο, Γενικά, Δημιουργία απλού χάρτη

Δημοσίευση από Stadem » 09 Ιουν 2009 16:24

johnGT έγραψε:δεν υπάρχει καποιο εργαλειο που να δουλευει με API και να κάνει αυτόματα την δουλειά, για να μην μπλέκουμε με xml?
Πιστεύω ότι υπάρχουν ξεχωριστές ανάγκες που δεν θα μπορούσαν να υπάρχουν σε ένα εργαλείο μόνο. Το API βοηθάει στην κάλυψη όλων των ιδιαίτερων αναγκών.
web-IQ Interactive Quality
Εικόνα

Άβαταρ μέλους
dimsis
Reporter
Δημοσιεύσεις: 7994
Εγγραφή: 25 Ιούλ 2001 03:00

Google Maps - 1ο, Γενικά, Δημιουργία απλού χάρτη

Δημοσίευση από dimsis » 09 Ιουν 2009 19:12

johnGT έγραψε:δεν υπάρχει καποιο εργαλειο που να δουλευει με API και να κάνει αυτόματα την δουλειά, για να μην μπλέκουμε με xml?
Αν δεν θέλεις να χρησιμοποιήσιες το API, φτιάξε Personalized maps:
http://maps.google.com/help/maps/mymaps/create.html
ή χρησιμοποίησε κανένα άλλο εργαλείο τύπου : http://www.mymapsplus.com/ ή http://www.mapmypage.com/ ή και άλλα που μπορεί να βρεις εδώ: http://googlemapsmania.blogspot.com/ ή ασφαλώς και τον mashup editor της google που έχει έτοιμα map samples: http://www.googlemashups.com/

Υπάρχει και έξτρα βοήθεια εδώ πάντως για όσους θέλουν να πειραματιστούν: http://maps.google.com/help/maps/userguide/

Άβαταρ μέλους
joia
Δημοσιεύσεις: 108
Εγγραφή: 15 Σεπ 2005 23:22
Επικοινωνία:

Google Maps - 1ο, Γενικά, Δημιουργία απλού χάρτη

Δημοσίευση από joia » 17 Σεπ 2009 17:06

Αν και δημιουργώ προσαρμοσμένους χάρτες σε συνδυασμό με api , βρήκα το tutorial εξαιρετικό.

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

Google Maps - 1ο, Γενικά, Δημιουργία απλού χάρτη

Δημοσίευση από manolism » 23 Σεπ 2009 14:52

Μπορούμε σε μία σελίδα να έχουμε πολλούς διαφορετικούς χάρτες;

Στο συννεφάκι πως μπορούμε να αλλάξουμε γραμμή;

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

Google Maps - 1ο, Γενικά, Δημιουργία απλού χάρτη

Δημοσίευση από fafos » 23 Σεπ 2009 16:26

lunarmedia έγραψε:Μπορούμε σε μία σελίδα να έχουμε πολλούς διαφορετικούς χάρτες;

Στο συννεφάκι πως μπορούμε να αλλάξουμε γραμμή;
Nai.. aplos ta diplasiazeis ola me diaforetika ids kai vars:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-7">
<meta http-equiv="Content-Style-Type" content="text/css">
    <title>Google Maps JavaScript API Example</title>
    <script charset="UTF-8" src="http&#58;//maps.google.com/maps?file=api&amp;v=2&hl=el&oe=utf-8&key=ABQIAAAAJ_VOu2suojQjVQOf1awTKxSrgP1H14j86luPB6hadaGnNCvvShSjmHMVyawNoJHIrxp0lT4j2ejk8A" type="text/javascript"></script>
    <script type="text/javascript">

    function initialize&#40;&#41; &#123;
      if &#40;GBrowserIsCompatible&#40;&#41;&#41; &#123;
        var map = new GMap2&#40;document.getElementById&#40;"map_canvas"&#41;&#41;;
        map.setCenter&#40;new GLatLng&#40;37.97918, 23.71665&#41;, 13&#41;;
        map.setUIToDefault&#40;&#41;;

        var map_b = new GMap2&#40;document.getElementById&#40;"map_canvas_b"&#41;&#41;;
        map_b.setCenter&#40;new GLatLng&#40;31.97918, 23.71665&#41;, 13&#41;;
        map_b.setUIToDefault&#40;&#41;;

		var baseIcon = new GIcon&#40;G_DEFAULT_ICON&#41;;
        baseIcon.shadow = "http&#58;//www.google.com/mapfiles/shadow50.png";
        baseIcon.iconSize = new GSize&#40;20, 34&#41;;
        baseIcon.shadowSize = new GSize&#40;37, 34&#41;;
        baseIcon.iconAnchor = new GPoint&#40;9, 34&#41;;
        baseIcon.infoWindowAnchor = new GPoint&#40;9, 2&#41;;



       function createMarker&#40;point, index&#41; &#123;
  

          var redIcon = new GIcon&#40;baseIcon&#41;;
          redIcon.image = "http&#58;//www.google.com/mapfiles/marker.png";


          markerOptions = &#123; icon&#58;redIcon &#125;;
          var marker = new GMarker&#40;point, markerOptions&#41;;

          GEvent.addListener&#40;marker, "click", function&#40;&#41; &#123;
            marker.openInfoWindowHtml&#40;"Parthenon, Address&#58; Acropolis Hill"&#41;;
          &#125;&#41;;
          return marker;
        &#125;

       function createMarker_b&#40;point, index&#41; &#123;
  

          var redIcon = new GIcon&#40;baseIcon&#41;;
          redIcon.image = "http&#58;//www.google.com/mapfiles/marker.png";


          markerOptions = &#123; icon&#58;redIcon &#125;;
          var marker_b = new GMarker&#40;point, markerOptions&#41;;

          GEvent.addListener&#40;marker_b, "click", function&#40;&#41; &#123;
            marker_b.openInfoWindowHtml&#40;"Oikopedo<br> Address&#58; sto pouthena"&#41;;
          &#125;&#41;;
          return marker_b;
        &#125;
    


         var latlng = new GLatLng&#40;37.97110, 23.72601&#41;;
          map.addOverlay&#40;createMarker&#40;latlng&#41;&#41;;
         var latlng_b = new GLatLng&#40;31.97110, 23.72601&#41;;
          map_b.addOverlay&#40;createMarker_b&#40;latlng_b&#41;&#41;;
&#125;




    &#125;

    </script>
  </head>

  <body onload="initialize&#40;&#41;" onunload="GUnload&#40;&#41;">
    <div id="map_canvas" style="width&#58; 500px; height&#58; 300px"></div>
    <div id="map_canvas_b" style="width&#58; 500px; height&#58; 300px"></div>
  </body>
</html>


allagh grammhs me to <br>... to ballon dexetai html elements arkei na prosexeis ta quotes mhpos "xtyphsoum"...
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

Google Maps - 1ο, Γενικά, Δημιουργία απλού χάρτη

Δημοσίευση από manolism » 23 Σεπ 2009 17:09

Thanks! :D

Λειτούργησε με τους πολλούς χάρτες αλλά το br δεν έκανε τίποτα.

Απάντηση

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

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

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