Πώς να προσθέσετε έναν χάρτη Google στην ιστοσελίδα σας

01 από 05

Αποκτήστε ένα κλειδί API Χαρτών Google για τον ιστότοπό σας

Προβολή σύννεφου της Κονσόλας προγραμματιστών Google. Οθόνη πυροβόλησε ο J Kyrnin

Ο καλύτερος τρόπος για να προσθέσετε έναν χάρτη Google στον ιστότοπό σας είναι να χρησιμοποιήσετε το API Χαρτών Google. Και η Google συνιστά να λάβετε ένα κλειδί API για να χρησιμοποιήσετε τους χάρτες.

Δεν απαιτείται να λάβετε ένα κλειδί API για να χρησιμοποιήσετε το Google Maps API v3, αλλά είναι πολύ χρήσιμο καθώς σας επιτρέπει να παρακολουθείτε τη χρήση σας και να πληρώνετε για πρόσθετη πρόσβαση. Το API Χαρτών Google v3 έχει μια ποσόστωση 1 αιτήματος ανά δευτερόλεπτο ανά χρήστη, με μέγιστο αριθμό 25.000 αιτήσεων ανά ημέρα. Εάν οι σελίδες σας υπερβαίνουν αυτά τα όρια, θα χρειαστεί να ενεργοποιήσετε τη χρέωση για να λάβετε περισσότερα.

Πώς να αποκτήσετε ένα κλειδί API Χαρτών Google

  1. Συνδεθείτε στο Google χρησιμοποιώντας το Λογαριασμό σας Google.
  2. Μεταβείτε στην Κονσόλα προγραμματιστών
  3. Μετακινηθείτε στη λίστα και βρείτε το API Χάρτες Google v3, στη συνέχεια κάντε κλικ στο κουμπί "OFF" για να το ενεργοποιήσετε.
  4. Διαβάστε και συμφωνείτε με τους όρους.
  5. Μεταβείτε στην κονσόλα API και επιλέξτε "Πρόσβαση API" από το αριστερό μενού
  6. Στην ενότητα "Απλή πρόσβαση API", κάντε κλικ στο κουμπί "Δημιουργία νέου διακομιστή ...".
  7. Καταχωρίστε τη διεύθυνση IP του διακομιστή ιστού σας. Αυτή είναι η διεύθυνση IP από την οποία προέρχονται τα αιτήματα των Χαρτών σας. Εάν δεν γνωρίζετε τη διεύθυνση IP σας, μπορείτε να την αναζητήσετε.
  8. Αντιγράψτε το κείμενο στη γραμμή "API key:" (χωρίς να συμπεριλαμβάνεται ο τίτλος). Αυτό είναι το κλειδί API για τους χάρτες σας.

02 του 05

Μετατροπή της διεύθυνσής σας σε συντεταγμένες

Χρησιμοποιήστε τους υποδεικνυόμενους αριθμούς για γεωγραφικό πλάτος και γεωγραφικό μήκος. Οθόνη πυροβόλησε ο J Kyrnin

Για να χρησιμοποιήσετε τους Χάρτες Google στις ιστοσελίδες σας, πρέπει να έχετε το γεωγραφικό πλάτος και μήκος για τη θέση. Μπορείτε να τα πάρετε από ένα GPS ή μπορείτε να χρησιμοποιήσετε ένα ηλεκτρονικό εργαλείο όπως το Geocoder.us για να σας πω.

  1. Μεταβείτε στο Geocoder.us και πληκτρολογήστε τη διεύθυνσή σας στο πλαίσιο αναζήτησης.
  2. Αντιγράψτε τον πρώτο αριθμό για το γεωγραφικό πλάτος (χωρίς ένα γράμμα μπροστά) και επικολλήστε το σε ένα αρχείο κειμένου. Δεν χρειάζεστε την ένδειξη βαθμού (º).
  3. Αντιγράψτε τον πρώτο αριθμό για το μήκος (και πάλι χωρίς ένα γράμμα μπροστά) και επικολλήστε το στο αρχείο κειμένου.

Το πλάτος και το γεωγραφικό μήκος σας θα μοιάζουν με αυτό:

40,756076
-73.990838

Το Geocoder.us λειτουργεί μόνο για διευθύνσεις των ΗΠΑ, εάν πρέπει να πάρετε τις συντεταγμένες σε άλλη χώρα, θα πρέπει να αναζητήσετε ένα παρόμοιο εργαλείο στην περιοχή σας.

03 του 05

Προσθήκη του χάρτη στην ιστοσελίδα σας

Χάρτες Google. Οθόνη shot από τον J Kyrnin - Χάρτης εικόνα ευγένεια Google

Πρώτα, προσθέστε το Script Map στο

του εγγράφου σας

Ανοίξτε την ιστοσελίδα σας και προσθέστε τα ακόλουθα στην κεφαλή του εγγράφου σας.

Αλλάξτε το επισημασμένο τμήμα στους αριθμούς γεωγραφικού πλάτους και γεωγραφικού μήκους που γράψατε στο βήμα 2.

