Google Maps V3 | 2ο, Markers & Infowindows

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

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

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

Google Maps V3 | 2ο, Markers & Infowindows

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

Προηγούμενο βοήθημα: Google Maps V3 | 1ο, Γενικά

Σε αυτό το βοήθημα θα δούμε πως τοποθετούμε ένα εικονίδιο (marker) ή ένα πλαίσιο κειμένου (infowindow) στον χάρτη μας...


Εικονίδια (Markers)

Για να επισημάνουμε ένα ή περισσότερα σημεία πάνω στον χάρτη χρησιμοποιούμε συνήθως εικονίδια τα οποία θα αποκαλούμε markers από εδώ και στο εξής.
Ένα marker θα μπορούσε να είναι το κλασσικό όπως το δίνει η Google (Εικόνα - σε διάφορα χρώματα) είτε με δικά μας εικονίδια (Εικόνα ) τα οποία μπορούμε να δημιουργήσουμε με κάποιον image editor (photoshop κλπ) ή να τα βρούμε έτοιμα στο web.
Για καλύτερη εμφάνιση προτείνεται τα εικονίδια να είναι μορφής png 24bit transparent!
Επίσης μπορείτε να προσθέσετε και ένα εικονίδιο "σκιά" του marker για πιο όμορφο αποτέλεσμα. (π.χ. Εικόνα)

Παρακάτω θα σας δώσω κάποια links με συλλογές markers και δημιουργίας σκιών.


Ας δούμε πως τοποθετούμε τον marker στον χάρτη...

Στο προηγούμενο βοήθημα είδαμε πως δημιουργούμε έναν απλό χάρτη κεντραρισμένο στην Αθήνα.. τώρα θα τοποθετήσουμε έναν marker για να επισημάνουμε το σημείο που κεντράρει ο χάρτης.
Ο κώδικας που χρησιμοποιούμε είναι αυτός:

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

<script type="text/javascript">
 function initialize&#40;&#41; &#123;
  var myLatlng = new google.maps.LatLng&#40;37.994636052022386, 23.751648349999982&#41;;
  var myOptions = &#123;
    zoom&#58; 13,
    center&#58; myLatlng,
    mapTypeId&#58; google.maps.MapTypeId.ROADMAP,
  &#125;
 var map = new google.maps.Map&#40;document.getElementById&#40;"map"&#41;, myOptions&#41;;
    
 var marker = new google.maps.Marker&#40;&#123;
      position&#58; myLatlng,
      title&#58;"Hello World!"
  &#125;&#41;;
  
  marker.setMap&#40;map&#41;; 
&#125;
  google.maps.event.addDomListener&#40;window, 'load', initialize&#41;;
</script>
ορίζουμε που είναι το κέντρο και που θα εμφανιστεί ο marker (var myLatlng = new google.maps.LatLng(37.994636052022386, 23.751648349999982); )
μετά δημιουργούμε τις επιλογές (options) του marker:

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

 var marker = new google.maps.Marker&#40;&#123;
      position&#58; myLatlng,
      title&#58;"Hello World!"
  &#125;&#41;;
(το title:"Hello World!" λειτουργεί όπως το alt ή title σε μία εικόνα.. πηγαίνοντας το ποντίκι επάνω μας δείχνει με ένα tooltip το κείμενο. Αυτή είναι μία από τις επιλογές που μπορούμε να προσθέσουμε σε έναν marker. Παρακάτω θα σας αναλύσω τις κυριότερες επιλογές.)

και τέλος με το marker.setMap(map); του λέμε να τοποθετήσει τον marker στον χάρτη.

Αν θέλουμε να εμφανίζεται ο marker σε διαφορετικό σημείο δημιουργούμε ένα νέο var με νέες συντεταγμένες και το δίνουμε στις επιλογές.. π.χ.

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

 function initialize&#40;&#41; &#123;
  var myLatlng = new google.maps.LatLng&#40;37.994636052022386, 23.751648349999982&#41;;
  var acropoli = 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;
 var map = new google.maps.Map&#40;document.getElementById&#40;"map"&#41;, myOptions&#41;;
    
 var marker = new google.maps.Marker&#40;&#123;
      position&#58; acropoli,
      title&#58;"Hello Acropolis!"
  &#125;&#41;;
  
  marker.setMap&#40;map&#41;; 
&#125;
demo: http://istopoli.com/tuts/gmv3/marker1.html
στο παράδειγμα "ρίξαμε" τον marker στην Ακρόπολη με κέντρο την Αθήνα.

Τοποθέτηση marker με την διεύθυνση
Αντί για συντεταγμένες μπορούμε να ορίσουμε τον marker με την διεύθυνση χρησιμοποιώντας το geocoding

Παράδειγμα: http://istopoli.com/tuts/gmv3/geocoder.html

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

<script type="text/javascript">
var geocoder;
var map;
 function initialize&#40;&#41; &#123;
  var myLatlng = new google.maps.LatLng&#40;37.994636052022386, 23.751648349999982&#41;;
	geocoder = new google.maps.Geocoder&#40;&#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"&#41;, myOptions&#41;;
	
&#125;
  function codeAddress&#40;&#41; &#123;
    var address = 'Ακρόπολη, Ελλάδα';
    geocoder.geocode&#40; &#123; 'address'&#58; address&#125;, function&#40;results, status&#41; &#123;
      if &#40;status == google.maps.GeocoderStatus.OK&#41; &#123;
        var marker = new google.maps.Marker&#40;&#123;
            map&#58; map, 
            position&#58; results&#91;0&#93;.geometry.location
        &#125;&#41;;
      &#125; else &#123;
        alert&#40;"Geocode was not successful for the following reason&#58; " + status&#41;;
      &#125;
    &#125;&#41;;
  &#125;
  google.maps.event.addDomListener&#40;window, 'load', initialize&#41;;
  google.maps.event.addDomListener&#40;window, 'load', codeAddress&#41;;  
</script>
εδώ τρέχουμε μία function (codeAddress()) και της λέμε να βρεί τις συντεταγμένες της Ακρόπολης και εκεί να τοποθετήσει τον marker. Η function καλείται μετά με το google.maps.event.addDomListener(window, 'load', codeAddress);

Έχοντας αυτήν την function μπορούμε να δημιουργήσουμε μία φόρμα αναζήτησης της διεύθυνσης και να μας την δείξει με ένα marker στον χάρτη:
Παράδειγμα: http://istopoli.com/tuts/gmv3/geocoderform.html
εδώ παίρνουμε την διεύθυνση με το var address = document.getElementById("address").value; και κεντράροντας τον χάρτη (map.setCenter(results[0].geometry.location); ) σε αυτήν την διεύθυνση μας δείχνει και τον marker... ο κώδικας:

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

<!DOCTYPE html>
<html>
<head>
<title>Single Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http&#58;//maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
 function initialize&#40;&#41; &#123;
  var myLatlng = new google.maps.LatLng&#40;37.994636052022386, 23.751648349999982&#41;;
	geocoder = new google.maps.Geocoder&#40;&#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"&#41;, myOptions&#41;;
	
&#125;
  function codeAddress&#40;&#41; &#123;
   var address = document.getElementById&#40;"address"&#41;.value;
    geocoder.geocode&#40; &#123; 'address'&#58; address&#125;, function&#40;results, status&#41; &#123;
      if &#40;status == google.maps.GeocoderStatus.OK&#41; &#123;
	  map.setCenter&#40;results&#91;0&#93;.geometry.location&#41;;
        var marker = new google.maps.Marker&#40;&#123;
            map&#58; map, 
            position&#58; results&#91;0&#93;.geometry.location
        &#125;&#41;;
      &#125; else &#123;
        alert&#40;"Geocode was not successful for the following reason&#58; " + status&#41;;
      &#125;
    &#125;&#41;;
  &#125;
  google.maps.event.addDomListener&#40;window, 'load', initialize&#41;;
    
</script>
<style type="text/css">
  body &#123;
    font-family&#58; sans-serif;
  &#125;
  #map &#123;
    width&#58; 800px;
    height&#58; 500px;
  &#125;
</style>
</head>
<body>
  <div>
    <input id="address" type="textbox" value="Αθήνα, Ελλάδα">

    <input type="button" value="Geocode" onclick="codeAddress&#40;&#41;">
  </div>
  <div id="map"></div>
</body>
</html>
Με την βοήθεια της jQuery μπορούμε να δημιουργήσουμε ένα autocomplete στην φόρμα μας η οποία θα μας δίνει πιθανές διευθύνσεις όταν θα αρχίσουμε να συμπληρώνουμε την φόρμα:
Παράδειγμα: http://istopoli.com/tuts/gmv3/geocoderformui.html

Κάνετε δεξί κλικ για να δείτε τον κώδικα και τα αρχεία που χρειάζονται για αυτό το script!



Custom Marker
Τα παραπάνω παραδείγματα τοποθετούν τον απλό marker της google.. για να βάλετε έναν δικό σας marker κάνετε τα παρακάτω:

Υποθέτουμε ότι έχουμε ανεβάσει ένα εικονίδιο στον φάκελλο images με τίτλο bigcity.png (Εικόνα ). Δημιουργούμε ένα var με κάποιο τίτλο (π.χ. markerIcon):

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

  var markerIcon = new google.maps.MarkerImage&#40;
    "images/bigcity.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;;
"images/bigcity.png", = το path του marker
new google.maps.Size(32,37), = οι διαστάσεις του marker
new google.maps.Point(0,0), = απόσταση του marker από το σημείο (συνήθως 0)
new google.maps.Point(16,37) = κεντράρισμα του marker - συνήθως δίνουμε το μισό πλάτος της εικόνας (32/2=16) και το ύψος (37)

μετά βάζουμε το markerIcon μέσα στις επιλογές του marker:

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

 var marker = new google.maps.Marker&#40;&#123;
      position&#58; myLatlng,
      icon&#58; markerIcon,
      title&#58;"Hello World!"
  &#125;&#41;;
Παράδειγμα: http://istopoli.com/tuts/gmv3/custommarker.html


Shadow

Μία περίπου ίδια διαδικασία ακολουθούμε και για να βάλουμε την σκιά στον χάρτη μας:

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

  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;;


var marker = new google.maps.Marker&#40;&#123;
      position&#58; myLatlng,
      icon&#58; markerIcon,
      shadow&#58; markerShadow,
      title&#58;"Hello World!"
  &#125;&#41;;


παράδειγμα: http://istopoli.com/tuts/gmv3/custommarkershandow.html

και ο τελικός κώδικας:

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

<script type="text/javascript">
 function initialize&#40;&#41; &#123;
  var myLatlng = new google.maps.LatLng&#40;37.994636052022386, 23.751648349999982&#41;;
  var myOptions = &#123;
    zoom&#58; 13,
    center&#58; myLatlng,
    mapTypeId&#58; google.maps.MapTypeId.ROADMAP,
  &#125;
 var map = new google.maps.Map&#40;document.getElementById&#40;"map"&#41;, myOptions&#41;;
 
  var markerIcon = new google.maps.MarkerImage&#40;
    "images/bigcity.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-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;;
  
var marker = new google.maps.Marker&#40;&#123;
      position&#58; myLatlng,
      icon&#58; markerIcon,
      shadow&#58; markerShadow,
      title&#58;"Hello World!"
  &#125;&#41;;
  
  marker.setMap&#40;map&#41;; 
&#125;
  google.maps.event.addDomListener&#40;window, 'load', initialize&#41;;
</script>
Links με custom markers:
http://code.google.com/intl/el-GR/apis/ ... icons.html ( δημιουργία markers με path από την google)

http://www.powerhut.co.uk/googlemaps/custom_markers.php (δημιουργία σκιάς)

http://mapicons.nicolasmollet.com/ (πολύ καλή συλλογή)

μπορείτε να βρείτε πολλές ακόμα ψάχνοντας με το Google...



Aς δούμε τις κυριότερες επιλογές που μπορούμε να βάλουμε στους markers:

position: συντεταγμένες = αυτό πρέπει να μπει υποχρεωτικά δίνοντας τις συντεταγμένες που θέλουμε να εμφανιστεί ο marker

icon: "path προς την τον marker"
= το path προς τον custom marker

shadow: "path προς την σκιά του marker" = το path προς την σκιά του marker

draggable: true ή false = εδώ ορίζουμε αν θέλουμε ο marker να μετακινείται με αριστερό κλικ και σύροντας τον μέσα στον χάρτη

title: "κάποιο κείμενο" = λειτουργεί όπως το alt ή title σε μία εικόνα.. πηγαίνοντας το ποντίκι επάνω μας δείχνει με ένα tooltip το κείμενο.

visible: true ή false = εδώ λέμε αν θέλουμε να εμφανιστεί ο marker πάνω στον χάρτη

Αναλυτικά όλες οι επιλογές των markers εδώ: http://code.google.com/intl/el-GR/apis/ ... MapOptions

