Google Maps V3 | 3ο, Multiple Markers

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

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

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

Google Maps V3 | 3ο, Multiple Markers

Δημοσίευση από fafos » 31 Αύγ 2011 02:54

Αφού είδαμε τα γενικά στην δημιουργία ενός χάρτη και μάθαμε να τοποθετούμε markes & infowindows ας δημιουργήσουμε έναν χάρτη με πολλαπλά markers.

Οι τρόποι για να εισάγουμε πολλά markers σε ένα χάρτη είναι οι εξής:

1. Με κώδικα "χύμα" μέσα στο script (δεν προτείνεται και δεν πρόκειται να το αναλύσω γιατί απλά είναι "γυφτοδουλειά" που λένε και στο χωριό μου!)

2. Με arrays-json (δημοφιλής τρόπος και από τους πιο εύκολους)

3. Με XML αρχείο (και αυτός δημοφιλής τρόπος -ιδιαίτερα στην V2- και εύκολος ιδιαίτερα αν τραβάμε δεδομένα από βάση όπως η mysql)

4. Με KML αρχείο (μοιάζει με την XML αλλά δίνει και κάποιες άλλες δυνατότητες στους χάρτες. Δεν θα το αναλύσω εδώ γιατί είναι πολύ το υλικό.. όποιος θέλει να μάθει για αυτόν τον τύπο αρχείου και πως δουλεύει στους χάρτες μπορεί να διαβάσει περισσότερα εδώ.)

Όπως θα καταλάβατε, εδώ θα αναλύσω τα arrays-json και XML. Θα ήθελα πολύ να αναλύσω και τα KML αλλά θα το καθυστερήσουμε πολύ και θα μπούμε σε βαθιά νερά χωρίς λόγο. Ίσως στο μέλλον να φτιάξω κάποιο ξεχωριστό βοήθημα.
Ας δούμε τους τρόπους δημιουργίας χάρτη με πολλαπλά markers...


Arrays - Json

Υποθέτουμε ότι έχουμε αυτήν την array:

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

    var locations = [
      ['Αθήνα', 37.994636052022386, 23.751648349999982, 'images/agritourism.png'],
      ['Θεσσαλονίκη', 40.607734670341706, 22.94461684999999, 'images/amphitheater-2.png'],
      ['Ηράκλειο', 35.29033252993668, 25.05755494999994, 'images/historicalquarter.png'],
      ['Πάτρα', 37.9748027505484, 21.663764950000086, 'images/information.png'],
      ['Λάρισα', 39.58834867633802, 22.36551535000001, 'images/headstone-2.png'],
      ['Ρόδος', 36.32856202529708, 27.881650750000063, 'images/lifeguard-2.png']
    ]
Κάθε μέρος της array έχει τα στοιχεία: κείμενο (εδώ το όνομα κάποιας πόλης), τις συντεταγμένες και κάποιο path σε εικόνες. Αυτά είναι για το παράδειγμα, οι δικές σας arrays μπορούν να έχουν περισσότερα ή λιγότερα στοιχεία.

Βάζουμε τα κλασσικά για την δημιουργία του χάρτη:

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

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: new google.maps.LatLng(39.074207998803764, 21.824311999999964),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();
κατόπιν δημιουργούμε ένα for για να αναλύσουμε την array και να πάρουμε τα στοιχεία της:

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

    var marker, i;

    for &#40;i = 0; i < locations.length; i++&#41; &#123;  
      marker = new google.maps.Marker&#40;&#123;
        position&#58; new google.maps.LatLng&#40;locations&#91;i&#93;&#91;1&#93;, locations&#91;i&#93;&#91;2&#93;&#41;,
        map&#58; map
      &#125;&#41;;

      google.maps.event.addListener&#40;marker, 'click', &#40;function&#40;marker, i&#41; &#123;
        return function&#40;&#41; &#123;
          infowindow.setContent&#40;locations&#91;i&#93;&#91;0&#93;&#41;;
          infowindow.open&#40;map, marker&#41;;
        &#125;
      &#125;&#41;&#40;marker, i&#41;&#41;;
    &#125;
Σε αυτό το for του λέμε να πάρει τις συντεταγμένες κάθε μέρους της array και να δημιουργήσει από έναν marker... κατόπιν της λέμε να πάρει τον τίτλο κάθε πόλης και να τον τοποθετήσει μέσα σε infowindow το οποίο θα δείξει με το κλικ επάνω στον marker... Αυτό ήταν!! ο χάρτης είναι έτοιμος! εδώ ο κώδικας:

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

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http&#58;//maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width&#58; 700px; height&#58; 700px;"></div>

  <script type="text/javascript">
    var locations = &#91;
      &#91;'Αθήνα', 37.994636052022386, 23.751648349999982, 'images/agritourism.png'&#93;,
      &#91;'Θεσσαλονίκη', 40.607734670341706, 22.94461684999999, 'images/amphitheater-2.png'&#93;,
      &#91;'Ηράκλειο', 35.29033252993668, 25.05755494999994, 'images/historicalquarter.png'&#93;,
      &#91;'Πάτρα', 37.9748027505484, 21.663764950000086, 'images/information.png'&#93;,
      &#91;'Λάρισα', 39.58834867633802, 22.36551535000001, 'images/headstone-2.png'&#93;,
      &#91;'Ρόδος', 36.32856202529708, 27.881650750000063, 'images/lifeguard-2.png'&#93;
    &#93;

    var map = new google.maps.Map&#40;document.getElementById&#40;'map'&#41;, &#123;
      zoom&#58; 6,
      center&#58; new google.maps.LatLng&#40;39.074207998803764, 21.824311999999964&#41;,
      mapTypeId&#58; google.maps.MapTypeId.ROADMAP
    &#125;&#41;;

    var infowindow = new google.maps.InfoWindow&#40;&#41;;

    var marker, i;

    for &#40;i = 0; i < locations.length; i++&#41; &#123;  
      marker = new google.maps.Marker&#40;&#123;
        position&#58; new google.maps.LatLng&#40;locations&#91;i&#93;&#91;1&#93;, locations&#91;i&#93;&#91;2&#93;&#41;,
        map&#58; map
      &#125;&#41;;

      google.maps.event.addListener&#40;marker, 'click', &#40;function&#40;marker, i&#41; &#123;
        return function&#40;&#41; &#123;
          infowindow.setContent&#40;locations&#91;i&#93;&#91;0&#93;&#41;;
          infowindow.open&#40;map, marker&#41;;
        &#125;
      &#125;&#41;&#40;marker, i&#41;&#41;;
    &#125;
  </script>
</body>
</html>
και εδώ ένα παράδειγμα: http://istopoli.com/tuts/gmv3/multimarkers.html

Αν θέλουμε να βάλουμε διαφορετικούς markers για κάθε πόλη πρέπει να εκμεταλευτούμε το μέρος της array με το path προς τις εικόνες. Μέσα στην for δημιουργούμε έναν marker με την εικόνα που αντιστοιχεί στην κάθε πόλη:

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

  var markerIcon = new google.maps.MarkerImage&#40;
    locations&#91;i&#93;&#91;3&#93;,
    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;;  
το locations[3] είναι το path της εικόνας.. βάζουμε και μία σκιά για να το ομορφύνουμε:

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

 var markerShadow = new google.maps.MarkerImage&#40;
    "images/shadow-beauty.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;;
και τέλος καλούμε τα παραπάνω στις επιλογές (options) του marker:

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

      marker = new google.maps.Marker&#40;&#123;
        position&#58; myLatLng,
        map&#58; map,
		icon&#58;markerIcon,
		shadow&#58;markerShadow
      &#125;&#41;;
Ο τελικός κώδικας:

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

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http&#58;//maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width&#58; 700px; height&#58; 700px;"></div>

  <script type="text/javascript">
    var locations = &#91;
      &#91;'Αθήνα', 37.994636052022386, 23.751648349999982, 'images/agritourism.png'&#93;,
      &#91;'Θεσσαλονίκη', 40.607734670341706, 22.94461684999999, 'images/amphitheater-2.png'&#93;,
      &#91;'Ηράκλειο', 35.29033252993668, 25.05755494999994, 'images/historicalquarter.png'&#93;,
      &#91;'Πάτρα', 37.9748027505484, 21.663764950000086, 'images/information.png'&#93;,
      &#91;'Λάρισα', 39.58834867633802, 22.36551535000001, 'images/headstone-2.png'&#93;,
      &#91;'Ρόδος', 36.32856202529708, 27.881650750000063, 'images/lifeguard-2.png'&#93;
    &#93;;
	 
    var map = new google.maps.Map&#40;document.getElementById&#40;'map'&#41;, &#123;
      zoom&#58; 6,
      center&#58; new google.maps.LatLng&#40;39.074207998803764, 21.824311999999964&#41;,
      mapTypeId&#58; google.maps.MapTypeId.ROADMAP
    &#125;&#41;;

    var infowindow = new google.maps.InfoWindow&#40;&#41;;

    var marker, i;

    for &#40;i = 0; i < locations.length; i++&#41; &#123;
var myLatLng = 	new google.maps.LatLng&#40;locations&#91;i&#93;&#91;1&#93;, locations&#91;i&#93;&#91;2&#93;&#41;;
  var markerIcon = new google.maps.MarkerImage&#40;
    locations&#91;i&#93;&#91;3&#93;,
    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-beauty.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;;

      marker = new google.maps.Marker&#40;&#123;
        position&#58; myLatLng,
        map&#58; map,
		icon&#58;markerIcon,
		shadow&#58;markerShadow
      &#125;&#41;;

      google.maps.event.addListener&#40;marker, 'click', &#40;function&#40;marker, i&#41; &#123;
        return function&#40;&#41; &#123;
          infowindow.setContent&#40;locations&#91;i&#93;&#91;0&#93;&#41;;
          infowindow.open&#40;map, marker&#41;;
        &#125;
      &#125;&#41;&#40;marker, i&#41;&#41;;

    &#125;
  </script>
</body>
</html>
και το παράδειγμα: http://istopoli.com/tuts/gmv3/multimarkersicons.html

Στο προηγούμενο βοήθημα ανέφερα ότι μπορούμε με το geocoding να πάρουμε τις συντεταγμένες με απλή διεύθυνση. Με αυτόν τον τρόπο μπορούμε να δημιουργήσουμε χάρτη με πολλαπλά markers χωρίς να χρειάζεται να βρίσκουμε τις συντεταγμένες για κάθε πόλη-διεύθυνση!
Ιδού ο κώδικας:

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

    <script type="text/javascript">
var temp =  &#91;'Αθήνα', 'Θεσσαλονίκη', 'Ηράκλειο', 'Πάτρα', 'Λάρισα'&#93;;
var myLatlng = new google.maps.LatLng&#40;37.994636052022386, 23.751648349999982&#41;; 
  var myOptions = &#123;
    zoom&#58; 6,
    center&#58; myLatlng,
    mapTypeId&#58; google.maps.MapTypeId.ROADMAP,
  &#125;
  map = new google.maps.Map&#40;document.getElementById&#40;"map"&#41;, myOptions&#41;;

var geocoder = new google.maps.Geocoder&#40;&#41;;

function createMarkers&#40;&#41; &#123;
 var infowindow = new google.maps.InfoWindow&#40;&#41;;
    for &#40;var i = 0; i < temp.length; ++i&#41; &#123;
        &#40;function&#40;address&#41; &#123;
            geocoder.geocode&#40;&#123;
                'address'&#58; address
            &#125;, function&#40;results&#41; &#123;
                var marker = new google.maps.Marker&#40;&#123;
                    map&#58; map,
                    position&#58; results&#91;0&#93;.geometry.location,
                    title&#58; address
                &#125;&#41;;

                google.maps.event.addListener&#40;marker, 'click', function&#40;&#41; &#123;
      
          infowindow.setContent&#40;address&#41;;
          infowindow.open&#40;map, marker&#41;;
     &#125;&#41;;
            &#125;&#41;;
        &#125;&#41;&#40;temp&#91;i&#93;&#41;;
    &#125;
&#125;

window.onload = createMarkers;
  </script>
και το παράδειγμα: http://istopoli.com/tuts/gmv3/multimarkersgeo.html

όπως βλέπετε εδώ η array είναι πολύ πιο απλή έχοντας μόνο τις πόλεις-διευθύνσεις. Μπορείτε να την κάνετε πιο περίπλοκη αν έχετε γνώσεις javascript & arrays.

Στα παραπάνω παραδείγματα έχουμε ορίσει εμείς που θα κεντράρει ο χάρτης και τι ζουμ θα έχει. Υπάρχει όμως ένα θέμα αν προστεθούν και άλλα markers και ιδιαίτερα αν είναι το ένα πολύ μακρυά από το άλλο. Δεν φαίνονται όλοι οι markers με το που ανοίγει ο χάρτης και ο χρήστης πρέπει να αλλάζει το ζουμ χειροκίνητα για να τους βρει!
Σε αυτό υπάρχει η λύση των Bounds
Με τα Bounds "αναγκάζουμε" τον χάρτη να προσαρμόσει το ζουμ ανάλογα με τα markers και τις διαστάσεις που έχουμε δώσει στον χάρτη έτσι ώστε ο χρήστης να μπορεί να βλέπει όλους τους markers.. Δείτε εδώ ένα παράδειγμα: http://istopoli.com/tuts/gmv3/multimarkersbounds.html

σε αυτό το παράδειγμα ο χάρτης είναι όμοιος με το πρώτο παράδειγμα που έδειξα αλλά με την διαφορά ότι έχει "συμμαζέψει" τους markers. Αλλά ας δούμε πως το έκανα:

Για αρχή βάζω αυτό πριν το for:

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

var bounds = new google.maps.LatLngBounds&#40;&#41;;
για να του πω ότι αυτός ο χάρτης θα χρησιμοποιήσει bounds.

μετά πάω στο τέλος του for (ακριβώς πριν το κλείσω) και βάζω αυτά:

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

	bounds.extend&#40;myLatLng&#41;;
    map.fitBounds&#40;bounds&#41;;
εδώ του λέω να πάρει τις συντεταγμένες κάθε marker και να τις κάνει κάτι σαν ομάδα.

ο κώδικας:

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

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http&#58;//maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width&#58; 700px; height&#58; 700px;"></div>

  <script type="text/javascript">
    var locations = &#91;
      &#91;'Αθήνα', 37.994636052022386, 23.751648349999982, 4&#93;,
      &#91;'Θεσσαλονίκη', 40.607734670341706, 22.94461684999999, 5&#93;,
      &#91;'Ηράκλειο', 35.29033252993668, 25.05755494999994, 3&#93;,
      &#91;'Πάτρα', 37.9748027505484, 21.663764950000086, 2&#93;,
      &#91;'Λάρισα', 39.58834867633802, 22.36551535000001, 1&#93;,
      &#91;'Ρόδος', 36.32856202529708, 27.881650750000063, 6&#93;
    &#93;;
	 
    var map = new google.maps.Map&#40;document.getElementById&#40;'map'&#41;, &#123;
      zoom&#58; 6,
      center&#58; new google.maps.LatLng&#40;39.074207998803764, 21.824311999999964&#41;,
      mapTypeId&#58; google.maps.MapTypeId.ROADMAP
    &#125;&#41;;

    var infowindow = new google.maps.InfoWindow&#40;&#41;;

    var marker, i;
var bounds = new google.maps.LatLngBounds&#40;&#41;;
    for &#40;i = 0; i < locations.length; i++&#41; &#123;
var myLatLng = 	new google.maps.LatLng&#40;locations&#91;i&#93;&#91;1&#93;, locations&#91;i&#93;&#91;2&#93;&#41;;
      marker = new google.maps.Marker&#40;&#123;
        position&#58; myLatLng,
        map&#58; map
      &#125;&#41;;

      google.maps.event.addListener&#40;marker, 'click', &#40;function&#40;marker, i&#41; &#123;
        return function&#40;&#41; &#123;
          infowindow.setContent&#40;locations&#91;i&#93;&#91;0&#93;&#41;;
          infowindow.open&#40;map, marker&#41;;
        &#125;
      &#125;&#41;&#40;marker, i&#41;&#41;;
	bounds.extend&#40;myLatLng&#41;;
    map.fitBounds&#40;bounds&#41;;
    &#125;
  </script>
</body>
</html>

Τα παραπάνω μπορούμε να τα εφαρμόσουμε και σε δεδομένα που παίρνουμε από αρχεία XML τα οποία θα αναλύσω παρακάτω....
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

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

Google Maps V3 | 3ο, Multiple Markers

Δημοσίευση από fafos » 31 Αύγ 2011 03:59

XML Αρχείο

Ένα XML αρχείο μπορεί να έχει μία μορφή όπως αυτό:

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

<markers>

<marker name="Acropolis" label="1" desc="Acropolis Description" lat="37.97167" lng="23.72581" type="ancient" address="Acropolis Hill" icon="images/historicalquarter.png"/>

<marker name="Stiles Olympiou Dios" label="2" desc="Stiles Olympiou Dios Description" lat="37.96931" lng="23.73485" type="ancient" address="Stiles Olympiou Dios" icon="images/headstone-2.png"/>

<marker name="Kerameikos" label="3" desc="Kerameikos Description" lat="37.97844" lng="23.71794" type="ancient" address="Stiles Olympiou Dios" icon="images/amphitheater-2.png"/>

</markers>
τα πεδία είναι απλώς για το παράδειγμα, εσείς μπορείτε να βάλετε ότι θέλετε αρκεί να θυμάστε ότι δεν του αρέσουν οι ειδικοί χαρακτήρες στα κείμενα και το xml μπορεί να μην λειτουργεί σωστά.

Το παραπάνω αρχείο το ονόμασα markers.xml για το παράδειγμα.
Για να "τραβήξουμε" τα δεδομένα του αρχείου πρέπει να χρησιμοποιήσουμε ένα javascript αρχείο που μας δίνει η google και το ονομάζει util.js
Το αρχείο μπορείτε να το κατεβάσετε εδώ: http://istopoli.com/tuts/gmv3/js/util.js

καλούμε αυτό το αρχείο κάτω από το script με τις βιβλιοθήκες της google:

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

<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>
αφού δώσουμε τα βασικά στοιχεία του χάρτη, ζητάμε από το util.js να αναλύσει το xml αρχείο:

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

 downloadUrl&#40;"markers.xml", function&#40;data&#41; &#123; ... &#125;
μέσα σε αυτήν την function παίρνουμε ένα προς έναν τους markers:

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

      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&#41;;
       &#125;
με άλλη μία function από κάτω τοποθετούμε τους markers μέσα στον χάρτη:

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

  function createMarker&#40;name, latlng&#41; &#123;
    var marker = new google.maps.Marker&#40;&#123;position&#58; latlng, map&#58; map&#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;
Ολοκληρωμένοι κώδικες:

Απλός χάρτης: (demo: http://istopoli.com/tuts/gmv3/multimarkersxml.html)

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

<!DOCTYPE html>
<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>Google Maps JavaScript API v3 Example&#58; Common Loader</title>
<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">
  var infowindow;
  var map;

  function initialize&#40;&#41; &#123;
    var myLatlng = new google.maps.LatLng&#40;37.97219071239462, 23.72617360000004&#41;;
    var myOptions = &#123;
      zoom&#58; 13,
      center&#58; myLatlng,
      mapTypeId&#58; google.maps.MapTypeId.ROADMAP
    &#125;
    map = new google.maps.Map&#40;document.getElementById&#40;"map_canvas"&#41;, myOptions&#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&#41;;
       &#125;
     &#125;&#41;;
  &#125;

  function createMarker&#40;name, latlng&#41; &#123;
    var marker = new google.maps.Marker&#40;&#123;position&#58; latlng, map&#58; map&#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;

</script>
</head>
<body onload="initialize&#40;&#41;">
  <div id="map_canvas" style="width&#58;600px; height&#58;500px"></div>
</body>

</html>

Με διαφορετικά εικονίδια: (demo: http://istopoli.com/tuts/gmv3/multimarkersxmlicons.html )

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

<!DOCTYPE html>
<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>Google Maps JavaScript API v3 Example&#58; Common Loader</title>
<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">
  var infowindow;
  var map;
 var markerShadow = new google.maps.MarkerImage&#40;
    "images/shadow-beauty.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 myLatlng = new google.maps.LatLng&#40;37.97219071239462, 23.72617360000004&#41;;
    var myOptions = &#123;
      zoom&#58; 13,
      center&#58; myLatlng,
      mapTypeId&#58; google.maps.MapTypeId.ROADMAP
    &#125;
    map = new google.maps.Map&#40;document.getElementById&#40;"map_canvas"&#41;, myOptions&#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&#41;;
       &#125;
     &#125;&#41;;
  &#125;

  function createMarker&#40;name, latlng, icon, markerShadow&#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
	&#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;

</script>
</head>
<body onload="initialize&#40;&#41;">
  <div id="map_canvas" style="width&#58;600px; height&#58;500px"></div>
</body>

</html>

Με bounds: (demo: http://istopoli.com/tuts/gmv3/multimark ... ounds.html)

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

<!DOCTYPE html>
<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>Google Maps JavaScript API v3 Example&#58; Common Loader</title>
<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">
  var infowindow;
  var map;
 var bounds = new google.maps.LatLngBounds&#40;&#41;;
  function initialize&#40;&#41; &#123;
    var myLatlng = new google.maps.LatLng&#40;37.97219071239462, 23.72617360000004&#41;;
    var myOptions = &#123;
      zoom&#58; 13,
      center&#58; myLatlng,
      mapTypeId&#58; google.maps.MapTypeId.ROADMAP
    &#125;
    map = new google.maps.Map&#40;document.getElementById&#40;"map_canvas"&#41;, myOptions&#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&#41;;
       &#125;
	
    map.fitBounds&#40;bounds&#41;;   
     &#125;&#41;;
  &#125;

  function createMarker&#40;name, latlng&#41; &#123;
    var marker = new google.maps.Marker&#40;&#123;position&#58; latlng, map&#58; map&#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;;
	bounds.extend&#40;latlng&#41;;
    return marker;
  &#125;

</script>
</head>
<body onload="initialize&#40;&#41;">
  <div id="map_canvas" style="width&#58;600px; height&#58;500px"></div>
</body>

</html>

Θα παρατηρήσετε αρκετές διαφορές σε σχέση με τις arrays... απλά μελετήστε τα παραδείγματα...

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


Στο επόμενο βοήθημα θα σας δείξω πως μπορούμε να δείχνουμε μεγάλο αριθμό markers στον χάρτη μας χωρίς να καθυστερεί ο browser να τον εμφανίσει
Τελευταία επεξεργασία από το μέλος fafos την 02 Σεπ 2011 00:18, έχει επεξεργασθεί 1 φορά συνολικά.
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Google Maps V3 | 3ο, Multiple Markers

Δημοσίευση από Basilakis » 31 Αύγ 2011 05:09

Βοήθημα!

Ευχαριστούμε fafos! :_)

Άβαταρ μέλους
p_pan
Δημοσιεύσεις: 1248
Εγγραφή: 11 Φεβ 2007 20:45
Τοποθεσία: Άστεγος!

Google Maps V3 | 3ο, Multiple Markers

Δημοσίευση από p_pan » 24 Οκτ 2011 13:20

Να ρωτησω κατι... στο XML Αρχείο πως μπορουμε να βαλουμε μεσα στο infowindow και τις αλλες πληροφοριες οπως label και λοιπα...;


ευχαριστω
Αγράματος...

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

Google Maps V3 | 3ο, Multiple Markers

Δημοσίευση από fafos » 24 Οκτ 2011 17:27

p_pan έγραψε:Να ρωτησω κατι... στο XML Αρχείο πως μπορουμε να βαλουμε μεσα στο infowindow και τις αλλες πληροφοριες οπως label και λοιπα...;


ευχαριστω
kaneis parse ena ena ta elements tou xml kai ta omadopoieis se ena var:

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

var infowindowContent = '<div><h4>'+markers&#91;i&#93;.getAttribute&#40;"name"&#41;+'</h4></div><div>'+markers&#91;i&#93;.getAttribute&#40;"desc"&#41;+'</div><div>Label&#58; '+markers&#91;i&#93;.getAttribute&#40;"label"&#41;+', Type&#58; '+markers&#91;i&#93;.getAttribute&#40;"type"&#41;+', Address&#58; '+markers&#91;i&#93;.getAttribute&#40;"address"&#41;+'</div>';
meta vazeis auto to var ston marker:

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

var marker = createMarker&#40;infowindowContent, latlng, markers&#91;i&#93;.getAttribute&#40;"icon"&#41;, markerShadow&#41;;
ego evala ta panta apo to xml mesa.. esy mporeis na epilexeis opoia thes na valeis..

demo edo: http://istopoli.com/tuts/gmv3/multimark ... cons2.html
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
p_pan
Δημοσιεύσεις: 1248
Εγγραφή: 11 Φεβ 2007 20:45
Τοποθεσία: Άστεγος!

Google Maps V3 | 3ο, Multiple Markers

Δημοσίευση από p_pan » 24 Οκτ 2011 17:58

Υπερευχαριστω!!!
Αγράματος...

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

Google Maps V3 | 3ο, Multiple Markers

Δημοσίευση από tattooiv » 28 Δεκ 2011 11:17

fafo για αλλη μια φορα τα βοηθηματα σου πιασαν τοπο!!! σε υπερευχαριστουμε. ειχα διαβασει και τα προηγουμενα βοηθηματα σου και ειχα κανει καποια παραδειγματα δικα μου και τωρα διαβαζω και τα νεα σου με την εκδοση 3, απλα προσπαθω να βαλω checkbox οπως εδω http://www.freestuff.gr/forums/viewtopic.php?t=43453 αλλα εχω χαθει λιγο εδω και 3 μερες, θα σου ηταν ευκολο ενα μικρο παραδειγμα, ευχαριστω!

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

Google Maps V3 | 3ο, Multiple Markers

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

Ευχαριστω για αλλη μια φορα!

Πως θα γινει να κανω infobubble αλλα να παιρνει τα δεδομενα απο xml; Γιατι στο παραδειγμα των infobubbles εχει χρησιμοποιηθει ο τροπος των arrays και μπερδευομαι! :(

trinity
Δημοσιεύσεις: 10
Εγγραφή: 01 Απρ 2012 22:13

Google Maps V3 | 3ο, Multiple Markers

Δημοσίευση από trinity » 20 Μάιος 2012 00:55

Συγχαρητήρια για τα φοβερά βοηθήματα!!!Με έχουν βοηθήσει πάρα πολύ!!!Έχω ένα θέμα όμως.Δεν μου εμφανίζονται τα markers στο χάρτη,τι μπορεί να κάνω λάθος;Το tutorial το έχω επαναλάβει αρκετές φορές με το ίδιο αποτέλεσμα :(
Καμιά ιδέα;

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

Google Maps V3 | 3ο, Multiple Markers

Δημοσίευση από tattooiv » 23 Μάιος 2012 22:34

trinity έγραψε:Συγχαρητήρια για τα φοβερά βοηθήματα!!!Με έχουν βοηθήσει πάρα πολύ!!!Έχω ένα θέμα όμως.Δεν μου εμφανίζονται τα markers στο χάρτη,τι μπορεί να κάνω λάθος;Το tutorial το έχω επαναλάβει αρκετές φορές με το ίδιο αποτέλεσμα :(
Καμιά ιδέα;
Ανέβασε τον κώδικα σου μηπως μπορουμε να σε βοηθήσουμε :) και εγω προσωπικα απο αυτα τα βοηθηματα εμαθα τα βασικα για τους google maps και τον δασκαλο FAFO :)

trinity
Δημοσιεύσεις: 10
Εγγραφή: 01 Απρ 2012 22:13

Google Maps V3 | 3ο, Multiple Markers

Δημοσίευση από trinity » 25 Μάιος 2012 00:00

tattooiv έγραψε:
trinity έγραψε:Συγχαρητήρια για τα φοβερά βοηθήματα!!!Με έχουν βοηθήσει πάρα πολύ!!!Έχω ένα θέμα όμως.Δεν μου εμφανίζονται τα markers στο χάρτη,τι μπορεί να κάνω λάθος;Το tutorial το έχω επαναλάβει αρκετές φορές με το ίδιο αποτέλεσμα :(
Καμιά ιδέα;
Ανέβασε τον κώδικα σου μηπως μπορουμε να σε βοηθήσουμε :) και εγω προσωπικα απο αυτα τα βοηθηματα εμαθα τα βασικα για τους google maps και τον δασκαλο FAFO :)
Βρήκα λύση,ευτυχώς;)

Άβαταρ μέλους
ideal
Δημοσιεύσεις: 302
Εγγραφή: 12 Φεβ 2011 16:26

Google Maps V3 | 3ο, Multiple Markers

Δημοσίευση από ideal » 15 Ιαν 2013 13:34

fafos έγραψε:
p_pan έγραψε:Να ρωτησω κατι... στο XML Αρχείο πως μπορουμε να βαλουμε μεσα στο infowindow και τις αλλες πληροφοριες οπως label και λοιπα...;


ευχαριστω
kaneis parse ena ena ta elements tou xml kai ta omadopoieis se ena var:

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

var infowindowContent = '<div><h4>'+markers&#91;i&#93;.getAttribute&#40;"name"&#41;+'</h4></div><div>'+markers&#91;i&#93;.getAttribute&#40;"desc"&#41;+'</div><div>Label&#58; '+markers&#91;i&#93;.getAttribute&#40;"label"&#41;+', Type&#58; '+markers&#91;i&#93;.getAttribute&#40;"type"&#41;+', Address&#58; '+markers&#91;i&#93;.getAttribute&#40;"address"&#41;+'</div>';
meta vazeis auto to var ston marker:

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

var marker = createMarker&#40;infowindowContent, latlng, markers&#91;i&#93;.getAttribute&#40;"icon"&#41;, markerShadow&#41;;
ego evala ta panta apo to xml mesa.. esy mporeis na epilexeis opoia thes na valeis..

demo edo: http://istopoli.com/tuts/gmv3/multimark ... cons2.html
Ειναι πολυ ωραια αυτα που εφτιαξες! ευχαριστουμε πολυ!
θελω να σε ρωτησω 2 πραγματα: 1) μηπως γινεται να εισαγουμε κατευθειαν αρχεια απο GPS οπως .gpx ή kmz και να βγαζει το χαρτη; Δηλαδη να εχω προκαθορισει μια διαδρομη και να την περναω μεσα; 2) στους παραπανω χαρτες θα μπορουσα να συνδεσω μεταξυ τους 2 σημεια με γραμμες για να δειχνω τη διαδρομη σαν πληροφορια;
Ευχαριστω.
Δεν μπορούμε να λύσουμε τα προβλήματά μας χρησιμοποιώντας τον ίδιο τρόπο σκέψης που χρησιμοποιήσαμε όταν τα δημιουργήσαμε. -Α. Einstein