Δεύτερον, προσθέστε το στοιχείο χάρτη στη σελίδα σας

Αφού προσθέσετε όλα τα στοιχεία σεναρίου στο HEAD του εγγράφου σας, πρέπει να τοποθετήσετε τον χάρτη σας στη σελίδα. Κάνετε αυτό προσθέτοντας ένα στοιχείο DIV με το χαρακτηριστικό id = "map-canvas". Σας συνιστούμε να στυλ αυτό το div με το πλάτος και το ύψος που θα χωρέσει στη σελίδα σας:

Τέλος, μεταφορτώστε και δοκιμάστε

Το τελευταίο πράγμα που πρέπει να κάνετε είναι να ανεβάσετε τη σελίδα σας και να ελέγξετε ότι εμφανίζεται ο χάρτης σας. Ακολουθεί ένα παράδειγμα ενός χάρτη της Google στη σελίδα. Σημειώστε, λόγω του τρόπου με τον οποίο λειτουργεί το cdcc.com, θα πρέπει να κάνετε κλικ σε ένα σύνδεσμο για να εμφανιστεί ο χάρτης. Αυτό δεν συμβαίνει στη σελίδα σας.

Εάν ο χάρτης σας δεν εμφανίζεται, δοκιμάστε να το αρχικοποιήσετε με ένα χαρακτηριστικό BODY:

onload = "αρχικοποίηση ()" >

Άλλα πράγματα για να ελέγξετε αν ο χάρτης σας δεν φορτώνει περιλαμβάνουν:

04 του 05

Προσθέστε ένα δείκτη στο χάρτη σας

Google Map με δείκτη. Οθόνη shot από τον J Kyrnin - Χάρτης εικόνα ευγένεια Google

Αλλά τι καλό είναι ένας χάρτης της τοποθεσίας σας εάν δεν υπάρχει δείκτης που να λέει στους ανθρώπους πού πρέπει να πάνε;

Για να προσθέσετε έναν τυπικό κόκκινο δείκτη του Google Maps, προσθέστε τα παρακάτω στο script σας κάτω από το var map = ... line:

var myLatlng = νέο google.maps.LatLng ( γεωγραφικό πλάτος, γεωγραφικό μήκος );
var marker = νέο google.maps.Marker ({
θέση: myLatlng,
χάρτης: χάρτης,
τίτλος: " Πρώην headquarters "
});

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

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

var latlng 2 = νέο google.maps.LatLng ( 37.3316591, -122.0301778 );
var myMarker 2 = νέο google.maps.Marker ({
θέση: πλάτος 2 ,
χάρτης: χάρτης,
τίτλος: " Apple Computer "
});

Ακολουθεί ένα παράδειγμα ενός χάρτη Google με ένα δείκτη. Σημειώστε, λόγω του τρόπου με τον οποίο λειτουργεί το CMS του About.com, πρέπει να κάνετε κλικ σε ένα σύνδεσμο για να εμφανιστεί ο χάρτης. Αυτό δεν συμβαίνει στη σελίδα σας.

05 του 05

Προσθέστε έναν δεύτερο (ή περισσότερους) χάρτες στη σελίδα σας

Αν εξετάσατε την παράδειξή μου σελίδα Google Maps, θα παρατηρήσετε ότι στη σελίδα εμφανίζονται περισσότεροι από ένας χάρτες. Αυτό είναι πολύ εύκολο να γίνει. Δείτε πώς.

  1. Αποκτήστε το γεωγραφικό πλάτος και το γεωγραφικό μήκος όλων των χαρτών που θέλετε να εμφανίζονται όπως μάθαμε στο βήμα 2 αυτού του σεμιναρίου.
  2. Εισαγάγετε τον πρώτο χάρτη όπως μάθαμε στο βήμα 3 αυτού του σεμιναρίου. Αν θέλετε ο χάρτης να έχει ένα δείκτη, προσθέστε το δείκτη όπως στο βήμα 4.
  3. Για το δεύτερο χάρτη, θα πρέπει να προσθέσετε 3 νέες γραμμές στο script initialize ():
    var latlng2 = νέα google.maps.LatLng ( δεύτερη συντεταγμένη ).
    var myOptions2 = {ζουμ: 18, κέντρο: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP};
    var map2 = νέο google.maps.Map (document.getElementById ("map_canvas_2"), myOptions2);
  4. Αν θέλετε επίσης ένα δείκτη στο νέο χάρτη, προσθέστε ένα δεύτερο δείκτη που δείχνει τις δύο συντεταγμένες και το δεύτερο χάρτη:
    var myMarker2 = νέος google.maps.Marker ({θέση: latlng2 , map: map2 , τίτλος: "Ο τίτλος του σήματος "});
  5. Στη συνέχεια, προσθέστε το δεύτερο

    όπου θέλετε το δεύτερο χάρτη. Και βεβαιωθείτε ότι έχετε δώσει ID = "map_canvas_2" ID.

  6. Όταν φορτώνεται η σελίδα σας, θα εμφανιστούν δύο χάρτες

Εδώ είναι ο κώδικας μιας σελίδας με δύο χάρτες Google σε αυτό: