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

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

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

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

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

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

lunarmedia έγραψε:Thanks! :D

Λειτούργησε με τους πολλούς χάρτες αλλά το br δεν έκανε τίποτα.
emena douleuei kanonika.. gia katharise thn cache sou..
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

geo87
Δημοσιεύσεις: 79
Εγγραφή: 16 Ιουν 2008 05:25
Τοποθεσία: Αθήνα

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

Δημοσίευση από geo87 » 23 Σεπ 2009 21:31

lunarmedia έγραψε:Στο συννεφάκι πως μπορούμε να αλλάξουμε γραμμή;
Καλησπέρα! Εγώ βάζω <br /> και δούλεψε μια χαρά. Παράδειγμα >>

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

......... " + address + "<br /><br /><span>..........

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

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

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

Θα το ξαναδοκιμάσω αύριο. Thanks!

Άβαταρ μέλους
geoki
Δημοσιεύσεις: 309
Εγγραφή: 07 Ιαν 2002 01:00
Τοποθεσία: Giannitsa

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

Δημοσίευση από geoki » 27 Σεπ 2009 15:50

Κατ αρχάς fafos συγχαρητήρια και ευχαριστούμε για τον κόπο που έκανες να ανεβάσεις αυτά τα πολύ χρήσιμα βοηθήματα.

Το δικό μου ερώτημα έχει να κάνει με την προσθήκη polygon . Χρησιμοποιώντας αυτό το online tool http://www.birdtheme.org/useful/googletool.html φτιάχνω το πολύγονό μου. Ο κώδικας που παίρνω είναι:

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

var points =
&#91;
'37.988073,23.720512',
'37.977925,23.720684',
'37.977925,23.727036',
'37.988749,23.725834',
'37.988478,23.721199',
'37.988073,23.720512'
&#93;;
var polygon = new GPolygon&#40;points,'#FF0000',0.1,0.4,'#FF0000',0.4&#41;;
map.addOverlay&#40;polygon&#41;;


Τον εισάγω στον δικό σου κώδικα αλλά δε φαίνεται.
Χρειάζεται και κάτι άλλο?

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

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <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;;
    var point = new GLatLng&#40;37.97110, 23.72601&#41;;
 map.addOverlay&#40;new GMarker&#40;point&#41;&#41;;

var points =
&#91;
'37.988073,23.720512',
'37.977925,23.720684',
'37.977925,23.727036',
'37.988749,23.725834',
'37.988478,23.721199',
'37.988073,23.720512'
&#93;;
var polygon = new GPolygon&#40;points,'#FF0000',0.1,0.4,'#FF0000',0.4&#41;;
map.addOverlay&#40;polygon&#41;;

        map.setUIToDefault&#40;&#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>
  </body>
</html>

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

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

Δημοσίευση από fafos » 27 Σεπ 2009 18:24

Kammia sxesh o aplos xarths me ta polylines.. des auto:

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

<!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;
        
       function createLengthMarker&#40;point&#41; &#123;
    	  var marker = new GMarker&#40;point&#41;;
    	  var value = polyline.getLength&#40;&#41;;
    	  value = value / 1000;
    	  var message = "The length of this great circle is&#58; " + value + " kilometers.";
    	  GEvent.addListener&#40;marker,"click", function&#40;&#41; &#123;
     	    var myHtml = message;
     	    map.openInfoWindowHtml&#40;point, myHtml&#41;;
    	  &#125;&#41;;
          return marker;
        &#125;

        var map = new GMap2&#40;document.getElementById&#40;"map_canvas"&#41;&#41;;
        map.setCenter&#40;new GLatLng&#40;37.988073,23.720512&#41;, 12&#41;;
        var polyOptions = &#123;geodesic&#58;true&#125;;
        var polyline = new GPolyline&#40;&#91;
new GLatLng&#40;37.988073,23.720512&#41;,
new GLatLng&#40;37.977925,23.720684&#41;,
new GLatLng&#40;37.977925,23.727036&#41;,
new GLatLng&#40;37.988749,23.725834&#41;,
new GLatLng&#40;37.988478,23.721199&#41;,
new GLatLng&#40;37.988073,23.720512&#41;

        &#93;, "#ff0000", 10, 1, polyOptions&#41;;
        map.addOverlay&#40;polyline&#41;;
        map.addOverlay&#40;createLengthMarker&#40;new GLatLng&#40;37.988073,23.720512&#41;&#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="message"></div>

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

Άβαταρ μέλους
geoki
Δημοσιεύσεις: 309
Εγγραφή: 07 Ιαν 2002 01:00
Τοποθεσία: Giannitsa

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

Δημοσίευση από geoki » 27 Σεπ 2009 19:33

Αυτό ήταν fafos σ' ευχαριστώ.
απο
'37.983188,23.717766',
έπρεπε να γίνουν
new GLatLng(37.983188,23.717766),

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

Ας υπάρχουν
Googlemap_me_Polyline
Googlemap_me_Polygon

Άβαταρ μέλους
vassilism
Δημοσιεύσεις: 1952
Εγγραφή: 17 Μαρ 2007 14:47
Επικοινωνία:

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

Δημοσίευση από vassilism » 27 Σεπ 2009 19:59

Κάτσε να σας πάρει χαμπάρι η google με τα κολπάκια που κάνετε και θα σας πω εγώ.
Βλέπω στο μέλλον να αρχίσει να παίρνει λεφτά για το API που θα δίνει.
Και για όλα αυτά θα φταίει ο fafos :lol:

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

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

Δημοσίευση από fafos » 27 Σεπ 2009 20:40

vassilism έγραψε:Κάτσε να σας πάρει χαμπάρι η google με τα κολπάκια που κάνετε και θα σας πω εγώ.
Βλέπω στο μέλλον να αρχίσει να παίρνει λεφτά για το API που θα δίνει.
Και για όλα αυτά θα φταίει ο fafos :lol:
Εικόνα
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...



Άβαταρ μέλους
tornado1979
Δημοσιεύσεις: 39
Εγγραφή: 04 Φεβ 2007 15:07
Τοποθεσία: κάπου στα δυτικά

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

Δημοσίευση από tornado1979 » 26 Ιαν 2010 10:04

πολύ ωραίο και αναλυτικό το help. πραγματικά η google δίνοντας το API μας δείνει πολλές δυνατότητες πλέον για να προσαρμόσουμε τους χάρτες μας όπως θέλουμε. έκανα και εγώ έναν χάρτη στην ιστοσελίδα μου βάζοντας την φωτογραφία του κτηρίου, στο σημείο που θέλω πάνω στον χάρτη, και δίνω την δυνατότητα δυναμικής διαδρομής δύο σημείων (προς εδώ, από εδώ). π.χ. πως να έρθει καποιος απο μια περιοχή στην εταιρία κλπ. είναι πολύ χρήσιμο. όποιος ενδιαφέρεται για κάτι τέτοιο μπορώ να του στείλω τον κώδικα. το link ειναι http://www.sugartia.gr/el/-sugartia-googlemaps.

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

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

Δημοσίευση από fafos » 26 Ιαν 2010 17:29

to mono problhma me aythn thn methodo einai oti se paei stis selides ths google.. yparxoyn polloi tropoi gia na doseis ta destinations ston xarth ths selidas sou:

http://www.istopoli.com/cruise/maps/drivedisfun2.html (the fun way :lol: )

http://www.istopoli.com/cruise/directions.php?id=1 (anti select menus mporeis na xrhsimopoihseis ena kryfo text field me thn dieuthynsh sou kai ena text pedio gia ton xrhsth opou tha vazei thn dikh toy dieuthynsh)
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
tornado1979
Δημοσιεύσεις: 39
Εγγραφή: 04 Φεβ 2007 15:07
Τοποθεσία: κάπου στα δυτικά

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

Δημοσίευση από tornado1979 » 26 Ιαν 2010 18:05

για τον πρώτο τρόπο δεν το συζητώ fafo, ένα τσιγάρο δρόμος είναι, χεχε.

το δεύτερο είναι καλό απλά αντί για combo πρέπει να βάλω textboxes. το ωραίο βέβαια είναι οτι δεν σε πάει στη σελίδα του google όπως κάνω εγώ. κανενα tutorial υπαρχει για το δεύτερο;

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

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

Δημοσίευση από fafos » 26 Ιαν 2010 18:50

tornado1979 έγραψε:για τον πρώτο τρόπο δεν το συζητώ fafo, ένα τσιγάρο δρόμος είναι, χεχε.

το δεύτερο είναι καλό απλά αντί για combo πρέπει να βάλω textboxes. το ωραίο βέβαια είναι οτι δεν σε πάει στη σελίδα του google όπως κάνω εγώ. κανενα tutorial υπαρχει για το δεύτερο;
den xreiazetai toso polyploko pragma gia kati toso aplo.. to parakato einai omoio me to diko sou aplos den feugei apo to site sou:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&am ... y=xxxxxxxx" type="text/javascript"></script>
</head>
<body onunload="GUnload()">


<!-- you can use tables or divs for the overall layout -->

<table border=1>
<tr>
<td>
<div id="map" style="width: 550px; height: 450px"></div>
</td>
<td width = 350 valign="top" >
<div id="side_bar" style="text-decoration: underline; color: #4444ff;"></div>
<div id="directions" style="overflow:auto;height:390px"><hr /></div>
</td>

</tr>
</table>



<script type="text/javascript">
//<![CDATA[

if (GBrowserIsCompatible()) {
var side_bar_html = "";
var gmarkers = [];
var htmls = [];
// arrays to hold variants of the info window html with get direction forms open
var to_htmls = [];
var from_htmls = [];


// A function to create the marker and set up the event window
function createMarker(point,name,html) {
var marker = new GMarker(point);

var i = gmarkers.length;

// The info window version with the "to here" form open
to_htmls = html + '<br>Directions: <b>To here<\/b> - <a href="javascript:fromhere(' + i + ')">From here<\/a>' +
'<br>Start address:<form action="javascript:getDirections()">' +
'<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
'<INPUT value="Get Directions" TYPE="SUBMIT"><br>' +
'Walk <input type="checkbox" name="walk" id="walk" /> &nbsp; Avoid Highways <input type="checkbox" name="highways" id="highways" />' +
'<input type="hidden" id="daddr" value="'+name+"@"+ point.lat() + ',' + point.lng() +
'"/>';
// The info window version with the "from here" form open
from_htmls = html + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <b>From here<\/b>' +
'<br>End address:<form action="javascript:getDirections()">' +
'<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
'<INPUT value="Get Directions" TYPE="SUBMIT"><br>' +
'Walk <input type="checkbox" name="walk" id="walk" /> &nbsp; Avoid Highways <input type="checkbox" name="highways" id="highways" />' +
'<input type="hidden" id="saddr" value="'+name+"@"+ point.lat() + ',' + point.lng() +
'"/>';
// The inactive version of the direction info
html = html + '<br>Directions: <a href="javascript:tohere('+i+')">To here<\/a> - <a href="javascript:fromhere('+i+')">From here<\/a>';

GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
// save the info we need to use later for the side_bar
gmarkers.push(marker);
htmls = html;
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '<\/a><br>';
return marker;
}

// ===== request the directions =====
function getDirections() {
// ==== Set up the walk and avoid highways options ====
var opts = {};
if (document.getElementById("walk").checked) {
opts.travelMode = G_TRAVEL_MODE_WALKING;
}
if (document.getElementById("highways").checked) {
opts.avoidHighways = true;
}
// ==== set the start and end locations ====
var saddr = document.getElementById("saddr").value
var daddr = document.getElementById("daddr").value
gdir.load("from: "+saddr+" to: "+daddr, opts);
}


// This function picks up the click and opens the corresponding info window
function myclick(i) {
gmarkers.openInfoWindowHtml(htmls);
}

// functions that open the directions forms
function tohere(i) {
gmarkers.openInfoWindowHtml(to_htmls);
}
function fromhere(i) {
gmarkers.openInfoWindowHtml(from_htmls);
}


// create the map
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(40.644996, 22.926012), 9);

// === create a GDirections Object ===
var gdir=new GDirections(map, document.getElementById("directions"));

// === Array for decoding the failure codes ===
var reasons=[];
reasons[G_GEO_SUCCESS] = "Success";
reasons[G_GEO_MISSING_ADDRESS] = "Missing Address: The address was either missing or had no value.";
reasons[G_GEO_UNKNOWN_ADDRESS] = "Unknown Address: No corresponding geographic location could be found for the specified address.";
reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address: The geocode for the given address cannot be returned due to legal or contractual reasons.";
reasons[G_GEO_BAD_KEY] = "Bad Key: The API key is either invalid or does not match the domain for which it was given";
reasons[G_GEO_TOO_MANY_QUERIES] = "Too Many Queries: The daily geocoding quota for this site has been exceeded.";
reasons[G_GEO_SERVER_ERROR] = "Server error: The geocoding request could not be successfully processed.";
reasons[G_GEO_BAD_REQUEST] = "A directions request could not be successfully parsed.";
reasons[G_GEO_MISSING_QUERY] = "No query was specified in the input.";
reasons[G_GEO_UNKNOWN_DIRECTIONS] = "The GDirections object could not compute directions between the points.";

// === catch Directions errors ===
GEvent.addListener(gdir, "error", function() {
var code = gdir.getStatus().code;
var reason="Code "+code;
if (reasons

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

) {
          reason = reasons[code]
        } 

        alert("Failed to obtain directions, "+reason);
      });



      // Read the data from example.xml
      var request = GXmlHttp.create();
      request.open("GET", "example.xml", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = GXml.parse(request.responseText);
          // obtain the array of markers and loop through it
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            var html = markers[i].getAttribute("html");
            var label = markers[i].getAttribute("label");
            // create the marker
            var marker = createMarker(point,label,html);
            map.addOverlay(marker);
          }
          // put the assembled side_bar_html contents into the side_bar div
          document.getElementById("side_bar").innerHTML = side_bar_html;
        }
      }
      request.send(null);
    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/

    //]]>
    </script>

  </body>

</html>




[/quote]


kai to example.xml:

[quote]<markers>

 <marker lat="40.644996" lng="22.926012" html='&lt;b&gt;&lt;br&gt;&lt;br&gt;&lt;img src="P1010528.JPG" width="200" height="267" alt="Κεντρικά Γραφεία Sugartia Ε.Π.Ε."&gt;&lt;br&gt;&lt;font color="green"&gt;Sugartia Ε.Π.Ε.&lt;/font&gt;&lt;br&gt;Μοναστηρίου 93Α, Θεσσαλονίκη&lt;br&gt;Τ.Κ. 54627&lt;br&gt;Τηλ. +302310552255&lt;br&gt;Email: sales@sugartia.gr&lt;br&gt;&lt;/b&gt;'  label="Sugartia Ε.Π.Ε Μοναστηρίου 93Α, Θεσσαλονίκη" />
 
</markers> [/quote]

PROSOXH!! austhra se UTF-8 xoris BOM to xml, kai prosekse pos exo metatrepsei ta html elements.. gia paradeigma:
[quote]to <br> einai etsi: &lt;br&gt;[/quote]

thelei mia psilometafrash...

demo: http://www.istopoli.com/cruise/maps/sugar.html


edit... gia kapoio anekshghto logo den anagnorizei to code sto forum... kapoios paizi pali :lol:
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

Άβαταρ μέλους
tornado1979
Δημοσιεύσεις: 39
Εγγραφή: 04 Φεβ 2007 15:07
Τοποθεσία: κάπου στα δυτικά

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

Δημοσίευση από tornado1979 » 27 Ιαν 2010 11:42

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

Απάντηση

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

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

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