Κάθε επιλογή πρέπει να έχει ένα κόμμα στο τέλος εκτός της τελευταίας επιλογής!

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

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

Google Maps V3 | 2ο, Markers & Infowindows

Δημοσίευση από fafos » 30 Αύγ 2011 20:37

InfoWindows

Τα infowindows είναι αυτά τα πλαίσια διαλόγου που εμφανίζονται είτε κάνοντας κλικ πάνω σε έναν marker είτε όταν ανοίγουμε ένα χάρτη κλπ. Ο κώδικας είναι ο παρακάτω:

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

var infowindow = new google.maps.InfoWindow&#40;&#123;
    content&#58; 'κάποιο κείμενο εδώ'
&#125;&#41;;
 

//τοποθέτηση του infowindow στον marker
google.maps.event.addListener&#40;marker, 'click', function&#40;&#41; &#123;
  infowindow.open&#40;map,marker&#41;;
&#125;&#41;; 

παράδειγμα: http://istopoli.com/tuts/gmv3/infowindow.html

το παραπάνω μας εμφανίζει το infowindow κάνοντας κλικ επάνω στον marker. Μπορούμε να εμφανίσουμε το infowindow με το που θα ανοίξει ο χάρτης μας αφήνοντας το infowindow.open(map,marker); χωρίς τον υπόλοιπο κώδικα της function:

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

//τοποθέτηση του infowindow στον marker
  infowindow.open&#40;map,marker&#41;;
αυτό βέβαια μας περιορίζει ότι αν κλείσουμε το infowindow δεν θα ανοίξει με κλικ στον marker οπότε από κάτω θα ξαναβάλουμε την function:

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

  infowindow.open&#40;map,marker&#41;;
  google.maps.event.addListener&#40;marker, 'click', function&#40;&#41; &#123;
  infowindow.open&#40;map,marker&#41;;
&#125;&#41;; 
Αν θέλετε να ανοίγει το infowindow χωρίς τον marker διαγράψτε τα options και τον κώδικα για τον marker και βάλτε αυτόν τον κώδικα:

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

        var coordInfoWindow = new google.maps.InfoWindow&#40;&#41;;
        coordInfoWindow.setContent&#40;'hello there'&#41;;
        coordInfoWindow.setPosition&#40;myLatlng&#41;;
        coordInfoWindow.open&#40;map&#41;;
οπότε, το script θα γίνει κάπως έτσι:

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

<script type="text/javascript">
 function initialize&#40;&#41; &#123;
  var myLatlng = new google.maps.LatLng&#40;37.994636052022386, 23.751648349999982&#41;;
  var myOptions = &#123;
    zoom&#58; 13,
    center&#58; myLatlng,
    mapTypeId&#58; google.maps.MapTypeId.ROADMAP,
  &#125;
 var map = new google.maps.Map&#40;document.getElementById&#40;"map"&#41;, myOptions&#41;;

		var coordInfoWindow = new google.maps.InfoWindow&#40;&#41;;
        coordInfoWindow.setContent&#40;'hello there'&#41;;
        coordInfoWindow.setPosition&#40;myLatlng&#41;;
        coordInfoWindow.open&#40;map&#41;;
  
&#125;
  google.maps.event.addDomListener&#40;window, 'load', initialize&#41;;
</script>

Οι βασικές επιλογές στα infowindows είναι αυτές:

content: "κάποιο κείμενο" = το κείμενο που θα δείχνει το infowindow. Μπορείτε να χρησιμοποιήσετε HTML στοιχεία προσέχοντας να μην χαλάσουμε τον κώδικα

maxWidth = ΧΧΧ = δίνουμε το μέγιστο πλάτος του infowindow σε pixels

κώδικας;

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

    var infowindow = new google.maps.InfoWindow&#40;&#123;
        content&#58; "Hello Fafos!!,
        maxWidth&#58; 200
    &#125;&#41;;
Αυτά για τα κλασσικά infowindows. υπάρχουν τρόποι όμως να φτιάξουμε δικά μας infowindows είτε με απλή css είτε με background image κλπ. Αυτά όμως θα είναι ξεχωριστό βοήθημα που θα γράψω πιο μετά.

Σημείωση: Αν δεν βάλετε κάποιο style στο κείμενο του infowindow, αυτό θα πάρει το style που θα βρει στην υπόλοιπη σελίδα!



Στο επόμενο βοήθημα θα δούμε χάρτες με πολλαπλά markers...


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


Απάντηση

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

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

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