Rent a Car

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

Google Maps V3 | 3ο, Multiple Markers

Δημοσίευση από fafos » 15 Ιαν 2013 15:34

Ginetai eukola.. des edo ena paradeigma: http://www.jacquet80.eu/blog/post/2011/ ... e-Maps-API
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
webdevgr
Δημοσιεύσεις: 703
Εγγραφή: 11 Δεκ 2010 17:25
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Google Maps V3 | 3ο, Multiple Markers

Δημοσίευση από webdevgr » 16 Ιαν 2013 09:08

Να πεταχτώ κι εγώ σαν... καλός μαθητής :)

Έχω φτιάξει διάφορους χάρτες με τη βοήθεια αυτών των παραδειγμάτων... αλλά ενώ παίζουν τέλεια σε chrome, firefox, opera, safari, στον IE κλασικά τραβάνε ζόρι!

Για την ακρίβεια φορτώνω έναν χάρτη με 5000 σημεία και κάνω χρήση των clusters, ενώ όπως είπα σε όλους τους browsers φορτώνει άνετα, στον IE ζορίζεται και φορτώνει όλα τα σημεία ξεχωριστά (με συνέπεια να γεμίζει ο χάρτης Markers και να γονατίζει το μηχάνημα) και μετά σιγά σιγά τα ομαδοποιεί...

Υπάρχει καμιά λύση;

Α στο μηχάνημα μου έχω IE8 για να μπορώ να βλέπω τη συμβατότητα των σελίδων που φτιάχνω.

Άβαταρ μέλους
ideal
Δημοσιεύσεις: 302
Εγγραφή: 12 Φεβ 2011 16:26

Google Maps V3 | 3ο, Multiple Markers

Δημοσίευση από ideal » 16 Ιαν 2013 14:15

fafos έγραψε:Ginetai eukola.. des edo ena paradeigma: http://www.jacquet80.eu/blog/post/2011/ ... e-Maps-API
Αυτο που χρειαζομουν! Ευχαριστώ παρα πολυ!
Προσπαθησα να συνδυασω τον κωδικα απο το tutorial με τους markers και τον κωδικα απο το link που μας εδωσες αλλα δυστυχως δεν πετυχα κατι. μου βγαζει μια γκρι επιφανεια και τιποτα αλλο. Υπαρχει τροπος να συνδυαστουν;
Δοκιμασα με το XML για αρχη αλλα εκανα μια τρυπα στο νερο :lol: (ειναι λιγο για γελια η γνωση μου στη javascript και αν εβλεπες τους συνδυασμους που εκανα θα καταλαβαινες). Δοκιμασα και με απλη τοποθετηση marker (lang-long) και πάλι το ιδιο...
Αν δε σε φερνω σε δυσκολη θεση θα σε παρακαλουσα αν μπορει να γινει κατι τετοιο να μας δειξεις ενα ακομα παραδειγμα. Εγω ειμαι ικανοποιημενος ουτως ή αλλως με τη λυση που μου εδωσες και σε ευχαριστω!
Δεν μπορούμε να λύσουμε τα προβλήματά μας χρησιμοποιώντας τον ίδιο τρόπο σκέψης που χρησιμοποιήσαμε όταν τα δημιουργήσαμε. -Α. Einstein

Rent a Car

Απάντηση

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

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

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